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

[raven16]

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:

<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]

Ich würde beide Bilder in eine Bilddatei packen und als Hintergrund anlegen. Über Background-Position kannst du dann den jeweils gewünschten Bereich anzeigen lassen. Damit bist du alle Probleme los.

z.B. so: http://matthiasschuetz.com/css-sprites-fuer-hintergrundbilder-richtig-verwenden

bessere Erklärung: http://webstandard.kulando.de/post/2010/05/26/css-sprite-ladegeschwindigkeit-optimieren-http-requests-verringern

 

[Tumbleweed]

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]

Danke die Idee war sehr gut. Das ich da nie selbst drauf gekommen bin
So erspar ich mir das JavaScript

CSS:

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:

<div class="logobox">
     <div class="logo"></div>
</div>

 

[Daaron]

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}