Imagemap Zugriff bei einer Gallery

Sarah14 · #1 (**permalink**) 07.11.2007, 16:01

Hallo!

Da ich mich ja (vielleicht bereits bekannt) mit einer Bildergalerie befasse habe ich gerade folgendes Problem..
Auf dem ersten Bild(.jpg) meiner Galerie gibt's einen LInk(Image Map), den ich per imageMap am besagten Bild bereits vorbereitet habe.

Nun aber das Problem: ICh möchte nur bei diesem einen Bild auf den Link zugreifen können.

Ich habe mir bereits überlegt, den Link einfach über die komplette Galerie zu legen, so ist er zwar immer da, aber nur beim ersten Bild kommt man auf die Idee drauf zu klicken. Find ich aber unsauber.

Meine zweite Idee => Zugriff bzw. Link-Infos über das Array..
Nur, wie mach ich das am besten?
Hat da jemand ne Idee?
Liebe Grüsse
Sarah

Code:

<?php
	require_once('includes/main.inc.php');
?>

<?php include('header.inc.php'); ?>

<script type="text/javascript">
var myImages = new Array(); 
myImages[1] = new Image();
myImages[1].src = "pics/produktgestaltung.jpg";
myImages[2] = new Image();
myImages[2].src = "pics/3_1_1.jpg";
myImages[3] = new Image();
myImages[3].src = "pics/3_1_2.jpg";
myImages[4] = new Image();
myImages[4].src = "pics/3_1_3.jpg";
myImages[5] = new Image();
myImages[5].src = "pics/3_1_4.jpg";
myImages[6] = new Image();
myImages[6].src = "pics/3_1_5.jpg";
myImages[7] = new Image();
myImages[7].src = "pics/3_1_6.jpg";
myImages[8] = new Image();
myImages[8].src = "pics/3_1_7.jpg";
myImages[9] = new Image();
myImages[9].src = "pics/3_1_8.jpg";
myImages[10] = new Image();
myImages[10].src = "pics/3_1_9.jpg";
myImages[11] = new Image();
myImages[11].src = "pics/3_1_10.jpg";
myImages[12] = new Image();
myImages[12].src = "pics/3_1_11.jpg";
myImages[13] = new Image();
myImages[13].src = "pics/3_1_12.jpg";
myImages[14] = new Image();
myImages[14].src = "pics/3_1_13.jpg";
myImages[15] = new Image();
myImages[15].src = "pics/3_1_14.jpg";
myImages[16] = new Image();
myImages[16].src = "pics/3_1_15.jpg";
myImages[17] = new Image();
myImages[17].src = "pics/3_1_16.jpg";
myImages[18] = new Image();
myImages[18].src = "pics/3_1_17.jpg";
myImages[19] = new Image();
myImages[19].src = "pics/3_1_18.jpg";
myImages[20] = new Image();
myImages[20].src = "pics/3_1_19.jpg";
myImages[21] = new Image();
myImages[21].src = "pics/3_1_20.jpg";
myImages[22] = new Image();
myImages[22].src = "pics/3_1_21.jpg";
myImages[23] = new Image();
myImages[23].src = "pics/3_1_22.jpg";
myImages[24] = new Image();
myImages[24].src = "pics/3_1_23.jpg";
myImages[25] = new Image();
myImages[25].src = "pics/3_1_24.jpg";
myImages[26] = new Image();
myImages[26].src = "pics/3_1_25.jpg";
myImages[27] = new Image();
myImages[27].src = "pics/3_1_26.jpg";
myImages[28] = new Image();
myImages[28].src = "pics/3_1_27.jpg";



 
  var myImages = new Array();
 myImages[1] = { 'src' : 'pics/produktgestaltung.jpg',
                'dsc' : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' };
				
 myImages[2] = { 'src' : 'pics/3_1_1.jpg',
                'dsc' : 'Team by Wellis, Sessel «DiDo» (Fotos: Patrik Fuchs, Zürich)' };
				
 myImages[3] = { 'src' : 'pics/3_1_2.jpg',
                'dsc' : 'Team by Wellis, Sessel «DiDo» (Fotos: Patrik Fuchs Zürich)' };
				
 myImages[4] = { 'src' : 'pics/3_1_3.jpg',
                'dsc' : 'Team by Wellis, Sessel «DaRa» (Fotos: Patrik Fuchs Zürich)' };
				
 myImages[5] = { 'src' : 'pics/3_1_4.jpg',
                'dsc' : 'Team by Wellis, Sessel «DaRa» (Fotos: Patrik Fuchs, Zürich)' };
				
 myImages[6] = { 'src' : 'pics/3_1_5.jpg',
                'dsc' : 'Intertime, Sessel «Nubian»' };

 myImages[7] = { 'src' : 'pics/3_1_6.jpg',
                'dsc' : 'Intertime, Sofaprogramm «Nubian»' };

 myImages[8] = { 'src' : 'pics/3_1_7.jpg',
                'dsc' : 'Intertime, Sofaprogramm «Nubian»' };

 myImages[9] = { 'src' : 'pics/3_1_8.jpg',
                'dsc' : 'Intertime, Sofaprogramm «10:12 pm»' };

 myImages[10] = { 'src' : 'pics/3_1_9.jpg',
                'dsc' : 'Sesselentwurf' };

 myImages[11] = { 'src' : 'pics/3_1_10.jpg',
                'dsc' : 'Stapelbarer Objektstuhl «Zürich»' };

 myImages[12] = { 'src' : 'pics/3_1_11.jpg',
                'dsc' : 'L&S, Schulmöbelprogramm Tisch und Stuhl' };

 myImages[13] = { 'src' : 'pics/3_1_12.jpg',
                'dsc' : 'MOX, Tischprogramm «Tube»' };

 myImages[14] = { 'src' : 'pics/3_1_13.jpg',
                'dsc' : 'MOX, Regalprogramm «Pile»' };

 myImages[15] = { 'src' : 'pics/3_1_14.jpg',
                'dsc' : 'Tischprototyp «Jahr» aus Massivholz' };

  myImages[16] = { 'src' : 'pics/3_1_15.jpg',
                'dsc' : 'Detail Tischprototyp «Jahr», Holz aus dem Tösstal' };

 myImages[17] = { 'src' : 'pics/3_1_16.jpg',
                'dsc' : 'Tischprototyp «Alpen» aus Massivholz' };

 myImages[18] = { 'src' : 'pics/3_1_17.jpg',
                'dsc' : 'Eckdetail Tischprototyp «Alpen»' };

 myImages[19] = { 'src' : 'pics/3_1_18.jpg',
                'dsc' : 'Spiegelleuchtenstudie für Bodenschatz' };

 myImages[20] = { 'src' : 'pics/3_1_19.jpg',
                'dsc' : 'Studie FL-Leuchte mit weißer Abdeckung' };
				
 myImages[21] = { 'src' : 'pics/3_1_20.jpg',
                'dsc' : 'Studie FL-Leuchte mit roter Abdeckung' };
				
 myImages[22] = { 'src' : 'pics/3_1_21.jpg',
                'dsc' : 'Bodenschatz, Accessoires-Linie «Riva»' };
				
 myImages[23] = { 'src' : 'pics/3_1_22.jpg',
                'dsc' : 'Bodenschatz, Armaturen-Linie «Riva»' };
				
 myImages[24] = { 'src' : 'pics/3_1_23.jpg',
                'dsc' : 'Bodenschatz, Seifenspender Kollektion «Riva»' };
				
 myImages[25] = { 'src' : 'pics/3_1_24.jpg',
                'dsc' : 'Bodenschatz, Badeinrichtung Programm «Riva»' };
				
 myImages[26] = { 'src' : 'pics/3_1_25.jpg',
                'dsc' : 'Bodenschatz, Lavaboausstattung «Riva»' };
				
 myImages[27] = { 'src' : 'pics/3_1_26.jpg',
                'dsc' : 'Bodenschatz, Wandauslauf Armaturenprogramm «Riva»' };
				
 myImages[28] = { 'src' : 'pics/3_1_27.jpg',
                'dsc' : 'Bodenschatz, Relingsystem «Riva»' };

				

var maxValue = myImages.length - 1;
var intValue = 1;

function gallerie(charValue) {
if(charValue == 'c') {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue].src + "'><p>" + myImages[intValue].dsc + "</p>";
document.getElementById("zähler").innerHTML = intValue +"/"+ maxValue;
}
else if(charValue == '+') {
if(intValue == maxValue) {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[1].src + "'><p>" + myImages[1].dsc + "</p>";
intValue = 1;
document.getElementById("zähler").innerHTML = intValue +"/"+ maxValue;
}
else {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue + 1].src + "'><p>" + myImages[intValue + 1].dsc + "</p>";
document.getElementById("zähler").innerHTML = (intValue+1) +"/"+ maxValue;
intValue = intValue + 1;
}
}
else if(charValue == '-') {
if(intValue == 1) {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[maxValue].src + "'><p>" + myImages[maxValue].dsc + "</p>";
intValue = maxValue;
document.getElementById("zähler").innerHTML = intValue +"/"+ maxValue;
}
else {
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue - 1].src + "'><p>" + myImages[intValue - 1].dsc + "</p>";
document.getElementById("zähler").innerHTML = (intValue-1) +"/"+ maxValue;
intValue = intValue - 1;
}
}
}


function vorladen1(i) {
if (! myImages[i].img ) {
myImages[i].img = new Image();
myImages[i].img.src = myImages[i].src;
}
}

function vorladen(i) {
var next= i<(maxValue-1) ? (i+1) : 1;
var prev= i>1 ? (i-1) : 1;
vorladen1(next);
vorladen1(prev);
}
</script>
<html>
<body>


<body onLoad="gallerie('c')">
<div id="logo" ><a href="index.php"><img src="pics/logo.gif"></a></div>
<div id="imgGallerie">
<img src="" width="600" height="350" border="0" alt="" usemap="#workshop_Map">
<map name="workshop_Map">
<area shape="rect" alt="""" coords="35,52,94,69" href="mailto:info@abc.ch?subject=Workshop" target="_blank">
</map>


</div>
<div id="links"><a href="#" onClick="gallerie('-')"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#420032"><</font></a></div>
<div id="zähler"></div>
<div id="rechts"><a href="#" onClick="gallerie('+')"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#420032">></font></a></div>

</body>
</html>

<?php include('navigation.inc.php'); ?>

<?php include('footer.inc.php'); ?>

Sarah14 · #2 (**permalink**) 12.11.2007, 11:15

Ich habe schon verschiedene Tipps bekommen, doch so richtig funktioniert das noch nicht. Kennt sich damit jemand aus?

Tipp1, im Code der Galerie:
document.getElementById("imgGallerie").innerHTML ="<map><area.....>";
(klappt nicht)

Tipp2
»» »» var myImages = new Array();
»» »» myImages[1] = new Image();
»» »» myImages[1].src = "pics/produktgestaltung.jpg";
»» »» myImages[1].usemap = "#produktgestaltung_Map";
»» »»
»» »» und dann im <body>
»» »» <div id="imgGallerie">
»» »» <map name="produktgestaltung_Map">
»» »» <area shape="rect" alt="""" coords="35,52,94,69" href="http://www.abc.ch" target="_blank">
»» »» </map>
»» »» </body>
(auch net)

liebe Grüsse
Sarah

protonenbeschleuniger · #3 (**permalink**) 12.11.2007, 12:56

Ich finde dein Skript sehr unglücklich, da es alles mögliche doppelt macht und viel überflüssigen Code enthält. Auch dein HTML ist nicht mehr auf der höhe der Zeit, du solltest dich darüber hinaus mit CSS beschäftigen, das macht vieles einfacher.

Ich hab die ganze Sache mal umgeschrieben:

PHP-Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

       "http://www.w3.org/TR/REC-html40/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title> Gallerie </title>



<style type="text/css">

#imgGallerie div{

    cursor: pointer;

    text-decoration: underline;

    

}

#imgGallerie img{

    border:none;



}

</style>

<script type="text/javascript">

function ImgObj(src, txt, map) {

    var o = {};

    o.src = src;

    o.dsc = txt;

    if(map) o.map = '#' + map;

    return o;

}

var myImages = [

ImgObj('pics/produktgestaltung.jpg','&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;', 'workshop_Map'),

ImgObj('pics/3_1_1.jpg', 'Team by Wellis, Sessel «DiDo» (Fotos: Patrik Fuchs, Zürich)'),

ImgObj('pics/3_1_2.jpg', 'Team by Wellis, Sessel «DiDo» (Fotos: Patrik Fuchs Zürich)' ),

ImgObj('pics/3_1_3.jpg', 'Team by Wellis, Sessel «DaRa» (Fotos: Patrik Fuchs Zürich)' ),

ImgObj('pics/3_1_4.jpg', 'Team by Wellis, Sessel «DaRa» (Fotos: Patrik Fuchs, Zürich)'),

ImgObj('pics/3_1_5.jpg', 'Intertime, Sessel «Nubian»'),

ImgObj('pics/3_1_6.jpg', 'Intertime, Sofaprogramm «Nubian»'),

ImgObj('pics/3_1_7.jpg', 'Intertime, Sofaprogramm «Nubian»'),

ImgObj('pics/3_1_8.jpg', 'Intertime, Sofaprogramm «10:12 pm»'),

ImgObj('pics/3_1_9.jpg', 'Sesselentwurf'),

ImgObj('pics/3_1_10.jpg', 'Stapelbarer Objektstuhl «Zürich»'),

ImgObj('pics/3_1_11.jpg', 'L&S, Schulmöbelprogramm Tisch und Stuhl'),

ImgObj('pics/3_1_12.jpg', 'MOX, Tischprogramm «Tube»'),

ImgObj('pics/3_1_13.jpg', 'MOX, Regalprogramm «Pile»'),

ImgObj('pics/3_1_14.jpg', 'Tischprototyp «Jahr» aus Massivholz'),

ImgObj('pics/3_1_15.jpg', 'Detail Tischprototyp «Jahr», Holz aus dem Tösstal')

];                



var maxValue = myImages.length - 1;

var intValue = 0;



function gallerie(charValue) {

    if(!charValue) charValue = 0;

    intValue += charValue;

    

    if(intValue >= myImages.length) intValue  = 0;

    else if(intValue < 0) intValue = myImages.length - 1;

    

    var o = document.getElementById("imgGallerie");

    if(!o) return;

    

    var counter = document.getElementById("counter");

    var img = o.getElementsByTagName('img')[0];

    var txt = o.getElementsByTagName('p')[0];

    

    img.src = myImages[intValue].src;

    img.useMap = myImages[intValue].map;

    txt.innerHTML = myImages[intValue].dsc;

    counter.innerHTML = ( intValue + 1) + '/' + (myImages.length);

    vorladen(intValue - 1);

    vorladen(intValue + 1);

}





function vorladen(i) {

    if (myImages[i] && !myImages[i].img ) {

        myImages[i].img = new Image();

        myImages[i].img.src = myImages[i].src;

    }

}

window.onload = function() { gallerie(); };

</script>



</head><body>



<map name="workshop_Map">

<area shape="rect" alt="" coords="0,0,94,69" href="mailto:info@hanspeterwirth.ch?subject=Workshop">

</map>



<div id="imgGallerie">

<img src="#" width="600" height="350" alt="">

<p>[Text]</p>

<div onclick="gallerie(-1)">&lt;</div>

<div id="counter"></div>

<div onclick="gallerie(+1)">&gt;</div>

</div>



</body>

</html>

Sarah14 · #4 (**permalink**) 12.11.2007, 15:06

Okay, ich würd mal sagen, durch die Tatsache, dass ich vor 2 Wochen noch nicht mal wusste was Javascript überhaupt ist, hab ich das schon ganz ordentlich hinbekommen..

Aber hey: Hut ab!! Vielen Vielen Dank!

Ich hab mir schon gedacht, dass mein Text zu lang und zu doppeltgemoppelt ist, aber wie soll man das verbessern, als one-women-show-lern-einheit?

*frohlockend singend*

liebe Grüsse
Sarah

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Profifrage: Imagemap auf div mit background-image?	freejay	(X)HTML	1	12.03.2011 14:04
css gallerie Problem	papers00	CSS	0	10.03.2010 14:43
Area und CSS - Tooltip in Imagemap mit CSS	poppaea	(X)HTML	6	03.04.2009 19:14
Bilder aus image gallery mit Bildüberschrift - nur wie?	fossy	CSS	0	05.11.2008 17:17