Übereinander liegende DIVs und Mouseover

[hax]

Ich habe ein großes Bild in einer DIV und darüber eine weitere DIV mit 2 kleinen Bildern welche per Mouseover das große Bild ändern sollen.
Funktioniert im Firefox aber nicht im Internet Explorer.
Bitte um Hilfe :)

<style>  
#firstDiv {  
    position: absolute; height: 240px; top: 0;  
}  
#secondDiv {  
    position: absolute; height: 30px; top: 0px; margin-top:0px  
}  
#wrapper {  
    position:relative; height: 240px;  
}  
</style>  
  
<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>

[hax]

Oha, hab eben gemerkt dass es ja doch funktioniert als ich die Datei online aufgerufen habe.
Wenn ich sie lokal geöffnet habe hatte ich oben im Browser ne gelbe Leiste mit einer Sicherheitswarnung die ich erst wegklicken musste damit das ganze funktioniert.

Hat sich also erledigt.

[Felix Riesterer]

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:)