kostenloser Webspace werbefrei: lima-city


Mouse over und OnClick

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    u************g

    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&uuml;hst&uuml;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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Du baust einfach in deine Funktion die die Bilder beim OnMouseOver und OnMouseOut-Event wechselt einen Blocker ein, der beim OnClick-Event gesetzt wird. Somit wird bei OnMouseOut das Bild nicht verschwinden sondern (dank des Blockers) stehen bleiben.
    Idee angekommen? ^^
  4. Autor dieses Themas

    u************g

    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
  5. 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.
    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';
    }
    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.

    Vielleicht verstehe ich die Frage ja auch falsch...

    Beitrag zuletzt geändert: 29.9.2009 9:37:39 von nerdinator
  6. Autor dieses Themas

    u************g

    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*
  7. 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:
    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*


    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
  8. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!