imagemap kombiniert mit lightbox

[Manu]

Hallo zusammen,

Ich habe über den Grundriss einer Wohnung eine "imagemap" gelegt, um verschiedene Fotos sichtbar zu machen! Jetzt würd ich das ganze gerne so erweitern, dass ich zusätzlich auf das jeweils erscheinende Bild klicken kann, um es vergrößert darzustellen (idealerweise über "lightbox") ! Komm da aber einfach nicht weiter und weiß ehrlich gesagt gar nicht, ob dies überhaupt realisierbar ist!
Zur Anschauung der Link zu meinem "Problemfall":

imagemap

Ich hoffe, es kann mir jemand weiterhelfen,

Vielen dank schon einmal

[Malcolm Beck´s]

مرحبا

Jetzt würd ich das ganze gerne so erweitern, dass ich zusätzlich auf das jeweils erscheinende Bild klicken kann, um es vergrößert darzustellen (idealerweise über "lightbox") !

Wie ersetzt du die jeweiligen Bilder beim hovern? Hast du ds Script geschrieben?

Du müsstest ja nur ein a-Element um das angezeigte Bild legen und dessen href-Attribut austuschen, genau so, wie bei den Bildern das src-Attribut ausgetauscht wird.
Also aus:

<img border="0" alt="" src="http://oberammergau-apartments.de/images/badezimmer.jpg" name="target">

ein

<a href="http://oberammergau-apartments.de/images/badezimmer.jpg" rel="lightbox">  
<img src="http://oberammergau-apartments.de/images/badezimmer.jpg" name="target" alt="">  
</a>

Hier bräuchtest du nur noch das href austauschen, den rest erledigt die lightbox.

mfg

[Manu]

Vielen Dank für die Antwort!
Hinter der imagemap liegt folgendes Script:

if (document.images) {  
	nav1on = new Image(); nav1on.src = "../../../images/grundriss_kreuzweg4.jpg";  
	nav2on = new Image(); nav2on.src = "../../../images/grundriss_kreuzweg3.jpg";  
	nav3on = new Image(); nav3on.src = "../../../images/grundriss_kreuzweg1.jpg";  
	nav4on = new Image(); nav4on.src = "../../../images/grundriss_kreuzweg5.jpg";  
	nav5on = new Image(); nav5on.src = "../../../images/grundriss_kreuzweg2.jpg";  
  
	target1on = new Image(); target1on.src = "../../../images/badezimmer.jpg";  
	target2on = new Image(); target2on.src = "../../../images/kamin.jpg";  
	target3on = new Image(); target3on.src = "../../../images/schlafzimmer.jpg";  
	target4on = new Image(); target4on.src = "../../../images/balkon.jpg";  
	target5on = new Image(); target5on.src = "../../../images/kueche.jpg";  
}  
  
function rollOn(img1,img2,text){  
	str = "window.status = '" + text + "'";  
	if (document.all) setTimeout(str,5); // this is a hack to fix bug in IE on PC  
    else window.status = text;  
	if (document.images) {  
		document.navs.src=eval(img1 + "on.src");  
		document.target.src=eval(img2 + "on.src");  
	}  
}  
  
function rollOff(){  
    window.status = "";	  
	if (document.images) {  
		document.navs.src=navoff.src;  
		document.target.src=targetoff.src;  
	}  
}

Wenn dann müsste ich ja hier irgendetwas ersetzen, oder?
Sorry, aber steh da irgendwie komplett auf dem Schlauch!

Liebe Grüße

[Malcolm Beck´s]

مرحبا

Hinter der imagemap liegt folgendes Script:

Das hatte ich schon gefunden ;)
Ich hatte ja gefragt, ob du es geschrieben hast.

Wenn dann müsste ich ja hier irgendetwas ersetzen, oder?

Sorry, aber ich bin auch kein Javascriptler.
Aber, da ich gerne lerne und mir dein Bsp. gefiel, habe ich es nachgebaut; du kannst es gerne testen und wenn's dir gefällt, auch uneingeschränkt nutzen (ohne hinweis, woher es kommt oder ähnliches).
Ich hab's kurz angetestet und es funktioniert soweit ganz gut.

http://dj-tut.de/sc-dir/n-i-map/
Im Quelltext stehen auch einige erläuterungen, wobei das Script sehr Simpel gestrickt ist.

Sorry, aber steh da irgendwie komplett auf dem Schlauch!

Das kenn ich, da hilft meistens nur noch lesen (was dir gerade in die Quere kommt) ;)

mfg

[Manu]

Wow, mit so viel Hilfe hab ich gar nicht gerechnet! Vielen lieben Dank!
Script hab ich "zusammengebastelt"! Um so etwas gänzlich selber zu schreiben fehlt mir noch das know how! Ist nämlich meine erste Website ;-)

Schöne Grüße

[Manu]

Eine letzte Frage noch: Wie würdest du jetzt bei deinem Beispiel die Verlinkungen positionieren, dass ich sie genau auf die Fotosymbole bekomme? Bekomm das einfach nicht hin!

LG

[Malcolm Beck´s]

مرحبا

Eine letzte Frage noch: Wie würdest du jetzt bei deinem Beispiel die Verlinkungen positionieren, dass ich sie genau auf die Fotosymbole bekomme?

<http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=Absolut positionieren> (beachte auch den hinweis auf position:relative;).
Wenn ich die Tage nicht mehr antworten sollte, dann habe ich das Land verlassen, also nicht wundern ;)

Für den Fall der Fälle habe ich den Titel gewechselt, so dass dieser wieder etwas aufmerksamkeit bekommt.

Ich sag einfach mal tschüss Deutschland, bis irgendwann ;)

mfg

[Manu]

Danke erst einmal für deine Antwort!

Hab jetzt schon so viel herumprobiert, aber es funktioniert einfach nicht so wie ich das will! Wäre lieb, wenn sich noch jemand einklinken könnte, der mir weiterhilft!

Vielen lieben Dank