• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Mousover

I

iSplit

Neues Mitglied
Hallo ihr,

ich habe eine Frage zu dem Mouseover Effekt. Mir ist erst nach langem aufgefallen, dass wenn man meine Homepage mit IE oder Firefox anschaut, der Mouseover effekt für einige Buttons nicht funktioniert, mit Safari jedoch schon. Die Buttons sind als HTML-Gadget in den Blog eingefügt. Liegt ein Fehler im Code vor? Ich kenne mich mit HTML eher wenig aus, habe den Mouseovereffekt mehr durch Tutorials zusammengewürfelt ;P.
Würde mich sehr freuen, wenn mir geholfen wird!

Hier der Code:
Code: 
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "http://img444.imageshack.us/img444/3503/homefvn.png";     /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "http://img444.imageshack.us/img444/3503/homefvn.png"; /* erste Highlight-Grafik */

Normal2 = new Image();
Normal2.src = "http://isplit.co.de/rubenstahl.de/twitter-2_9f7c.png";     /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "http://isplit.co.de/rubenstahl.de/twitter1_64ed.png"; /* zweite Highlight-Grafik */


Normal3 = new Image();
Normal3.src = "http://isplit.co.de/rubenstahl.de/facebook__2__234a.png";     /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "http://isplit.co.de/rubenstahl.de/facebook__1__39c9.png"; /* dritte Highlight-Grafik */

Normal4 = new Image();
Normal4.src = "http://isplit.co.de/rubenstahl.de/picasa2_54d2.png";     /* dritte Standard-Grafik */
Highlight4 = new Image();
Highlight4.src = "http://isplit.co.de/rubenstahl.de/picasa_6714.png"; /* dritte Highlight-Grafik */


Normal5 = new Image();
Normal5.src = "http://isplit.co.de/rubenstahl.de/youtube1_8495.png";     /* dritte Standard-Grafik */
Highlight5 = new Image();
Highlight5.src = "http://isplit.co.de/rubenstahl.de/youtube_00af.png"; /* dritte Highlight-Grafik */

Normal6 = new Image();
Normal6.src = "http://isplit.co.de/rubenstahl.de/blogger_adb6.png";     /* dritte Standard-Grafik */
Highlight6 = new Image();
Highlight6.src = "http://isplit.co.de/rubenstahl.de/blogger1_67cc.png"; /* dritte Highlight-Grafik */

Normal7 = new Image();
Normal7.src = "http://img709.imageshack.us/img709/1222/skypelow.png";     /* dritte Standard-Grafik */
Highlight7 = new Image();
Highlight7.src = "http://img827.imageshack.us/img827/5329/skypehigh.png"; /* dritte Highlight-Grafik */

Normal8 = new Image();
Normal8.src = "http://img63.imageshack.us/img63/53/maillow.png";     /* dritte Standard-Grafik */
Highlight8 = new Image();
Highlight8.src = "http://img824.imageshack.us/img824/7205/mailhigh.png"; /* dritte Highlight-Grafik */

Normal9 = new Image();
Normal9.src = "http://isplit.co.de/rubenstahl.de/rss22_8d62.png";     /* dritte Standard-Grafik */
Highlight9 = new Image();
Highlight9.src = "http://isplit.co.de/rubenstahl.de/rss-2_0bd9.png"; /* dritte Highlight-Grafik */

/* usw. fuer alle weiteren zu benutzenden Grafiken */

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>
<style type="text/css">
h1 { color:#6363A5; font-family:Arial,sans-serif; }
p  { color:#000000; font-family:Arial,sans-serif; }
</style>



<table border="0" cellpadding="0" cellspacing="0"><tr>
<td valign="top">

<a href="http://www.rubenstahl.de"
   onmouseover="Bildwechsel(0, Highlight1)"
   onmouseout="Bildwechsel(0, Normal1)"><img src="http://img444.imageshack.us/img444/3503/homefvn.png" 
 width="58" height="32" border="0" alt="Home" /></a>

<a href="http://twitter.com/iSplit" target="_blank"
   onmouseover="Bildwechsel(1, Highlight2)"
   onmouseout="Bildwechsel(1, Normal2)"><img src="http://isplit.co.de/rubenstahl.de/twitter-2_9f7c.png" 
 width="58" height="32" border="0" alt="Twitter" /></a>

<a href="http://www.facebook.com/profile.php?id=560163270" target="_blank"
   onmouseover="Bildwechsel(2, Highlight3)"
   onmouseout="Bildwechsel(2, Normal3)"><img src="http://isplit.co.de/rubenstahl.de/facebook__2__234a.png" 
 width="58" height="32" border="0" alt="Facebook" /></a>

<a href="http://picasaweb.google.com/RubenStahl" target="_blank"
   onmouseover="Bildwechsel(3, Highlight4)"
   onmouseout="Bildwechsel(3, Normal4)"><img src="http://isplit.co.de/rubenstahl.de/picasa2_54d2.png" 
 width="58" height="32" border="0" alt="Picasa" /></a>

<a href="http://www.youtube.com/user/TheISplit?feature=mhum" target="_blank"
   onmouseover="Bildwechsel(4, Highlight5)"
   onmouseout="Bildwechsel(4, Normal5)"><img src="http://isplit.co.de/rubenstahl.de/youtube1_8495.png" 
 width="58" height="32" border="0" alt="Youtube" /></a>

<a href="http://splitthemilka.blogspot.com/" target="_blank"
   onmouseover="Bildwechsel(5, Highlight6)"
   onmouseout="Bildwechsel(5, Normal6)"><img src="http://isplit.co.de/rubenstahl.de/blogger_adb6.png" 
 width="58" height="32" border="0" alt="Blogger" /></a>

<a href="skype:psc-dizzy_bee?call"
   onmouseover="Bildwechsel(6, Highlight7)"
   onmouseout="Bildwechsel(6, Normal7)"><img src="http://img709.imageshack.us/img709/1222/skypelow.png" 
 width="58" height="32" border="0" alt="Skype" /></a>

<a href="mailto:[email protected]"
   onmouseover="Bildwechsel(7, Highlight8)"
   onmouseout="Bildwechsel(7, Normal8)"><img src="http://img63.imageshack.us/img63/53/maillow.png" 
 width="58" height="32" border="0" alt="eMail" /></a>

<a href="feed://www.rubenstahl.de/feeds/posts/default" target="_blank"
   onmouseover="Bildwechsel(8, Highlight9)"
   onmouseout="Bildwechsel(8, Normal9)"><img src="http://isplit.co.de/rubenstahl.de/rss22_8d62.png" 
 width="58" height="32" border="0" alt="RSS" /></a>

</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td valign="top">


</td>
</tr>
</table>
Vielen lieben Dank!

Grüße, iSplit
 
Im Firefox wird statt bei dem Bild über dem die Maus ist ein 4 Stellen davor liegendes Bild geändert.

Das Problem bei dir ist aber vielschichtig:
- dein HTML-Code ist fehlerhaft: [Invalid] Markup Validation of http://www.rubenstahl.de/ - W3C Markup Validator
- du verwendest für ein Menü eine Tabelle -> besser <ul> mit <li> pro Menüpunkt
- du verwendest das document.images[]-Array um auf Bildobjekte zuzugreifen

Mein Tipp:
- HTML-Code überarbeiten
- Listenpunkte aus dem Menü machen und per CSS stylen
- den Mouseover-Effekt per Pseudoklasse :hover erstellen, das spart dieses lästige JavaScript ein. Beispiel für einen Menüpunkt:

Code: 
#menu li a {
 background-image: url(normal.png);
 display: block;
 height: XYpx;
 width: XYpx;
}

#menu li a:hover {
 background-image: url("mouseoverbild.png");
}
 
Hey, danke für deine Hilfe. Hab es jetzt so gelöst. In Safari & Firefox funktioniert es nun:

Code: 
<a href="http://rubenstahl.de" 
   onmouseover="document.Bild.src='http://isplit.co.de/rubenstahl.de/Home_High.png';" 
   onmouseout="document.Bild.src='http://isplit.co.de/rubenstahl.de/Home_High.png';">

<img src="http://isplit.co.de/rubenstahl.de/Home_High.png" 
 name="Bild" 
 width="58" height="32
" alt="Demolink" 
 border="0" />
</a>

<a href="http://www.twitter.com/isplit" 
   onmouseover="document.Bild2.src='http://isplit.co.de/rubenstahl.de/twitter1_64ed.png';" 
   onmouseout="document.Bild2.src='http://isplit.co.de/rubenstahl.de/twitter-2_9f7c.png';">

<img src="http://isplit.co.de/rubenstahl.de/twitter-2_9f7c.png" 
 name="Bild2" 
 width="58" height="32
" alt="Demolink" 
 border="0" />
</a>

<a href="http://www.facebook.com/profile.php?id=560163270" 
   onmouseover="document.Bild3.src='http://isplit.co.de/rubenstahl.de/facebook__1__39c9.png';" 
   onmouseout="document.Bild3.src='http://isplit.co.de/rubenstahl.de/facebook__2__234a.png';">

<img src="http://isplit.co.de/rubenstahl.de/facebook__2__234a.png" 
 name="Bild3" 
 width="58" height="32
" alt="Demolink" 
 border="0" />
</a>

<a href="https://picasaweb.google.com/RubenStahl" 
   onmouseover="document.Bild4.src='http://isplit.co.de/rubenstahl.de/picasa_6714.png';" 
   onmouseout="document.Bild4.src='http://isplit.co.de/rubenstahl.de/picasa2_54d2.png';">

<img src="http://isplit.co.de/rubenstahl.de/picasa2_54d2.png" 
 name="Bild4" 
 width="58" height="32
" alt="Demolink" 
 border="0" />
</a>

<a href="http://www.youtube.com/user/TheISplit?feature=mhum" 
   onmouseover="document.Bild5.src='http://isplit.co.de/rubenstahl.de/youtube_00af.png';" 
   onmouseout="document.Bild5.src='http://isplit.co.de/rubenstahl.de/youtube1_8495.png';">

<img src="http://isplit.co.de/rubenstahl.de/youtube1_8495.png" 
 name="Bild5" 
 width="58" height="32
" alt="Demolink" 
 border="0" />
</a>

<a href="http://splitthemilka.blogspot.com/" 
   onmouseover="document.Bild6.src='http://isplit.co.de/rubenstahl.de/blogger1_67cc.png';" 
   onmouseout="document.Bild6.src='http://isplit.co.de/rubenstahl.de/blogger_adb6.png';">

<img src="http://isplit.co.de/rubenstahl.de/blogger_adb6.png" 
 name="Bild6" 
 width="58" height="32
" alt="Demolink" 
 border="0" />
</a>

<a href="skype:psc-dizzy_bee?call" 
   onmouseover="document.Bild7.src='http://isplit.co.de/rubenstahl.de/skypehigh.png';" 
   onmouseout="document.Bild7.src='http://isplit.co.de/rubenstahl.de/skypelow.png';">

<img src="http://isplit.co.de/rubenstahl.de/skypelow.png" 
 name="Bild7" 
 width="58" height="32
" alt="Demolink" 
 border="0" />
</a>

<a href="mailto:[email protected]" 
   onmouseover="document.Bild8.src='http://isplit.co.de/rubenstahl.de/Mail_High.png';" 
   onmouseout="document.Bild8.src='http://isplit.co.de/rubenstahl.de/Mail_low.png';">

<img src="http://isplit.co.de/rubenstahl.de/Mail_low.png" 
 name="Bild8" 
 width="58" height="32
" alt="Demolink" 
 border="0" />
</a>

<a href="feed://www.rubenstahl.de/feeds/posts/default" target="_blank" 
   onmouseover="document.Bild9.src='http://isplit.co.de/rubenstahl.de/rss-2_0bd9.png';" 
   onmouseout="document.Bild9.src='http://isplit.co.de/rubenstahl.de/rss22_8d62.png';">

<img src="http://isplit.co.de/rubenstahl.de/rss22_8d62.png" 
 name="Bild9" 
 width="58" height="32
" alt="Demolink" 
 border="0" />
</a>

<a href="http://www.rubenstahl.de/p/iphone-pics.html" 
   onmouseover="document.Bild10.src='http://isplit.co.de/rubenstahl.de/aperture.png';" 
   onmouseout="document.Bild10.src='http://isplit.co.de/rubenstahl.de/aperture.png';">

<img src="http://isplit.co.de/rubenstahl.de/aperture.png" 
 name="Bild10" 
 width="58" height="32
" alt="Demolink" 
 border="0" />
</a>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben