Tweet
Hallo, ich probiere jetzt schon stundenlang rum aber der OnMouseOut will im FireFox einfach nicht (OnMouseOver geht reibungslos und OnMouseOut geht im IE auch), ich würde es ja über CSS realisieren ich bin aber der Meinung es geht nicht weil 3 verschiedene Grafiken getauscht werden sollen.
Kann mir bitte wer helfen?
Konkret geht es um folgende Stelle:
<script type="text/javascript">
function Ona(){
document.getElementById('h2-2').style.backgroundPosition = '-0 -0';
document.getElementById('h2-3').style.backgroundPosition = '-0 -0';
}
function Offa(){
document.getElementById('h2-2').style.backgroundPosition = '-237 -75';
document.getElementById('h2-3').style.backgroundPosition = '-390 -75';
}
</script>
<a onMouseOver="Ona()" onMouseOut="Offa()" href="#" ><div class="s" id="h2-2"></div></a>
Kann mir bitte wer helfen?
Konkret geht es um folgende Stelle:
<script type="text/javascript">
function Ona(){
document.getElementById('h2-2').style.backgroundPosition = '-0 -0';
document.getElementById('h2-3').style.backgroundPosition = '-0 -0';
}
function Offa(){
document.getElementById('h2-2').style.backgroundPosition = '-237 -75';
document.getElementById('h2-3').style.backgroundPosition = '-390 -75';
}
</script>
<a onMouseOver="Ona()" onMouseOut="Offa()" href="#" ><div class="s" id="h2-2"></div></a>
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> body {margin:0;padding:0;background-image:url(_img/0.jpg);background-repeat:repeat-x; background-color:#FFF;font-family:Arial, Helvetica, sans-serif;} .s #Start{width:973px;margin:0 auto;text-align:left;} .s #Header1{padding:0 0px;height:75px;background-image:url(_img/s1.jpg);} .s #Header2{padding:0 0px;height:92px;background-image:url(_img/s1.jpg);} #Ueberschrift{width:377px;height:15px;margin-left:231px;float:left;margin-top:27px;} #Community-Button{width:240px;height:42px;background-image:url(_img/s1.jpg); background-position:-664px -14px;float:right;margin-top:14px;margin-right:69px; padding-top:6px;background-repeat:no-repeat;} .s #Navigation{float:left;width:150px;padding:0 0px;} .s #Content{padding:0 0px;} .s #Footer{padding:0 0px;height:20px;} .clear{clear:both;height:0;font-size:1px;line-height:0px;} h1{font-size:11px;color:#FFF;text-align:center;margin:0 0;} .s #h2-1{float:left;width:237px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg); background-position:-0px -75px;} .s #h2-2{float:left;width:153px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg); background-position:-237px -75px;} .s #h2-3{float:left;width:36px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg); background-position:-390px -75px;} .s #h2-4{float:left;width:127px;padding:0 0px;height:92px;background-image: url(_img/s1.jpg); background-position:-426px -75px;} .s #h2-5{float:left;width:36px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg); background-position:-390px -75px;} .s #h2-6{float:left;width:152px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg); background-position:-553px -75px;} .s #h2-7{float:left;width:36px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg); background-position:-390px -75px;} .s #h2-8{float:left;width:196px;padding:0 0px;height:92px;background-image:url(_img/s1.jpg); background-position:-705px -75px;} </style> <script type="text/javascript"> function Ona(){ document.getElementById('h2-2').style.backgroundPosition = '-0 -0'; document.getElementById('h2-3').style.backgroundPosition = '-0 -0'; } function Offa(){ document.getElementById('h2-2').style.backgroundPosition = '-237 -75'; document.getElementById('h2-3').style.backgroundPosition = '-390 -75'; } </script> </head> <body class="s"> <div id="Start"> <div id="Header1"> <div class="s" id="Ueberschrift"> <h1><strong>Das große Informationsportal zum Thema Abnehmen / Diät</strong></h1></div> <div class="s" id="Community-Button"> <h1>Du hast noch offene Fragen? Dann <br />Frag doch unsere Community >>></h1></div> </div> <div id="Header2"> <div class="s" id="h2-1"></div> <a onMouseOver="Ona()" onMouseOut="Offa()" href="#" ><div class="s" id="h2-2"></div></a> <div class="s" id="h2-3"></div> <div class="s" id="h2-4"></div> <div class="s" id="h2-5"></div> <div class="s" id="h2-6"></div> <div class="s" id="h2-7"></div> <div class="s" id="h2-8"></div> </div> <div id="Navigation"></div> <div id="Content"> </div> <br class="cleart" /> <div id="Footer"></div> </div> </body> </html>
Moderatorin
, es funktioniert 
Kommentar