JavaScript HTML-Image hover mit JavaScript: Ladefehler im Internet Explorer

raven16

Lieutenant
Dabei seit
Nov. 2008
Beiträge
580
Hallo zusammen,
ich benutze schon seit Ewigkeiten ein JavaSkript, um bei einem Link mit dem Tag <img> bei einem Mouseover eine andere Bilddatei zu laden.
Dies hat auch in den älteren Browserversionen immer wunderbar so funktioniert, auch wenn ich vielleicht nicht einschätzen kann, ob das JavaScript dazu einwandfrei programmiert wurde.

Mit CSS-hover war leider immer der Effekt, dass die Bilder bei einem Hover geladen werden mussten und so das Bild kurz weiß wurde, bis das hover-Bild auftaucht.

Auf der Seite, die ich gerade erstelle, benutze ich das JavaScript, um bei einem MouseOver ein kleines Home-Zeichen hinter dem Logo einzublenden.

Im Internet-Explorer tritt dabei nun folgender Effekt auf:

Wenn ich mit der Maus darüberfahre, dann geht der Fehler weg und kommt auch nicht wieder, bis ich die Seite neu lade.

Hier der Quellcode dazu:
HTML:
<script type="text/javascript">
        HomeNormal = new Image();
        HomeNormal.src = "css/design/aufbau/logo.png";     
        HomeMouseOver = new Image();
        HomeMouseOver.src = "css/design/aufbau/logo_hover.png"; 
	
	
        function Bildwechsel (Bildnr, Bildobjekt) 
        {
        	window.document.images[Bildnr].src = Bildobjekt.src;
        }
</script>

<a href="home.php" class="logo" onmouseover="Bildwechsel(0, HomeMouseOver)" onmouseout="Bildwechsel(0, HomeNormal)">
	<img src="css/design/aufbau/home.png" alt="">
</a>
Ich hoffe ihr könnt mir helfen :)
 

savuti

Lt. Commander
Dabei seit
Jan. 2010
Beiträge
1.356
Zuletzt bearbeitet: (Link hinzugefügt...)

Tumbleweed

Captain
Dabei seit
März 2008
Beiträge
3.555
Den Vorschlag unterstütze ich. Alles was man in CSS lösen kann, sollte man einer JS-Lösung vorziehen. Ein CSS-Sprite zu benutzen ist eine sehr elegante und performante Lösung.
 

raven16

Lieutenant
Ersteller dieses Themas
Dabei seit
Nov. 2008
Beiträge
580
Danke die Idee war sehr gut. Das ich da nie selbst drauf gekommen bin :freak:
So erspar ich mir das JavaScript :)

CSS:
Code:
div.logobox{
	background: url('design/aufbau/logo_hover.png');
	background-repeat: no-repeat;
	width: 250px;
	height: 80px;
	float: left;
}
div.logo{
	background: url('design/aufbau/logo.png');
	background-repeat: no-repeat;
	width: 250px;
	height: 80px;
}
div.logo:hover{
	background: none;	
}
HTML:
HTML:
<div class="logobox">
     <div class="logo"></div>
</div>
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
Immer noch nicht ideal.
Kombiniere logo_hover.png und logo.png in einer einzigen Datei, unter- oder nebeneinander. Du weißt ja sicherlich, wie hoch oder breit dein <div class="logo"> ist. Jetzt sagst du eben (wenn die Höhe 100px wäre)
.logo {background: url("logo.png"); background-position: 0 0; background-repeat: no-repeat;}
.logo:hover {background-position-y: 100px}
 
Top