Imagemap Zugriff bei einer Gallery

Sarah14 · 07.11.2007

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@hanspeterwirth.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'); ?>

ThaHammer · 07.11.2007

Die Idee von mir ist da eventuell besser geeignet!

Du gibst doch eh alles mit innerHtml aus, überschreibe doch einfach das Startbild samt dem Link mit den nächsten Bildern.
Also wenn ich das jetzt richtig verstanden habe?

Sarah14 · 08.11.2007

MH? wie meinst du genau? Welchen Link genau? Im Javascript oder im HTML? ich probier mal weiter...

lg, sarah

Sarah14 · 08.11.2007

geht das denn ned?

is denn ein lösungsansatz nicht, dass ich im array gleich bei bild eins die zusatzinformation zur image map gebe?

Also als Anfängerin probier ichs grad so

Code:

  var myImages = new Array();
 myImages[1] = { 'src' : 'pics/produktgestaltung.jpg',
 'link' : 'coords="35,52,94,69"',
 'href' : 'mailto:info@hanspeterwirth.ch?subject=Workshop',
                'dsc' : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' };

und dann beim javascript für die galerie :

Code:

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

mh?
Für jeden Tip bin ich dankbar

ich geb nicht auf
liebe grüsse
sarah

ThaHammer · 08.11.2007

Ich glaube ich verstehe nicht was Du genau willst?

Sarah14 · 09.11.2007

ähm..

Also ich möchte, dass auf dem ersten Bild meiner 28 Bilder der Imagegallery eine aktive Fläche ist. Wenn man drauf kommt, der handzeiger erscheint und bei Klick eine Verlinkung zur Mailbox stattfindet.

Ich habe bereits ImageMaps erfolgreich anwenden können, wenn das dazugehörige Bild per <img src...> in einem Div oder so liegt. Nun ist es aber so, dass mein Bild innerhalb der Bildergalerie ist und ich so nicht drauf zugreifen kann, wenn ich im dazugehörigen Bild keine source angebe..

Ich kann echt schlecht erklären, aber verstehst du jetzt was ich mein?

Ich möchte die ImageMap-Daten innerhalb meines Javascripts haben, damit diese Aktive Fläche auch wirklich nur bei Bild eins erscheint..

liebe Grüsse
Sarah

PS: ICh bekam schon den tip es so zu probieren.. ha aber nicht geklappt:

Code:

»» »» 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.formpol.ch" target="_blank">
»» »» </map>
»» »» </body>

liebe Grüsse
sarah

ThaHammer · 10.11.2007

Ich verstehe es immer noch nicht ganz.

Code:

<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@hanspeterwirth.ch?subject=Workshop" target="_blank">
</map>
</div>

Dieses Bild soll nur beim ersten Start erscheinen, oder habe ich das richtig verstanden?
Du willst auf ein Element zugreifen.

Code:

document.getElementById("imgGallerie").innerHTML ="Dein HTML Qelltext";

Diese Anweisung überschreibt Dir den Inhalt des Elementes mit der ID imgGallerie. Sprich was immer Du hinten eingibst wird ausgegeben beim Aufruf. Wenn ich den Quellcode richtig gelesen und verstanden habe, wird beim Starten der Seite mittels Onload das Imagemap eh überschrieben, oder?

Sarah14 · 12.11.2007

mist

Tja, erklären ist tatsächlich schwer..

Also ich probiers nochmal..

Ich hoffe der Aufbau meiner Seite ist verständlich.. also eigentlich besteht sie nur aus einem Div, nämlich dem, der ImageGallery. in diesem Div wir die Bildergalerie generiert, per Javascript.
Navigation erfolgt über zwei Pfeile zum vorwärts, rückwärtsklicken.

Nun möchte ich einen Linkverweis auf dem ersten Bild der Galerie platzieren. Sozusagen auf dem Startbild. Bild 1 von x

Also habe ich zuerst probiert, einfach ein wenig zu faken, und in dem div selber, eine <map> zu platzieren. Dies funktioniert aber nicht, wenn man keine <img src=""> angibt. Auch ein durchsichtiges img bringt nix, da zwar zuerst das img-src geladen wird, aber dann gleich nach 2sec weggeht und die imageGallery zum Vorschein kommt.

Nun die Frage, wie ich diese spezifischen imageMap-Daten
<map name="Map"><area shape="rect" coords="146,44,382,59" href="http://www.xxxx.de" target="_blank" alt=" ">
</map>
in das Javascript reinbekomme

dein Vorschlag hat leidernicht geklappt. Resultat war, dass der Bereich der ImageGallery weiss blieb.

mh?.... Ich würd das so gerne knacken das Problem.

liebe Grüsse
Sarah

ThaHammer · 12.11.2007

So ungefähr?
OK, wenn Du aufs erste Bild ein ImageMap legen willst wirds etwas komplizierter. Irgendwie musst Du Bild 1 dann abfangen und per innerHTML dann Bild und imageMap zuweisen.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

</head>

<script type="text/javascript">

  var myImages = new Array();
 myImages[1] = { 'src' : 'MULA/bilder/bluebutton.jpg',
                'dsc' : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' };
				
 myImages[2] = { 'src' : '',
                '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 + "' usemap='#workshop_Map'><p>" + myImages[intValue].dsc + "</p><map name='workshop_Map'><area shape='rect' alt='' coords='35,52,94,69' href='mailto:info@hanspeterwirth.ch?subject=Workshop' target='_blank'></map>";
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>

<body>
<div id="logo" ><a href="index.php"><img src="pics/logo.gif"></a></div>
<div id="imgGallerie">
<img src="MULA/bilder/bluebutton.jpg" alt="" width="108" height="21" usemap="#workshop_Map">
<map name="workshop_Map">
<area shape="rect" coords="13,-63,96,20" href="mailto:info@hanspeterwirth.ch?subject=Workshop" target="_blank" alt="" border="0">
</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>

Ich habe nur zu testzwecken das erste Bild getauscht!

Imagemap Zugriff bei einer Gallery

Sarah14

Neues Mitglied

ThaHammer

Aktives Mitglied

Sarah14

Neues Mitglied

Sarah14

Neues Mitglied

ThaHammer

Aktives Mitglied

Sarah14

Neues Mitglied

ThaHammer

Aktives Mitglied

Sarah14

Neues Mitglied

ThaHammer

Aktives Mitglied