Bilderwechsel in der Navigation

[fredolin]

Hey Leute,

ich habe ein kleines Problem oder sehen Wald ned vor lauter Bäume nicht. Ich habe eine Navigation mit Bildern und möchte diese beim überfahen wechseln.

<div class="icon">
     <ul class="navIcon">
           <li><a href="#"><img id="01" src="img/icon_01.png" width="56" height="65" alt="CiN GmbH" /></a></li>
           <li><a href="#"><img id="02" src="img/icon_02.png" width="56" height="65" alt="Cin GmbH" /></a></li>
           <li><a href="#"><img id="03" src="img/icon_03.png" width="56" height="65" alt="CiN GmbH" /></a></li>
           <li><a href="#"><img id="04" src="img/icon_04.png" width="56" height="65" alt="CiN GmbH" /></a></li>
     </ul>
</div>

$('.navIcon img').mouseover(function() {
		var showPic = $(this).attr('id');
	});
	
	function showPic(id) {
		var orgBild = $('.navIcon img').attr("src", "img/icon_"+id+".png");
		var myTemp = $('.navIcon img').attr("src", "../../img/icon_"+id+"_blue.png");
		alert(myTemp);
		$('.navIcon img').attr("src", myTemp);
	}

Ich sehe und finde den Fehler nicht. Ich hoffe es kann mir eine helfen.

Gruß Fredolin

 

[Sempervivum]

Einen Fehler sehe ich auf Anhieb: Du verwendest den Namen showPic zweimal, einmal für eine Variable und einmal für eine Funktion. Davon abgesehen, kann man diese Funktion viel einfacher mit CSS realisieren: Beide Bilder zu einem zusammenfassen und als Hintergrund anlegen. Dann im Hover die Position verschieben, so dass das andere Bild sichtbar wird.

 

[SpiceLab]

Davon abgesehen, kann man diese Funktion viel einfacher mit CSS realisieren: Beide Bilder zu einem zusammenfassen und als Hintergrund anlegen. Dann im Hover die Position verschieben, so dass das andere Bild sichtbar wird.

Die Technik ist unter dem Begriff CSS Sprites bekannt.

 

[BocaSpanky]

Also als erstes fällt auf das du die function showPic nicht aufrufst bevor die Hover function zuEnde ist.

showPic(showPic);