Mouse over und OnClick
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
baum
bestimmter bereiche
bild
bleiben
blocker
code
display
element
funktion
haus
http
idee
inhalt
koordinate
pack
rat
show
stehen
url
verschwinden
-
Hallo,
ich bin gerade leider irgendwie in ner denkblockade.
Und zwar habe ich folgendes Problem:
Ich habe eine imagemap erstellt und bei mouseover bestimmter bereiche des bildes sollen rechts daneben weitere bilder erscheinen, bei mouseout verschwinden. Kein Thema - klappt.
Doch diese sind verlinkt und sollen bei OnClick solange stehen bleiben bis man ein anderes anklickt.
Nun weiß ich irgendwie nicht so recht wie ich das anstellen soll. Kann mir jemand nen Rat geben?
Hier der Code:
<script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_showHideLayers() { //v6.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } //--> </script>
und im body
<div id="Layer1" class="etiketten"><a href="#"><img src="bilder/hotel.png" alt="Beschreibung Unterkunft"></a></div> <div id="Layer2" class="etiketten"><a href="#"><img src="bilder/fruehstueck.png" alt="Beschreibung Sektfrühstück"></a></div> <div id="Layer3" class="etiketten"><a href="#"><img src="bilder/wellness.png" alt="Beschreibung Wellnesspaket"></a></div> <div id="Layer4" class="etiketten"><a href="#"><img src="bilder/tauchen.png" alt="Beschreibung Tauchkurs"></a></div> <div id="Layer5" class="etiketten"><a href="#"><img src="bilder/cocktails.png" alt="Beschreibung Cocktail"></a></div> <div id="Layer6" class="etiketten"><a href="#"><img src="bilder/fischen.png" alt="Beschreibung Nachtfischen"></a></div> <div id="Layer7" class="etiketten"><a href="#"><img src="bilder/nacht.png" alt="Beschreibung Romantische Nacht"></a></div> <div id="Layer8" class="etiketten"><a href="#"><img src="bilder/tv.png" alt="Beschreibung Fernseher"></a></div> <div id="Layer9" class="etiketten"><a href="#"><img src="bilder/anreise.png" alt="Beschreibung Anreise"></a></div> <p><img src="bilder/hochzeitstisch.jpg" alt="virtueller Hochzeitstisch" width="488" height="450" usemap="#Map" border="0"> <map name="Map"> <area shape="rect" coords="38,202,118,285" href="#" onMouseOver="MM_showHideLayers('Layer1','','show')" onMouseOut="MM_showHideLayers('Layer1','','hide')" onClick="MM_showHideLayers('Layer1','','show')"> <area shape="rect" coords="149,216,216,297" href="#" onMouseOver="MM_showHideLayers('Layer2','','show')" onMouseOut="MM_showHideLayers('Layer2','','hide')" onClick="MM_showHideLayers('Layer1','','show')"> <area shape="rect" coords="223,237,291,281" href="#" onMouseOver="MM_showHideLayers('Layer3','','show')" onMouseOut="MM_showHideLayers('Layer3','','hide')" onClick="MM_showHideLayers('Layer1','','show')"> <area shape="rect" coords="294,264,362,302" href="#" onMouseOver="MM_showHideLayers('Layer4','','show')" onMouseOut="MM_showHideLayers('Layer4','','hide')" onClick="MM_showHideLayers('Layer1','','show')"> <area shape="rect" coords="351,212,392,278" href="#" onMouseOver="MM_showHideLayers('Layer5','','show')" onMouseOut="MM_showHideLayers('Layer5','','hide')" onClick="MM_showHideLayers('Layer1','','show')"> <area shape="rect" coords="397,202,446,284" href="#" onMouseOver="MM_showHideLayers('Layer6','','show')" onMouseOut="MM_showHideLayers('Layer6','','hide')" onClick="MM_showHideLayers('Layer1','','show')"> <area shape="rect" coords="37,12,194,195" href="#" onMouseOver="MM_showHideLayers('Layer7','','show')" onMouseOut="MM_showHideLayers('Layer7','','hide')" onClick="MM_showHideLayers('Layer1','','show')"> <area shape="rect" coords="197,100,358,216" href="#" onMouseOver="MM_showHideLayers('Layer8','','show')" onMouseOut="MM_showHideLayers('Layer8','','hide')" onClick="MM_showHideLayers('Layer1','','show')"> <area shape="rect" coords="341,38,432,133" href="#" onMouseOver="MM_showHideLayers('Layer9','','show')" onMouseOut="MM_showHideLayers('Layer9','','hide')" onClick="MM_showHideLayers('Layer1','','show')"> </map> </p>
Vielen Dank schonmal!
Beitrag zuletzt geändert: 29.9.2009 10:37:04 von updatetraining -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
danke idee ist angekommen, aber sry was ist ein blocker?*g* hab nich wirklich viel ahnung von java script.
hab es versucht einfach noch zusätzlich onClick dazuzufügen. das ging erst nich mit dem gleichen layer. hab dann nochma 9neue layer hinzu und das geht nun. nun leider bleibt es bei onclick stehen und es überlager sich alles.
bräuchte dazu soetwas wie ein "offclick" oder "nextclick" oder sonstwas, aber gibts ja leider nicht?
Oder du erläuterst mir deine blocker-lösung. :)
Beitrag zuletzt geändert: 29.9.2009 9:27:12 von updatetraining -
Also: Habe ich das richtig verstanden? Du willst, dass bei "OnClick" ein Div angezeigt wird? (Pack deinen Code mal in ein code-tag ;) )
Nun, relativ einfach.
Wobei beispielsweise bei OnClick die Funktion UpdateDiv(100,100,'Layer1', '<a href="#"><img src="bilder/wellness.png" alt="Beschreibung Wellnesspaket"></a>'); aufgerufen werden könnte. Die ersten zwei Werte entsprechen der X- bzw. Y-Koordinate des Div-Elements, der dritte wert der ID des Div's, und der letzte Wert dem Inhalt, der im Div stehen soll. So brauchst du nicht endlos viele Div's. Den Inhalt könntest du auch dynamisch, beispielsweise über Ajax einbinden... usw.function UpdateDiv(x, y, element, content) { div = document.GetElementById(element); div.style.top = x; div.style.left = y; div.innerHTML = content; div.style.display = 'inline'; } function HideDiv(element) { div = document.GetElementById(element); div.innerHTML = ''; div.style.display = 'none'; }
Vielleicht verstehe ich die Frage ja auch falsch...
Beitrag zuletzt geändert: 29.9.2009 9:37:39 von nerdinator -
ich weiß nich ob du mich richtig verstanden hast*g*
ja ich will das bei onClick ein div angezeigt wird.
Das funktioniert ja auch bisher mit:onClick="MM_showHideLayers('Layer1','','show')"
Nur zeigt er es dann IMMER an. und wenn man dann auch 10 divs rumklickt überlagern die sich und man sieht irgendwann nurnoch das zuletzt angeklickte. also sie verschwinden nichtmehr. Und ich möchte das ein bei OnClick gezeigtes DIV, sich wieder schließt wennman auf ein anderes OnClick Element klickt, wo sich das zugehörige Div öffnet.
ALso
DIV 1 ich klick drauf und es erscheint ein BAUM, der baum bleibt so lange bis ich
DIV 2 anklicke. Dann verschwindet der baum und es öffnet sich ein HAUS.
Hoffe es ist so bildlich einfach ausgedrückt*g* -
updatetraining schrieb: ich weiß nich ob du mich richtig verstanden hast*g* ja ich will das bei onClick ein div angezeigt wird. Das funktioniert ja auch bisher mit:
Nur zeigt er es dann IMMER an. und wenn man dann auch 10 divs rumklickt überlagern die sich und man sieht irgendwann nurnoch das zuletzt angeklickte. also sie verschwinden nichtmehr. Und ich möchte das ein bei OnClick gezeigtes DIV, sich wieder schließt wennman auf ein anderes OnClick Element klickt, wo sich das zugehörige Div öffnet. ALso DIV 1 ich klick drauf und es erscheint ein BAUM, der baum bleibt so lange bis ich DIV 2 anklicke. Dann verschwindet der baum und es öffnet sich ein HAUS. Hoffe es ist so bildlich einfach ausgedrückt*g*onClick="MM_showHideLayers('Layer1','','show')"
Ich habe hier eine Seite gefunden die , so wie ich es verstanden habe, genau so funktioniert wie Du es haben willst (geh mit der Maus über die Monate):
http://vbcmarch.ch/newspast.php
dazu gehörender Thread:
http://www.html.de/css/28085-bild-durch-hover-event-einer-anderen-tabelle-aendern.html -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
