kostenloser Webspace werbefrei: lima-city

DIV erscheinen lassen (wie bei Amazon)

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   m*4

   10:32, 3.7.2008

   Ich versuche gerade so eine Imagebox wie bei Amazon zu machen. D.h., ich habe ein Hauptbild und darunter drei kleine Bilder. Wenn ich jetzt mit der Maus über eins der kleinen Bilder fahre, soll statt des Hauptbildes das, wo die Maus drüber ist angezeigt werden. Hier ist mein Code:
   
   

   <script language=\"javascript\"><!--
   function toggle(control)
   {
     var elem = document.getElementById(control);
   
     if(elem.style.display == \"none\")
       elem.style.display = \"block\";
     else
       elem.style.display = \"none\";
   }
   //--></script>
   
   <div id=\"img1\" style=\"display: block;\"> <img ... > </div>
   <div id=\"img2\" style=\"display: none;\"> <img ... > </div>
   <div id=\"img3\" style=\"display: none;\"> <img ... > </div>
   <div id=\"img4\" style=\"display: none;\"> <img ... > </div>
   
   <div onmouseover=\"toggle(img1),toggle(img2)\" onmouseout=\"toggle(img1),toggle(img2)\" class=\"thumb\">
    <img ... >
   </div>
   <div onmouseover=\"toggle(img1),toggle(img3)\" onmouseout=\"toggle(img1),toggle(img3)\" class=\"thumb\">
    <img ... >
   </div>
   <div onmouseover=\"toggle(img1),toggle(img4)\" onmouseout=\"toggle(img1),toggle(img4)\" class=\"thumb\">
    <img ... >
   </div>

   
   
   Eigentlich müsste das doch klappen, wenn ich jetzt mit der Maus über eins der drei DIVs fahre. Aber leider tut sich nichts.
   
   Kann mir jemand sagen wo der Fehler liegt?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

3. m******s

   10:53, 3.7.2008

   Also, ich bin mir nicht absolut sicher, ob das notwendig ist, aber ich setze immer noch ein \"javascript:\" vor eine im Eventhandler aufgerufene Funktion.
   Würde dann statt einer Funktion mit einem Param zweimal aufzurufen, eine Funktion mit zwei Params einmal aufrufen, also:
   
   

   <script language=\"javascript\"><!--
   function toggle(control1,control2)
   {
     var elem = document.getElementById(control1);
   
     if(elem.style.display == \"none\")
       elem.style.display = \"block\";
     else
       elem.style.display = \"none\";
   
     var elem = document.getElementById(control2);
   
     if(elem.style.display == \"none\")
       elem.style.display = \"block\";
     else
       elem.style.display = \"none\";
   }
   //--></script>
   
   <div id=\"img1\" style=\"display: block;\"> <img ... > </div>
   <div id=\"img2\" style=\"display: none;\"> <img ... > </div>
   <div id=\"img3\" style=\"display: none;\"> <img ... > </div>
   <div id=\"img4\" style=\"display: none;\"> <img ... > </div>
   
   <div onmouseover=\"javascript:toggle(img1,img2)\" onmouseout=\"javascript:toggle(img1,img2)\" class=\"thumb\">
    <img ... >
   </div>
   <div onmouseover=\"javascript:toggle(img1,img3)\" onmouseout=\"javascript:toggle(img1,img3)\" class=\"thumb\">
    <img ... >
   </div>
   <div onmouseover=\"javascript:toggle(img1,img4))\" onmouseout=\"javascript:toggle(img1,img4)\" class=\"thumb\">
    <img ... >
   </div>

   
   
   Habs aber selber nicht ausprobiert, ob das besser funktioniert.
   Übrigens: For debugging-purposes solltest du alerts setzen. Der JavascriptInterpreter führt fehlerhaften Code bis zur Stelle des Fehlers aus, d.h. du kannst damit genau feststellen, wo der Fehler liegt (ich würde zuerst am Anfang der toggle-Funktion ein alert(\'test\') setzen, um zu schauen, ob die aufgerufen wird).

4. t*****b

   11:19, 3.7.2008

   Du übergibst als Parameter einen String, dieser muss in Anführungsstrichen stehen:
   
   

   <div onmouseover=\"toggle(\'img1\'),toggle(\'img2\')\" onmouseout=\"toggle(\'img1\'),toggle(\'img2\')\" class=\"thumb\">

   
   
   Außerdem würde ich noch überprüfen, ob der IE unter Version 7 überhaupt die Eigenschaft block des Display-Atributes versteht, weiß es gerade nicht auswendig aber da könnte es auch Probleme geben.
   
   @merovius: DRY-Prinzip ;)Du übergibst als Parameter einen String, dieser muss in Anführungsstrichen stehen:
   
   

   <div onmouseover=\"toggle(\'img1\'),toggle(\'img2\')\" onmouseout=\"toggle(\'img1\'),toggle(\'img2\')\" class=\"thumb\">

   
   
   Außerdem würde ich noch überprüfen, ob der IE unter Version 7 überhaupt die Eigenschaft block des Display-Atributes versteht, weiß es gerade nicht auswendig aber da könnte es auch Probleme geben.
   
   @merovius: Aufgrund des DRY-Prinzipes würde ich m84s Lösung bevorzugen.
   
   Beitrag geändert: 3.7.2008 11:36:44 von trueweb
5. Autor dieses Themas

   m*4

   11:41, 3.7.2008

   Es klappt jetzt. Ich habe \'javascript:\' davogeschreiben und die string in \'\' gepackt. Vielen Dank!

6. m******s

   15:21, 3.7.2008

   
   @merovius: Aufgrund des DRY-Prinzipes würde ich m84s Lösung bevorzugen.
   

   
   
   Erst einmal, du solltst deinen Beitrag editieren ;)
   Secondly: Das mit einer Fkt. habe ich nur angerbracht, weil ich glaubte da gehört ein \"javascript:\" davor und ich wusste schlicht nicht, wie das mit mehreren Funktionsaufrufen gemacht würde ;)
   Auf die Sache mit den Strings wäre ich nie gekommen Obwohl es eigentlich offensichtlich ist...

7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

Dir gefällt dieses Thema?