Nie moge użyć typowego rollover, tzn podmiany obrazków, ani też podmiany background-image, ponieważ przyciski mam w png z przezroczystością, a żeby działało to w IE6 muszę stosować pngfix. pngfix działa tylko wtedy, gdy obrazki załaduje w HTML. Zamiast użyć klasycznego rollover stosuję zmianę atrybutu display: (none/block). Wszystko fajnie działa, ale gdy przejadę kursorem nad przyciskiem zbyt szybko, obrazek zmienia się, ale nie wraca do poprzedniego. Tak jakby przeglądarka nie zdążyła zareagować na zdarzenie onmouseout.

[PHP] pobierz, plaintext 
window.onload = Rollover;
 
		function Rollover() {
		var buttons = document.getElementById('menu');
                var links = buttons.getElementsByTagName('div');
                for (i=0; i<links.length; i++) {
 
		      if (links[i].getAttribute('alt') == "1") {
		      links[i].onmouseover = roll;
		      }
 
		      if (links[i].getAttribute('alt') == "0") {
		      links[i].onmouseout = rollout;
		      } 
                    }
                }
 
		function roll() {
		    var nextDiv = this.nextSibling;
 
		    while(nextDiv.nodeType != 1){
		    nextDiv = nextDiv.nextSibling;
		    }
		    this.style.display = "none";
		    nextDiv.style.display = "block";
		  }
 
		  function rollout() {
		    var previousDiv = this.previousSibling;
 
		    while(previousDiv.nodeType != 1){
		    previousDiv = previousDiv.previousSibling;
		    }
		    this.style.display = "none";
		    previousDiv.style.display = "block";
		  }
[PHP] pobierz, plaintext 

[HTML] pobierz, plaintext 
    <div id="menu"> 
      <img class="slice" src="slices/menu_1.png" alt="menu_1.png"> 
      <img class="slice" src="slices/menu_2.png" alt="menu_2.png"> 
      <div class="button" style="background-image:url('slices/menu_3.png'); display:block;" alt="1"><a href="">Button1</a></div> 
      <div class="button_r" style="background-image:url('slices/menu_3a.png'); display:none;" alt="0"><a href="">Button1</a></div> 
      <div class="button" style="background-image:url('slices/menu_4.png'); display:block;" alt="1"><a href="">Button2</a></div> 
      <div class="button_r" style="background-image:url('slices/menu_4a.png'); display:none;" alt="0"><a href="">Button2</a></div> 
      <div class="button" style="background-image:url('slices/menu_5.png'); display:block;" alt="1"><a href="">Button3</a></div> 
      <div class="button_r" style="background-image:url('slices/menu_5a.png'); display:none;" alt="0"><a href="">Button3</a></div> 
      <div class="button" style="background-image:url('slices/menu_6.png'); display:block;" alt="1"> <a href="">Button4</a></div> 
      <div class="button_r" style="background-image:url('slices/menu_6a.png'); display:none;" alt="0"><a href="">Button4</a></div> 
      <div class="button" style="background-image:url('slices/menu_7.png'); display:block; width:162px;" alt="1"><a href="">Button5</a></div> 
      <div class="button_r" style="background-image:url('slices/menu_7a.png'); display:none; width:162px;" alt="0"><a href="">Button5</a></div> 
      <div class="button" style="background-image:url('slices/menu_8.png'); display:block; width:162px;" alt="1"><a href="">Button6</a></div> 
      <div class="button_r" style="background-image:url('slices/menu_8a.png'); display:none;; width:162px;" alt="0"><a href="">Button6</a></div> 
      <img class="slice" src="slices/menu_9.png" alt="menu_9.png"> 
    </div> 
[HTML] pobierz, plaintext 

jako przykład podaję fragment strony.

//edit:
Problem rozwiązany na około: za pomocą CSS i pseudoklasy :hover. Jednak mimo wszystko zastanawia mnie czemu powyższe rozwiązanie się nie sprawdza.

Jak byś zajrzał do wnętrza biblioteki iepngfix, to na samym dole masz skrypt wywołujący update obrazków podczas załadowania strony - konkretnie funkcja IEPNGFix.update. Na jej podstawie łatwo można stworzyć podobną funkcję, aktualizującą (inicjującą) jeden, konkretny obrazek.

Drugie rozwiązanie oferuje jQuery. Wystarczyłoby użyć wydarzeń "onmouseenter" oraz "onmouseleave" aby osiągnąć zamierzony efekt. Polecam to rozwiązanie.

Co do samego pytania o powód nie działania - mam niejasne wrażenie, że chodzi o użycie "onmouseover" oraz "onmouseout". Wydarzenia te następują nie tylko w momencie pojawienia się myszki na danym obszarze, ale także przy okazji przejścia z jednego elementu do innego w obrębie tego obszaru. Załóżmy, że mamy taką konstrukcję:

<div><p></p><span></span></div>

"Onmouseover" DIVa odpali się zarówno na wejściu do DIVa, jak i na przejściach pomiędzy DIVem i paragrafem, oraz między paragrafem i SPANem. "Onmouseout" za to odpali się dopiero po wyjściu z DIVa. Twoje hiperłącze wewnątrz buttonu może powodować taki efekt.

Pozdrawiam