Felix Riesterer: Übereinander liegende DIVs und Mouseover

Beitrag lesen

Liebe(r) hax,

mal davon abgesehen, was den Internet Explorer stört (warum verschweigst Du uns das (nicht-)Vorhandensein und den Wortlaut von Fehlermeldungen?), wozu die Tabelle? Wozu die div-Elemente? Warum machst Du's unnötig kompliziert und unsemantisch? Das macht die "Fehlersuche" unnötig schwer!

<table border=0 cellpadding=0 cellspacing=0 width="320" height="240"><tr><td>

<div id="wrapper">

<div id="firstDiv">
<a href=1.jpg id="NewsLink"><img src="1.jpg" id="NewsPic" width="320" height="240" border="0"></a>
</div>

<div id="secondDiv">
<a href="#"><img src="1.jpg" onmouseover="document.images['NewsPic'].src='1.jpg';document.links['NewsLink'].href='1.jpg';" width="30" height="30"></a>
<a href="#"><img src="2.jpg" onmouseover="document.images['NewsPic'].src='2.jpg';document.links['NewsLink'].href='2.jpg';" width="30" height="30"></a>
</div>

</div>

</td></tr></table>

  
Das geht seeeehr viel eleganter und kürzer:  
  
~~~html
<p id="NewsLink">  
    <a href="1.jpg"><img src="1.jpg"></a>  
    <img id="trigger1" src="1.jpg" />  
    <img id="trigger2" src="2.jpg" />  
</p>  
  
<!--  
     Das folgende JavaScript steht entweder direkt nach dem <p>-Element,  
     oder am Ende des Dokuments. Sollte es im Kopf stehen, dann bräuchte  
     es einen "[link:http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/framework.htm#autostart@title=Autostart]"!  
-->  
<script type="text/javascript">
~~~~~~javascript
//<![CDATA[  
    myOnMouseOver = function (img) {  
        var a = document.getElementById("NewsLink").getElementsByTagName("a")[0];  
        a.href = img.src;  
        a.getElementsByTagName("img")[0].src = img.src;  
    }  
  
    document.getElementById("trigger1").onmouseover = function () {  
        myOnMouseOver(this);  
    };  
    document.getElementById("trigger2").onmouseover = function () {  
        myOnMouseOver(this);  
    };  
//]]>
~~~`</script>`{:.language-html}  
  
Die Darstellung kannst Du mit CSS genauso anpassen, wie Du das mit Deinem Div-Salat auch getan hast. Das <p>-Element ist nun Dein "wrapper"-Element.  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)