Kitek's Page Blog programisty / webdeveloper'a

IE6 && javascript:void(null) && img.src

Podmiana source’a obrazka pod IE6 z href=”javascript:void(null);”

Ostatnio spotkałem się z błędem przeglądarki Internet Explorer 6 polegającym na tym, że źródło obrazka nie podmieniało się poprawnie przy zastosowaniu prostego kodu JavaScript.

Jak się później okazało diabeł tkwi w szczegółach i wszystkiego winne były linki, które na atrybucie href posiadały wartości “javascript:void(null)”, a do zdarzenia onclick podczepione były funkcje JS rotujące obrazki.

Mój skrypt miał za zadanie podmieniać obrazki po naciśnięciu linka “poprzedni” lub “następny”.

Kod JavaScript’u wyglądał podobnie do poniższego:

var pozycja = 0;
var obrazki = new Array();
obrazki[0] = 'obrazek1.jpg';
obrazki[1] = 'obrazek2.jpg';
obrazki[2] = 'obrazek3.jpg';
obrazki[3] = 'obrazek4.jpg';

function next() {
	if(pozycja+1 > obrazki.length-1) {
		pozycja = 0;
	} else {
		pozycja++;
	}
	showImage();
}

function prev() {
	if(pozycja-1 < 0) {
		pozycja = obrazki.length-1;
	} else {
		pozycja--;
	}
	showImage();
}

function showImage() {
	// jQuery
	$('#obrazek').attr('src',obrazki[pozycja]);
	// no-framework JS
	obrazek = getElementById('obrazek');
	obrazek.src = obrazki[pozycja];
}

Kod HTML:

<a href="javascript:void(null);" onclick="prev();">poprzedni</a>
<img id="obrazek" src="obrazek1.jpg" />
<a href="javascript:void(null);" onclick="next();">następny</a>

Rozwiązanie:

  • zastosowanie href=”#” zamiast “javascript:void(null);”
  • zastosowanie href=”javascript:mojaFunkcja();” zamiast “javascript:void(null);”