✔ Problem mit Visibility

[treboras]

Idee: Ein Bild, dass bei mouseover 3 Bilder sichtbar macht und das eine Bild, was vorher war, wird durch die 3 neuen verdeckt.

Problem: Bei meinem Lösungsweg werden (Firefox) die 3 Bilder bei Mausbewegung immer mal angezeigt und mal nicht.

Code:

	<img id="menu_main" onMouseOver="document.getElementById('menu_web').style.visibility='visible', document.getElementById('menu_extras').style.visibility='visible', document.getElementById('menu_info').style.visibility='visible'" onMouseOut="document.getElementById('menu_web').style.visibility='hidden', document.getElementById('menu_info').style.visibility='hidden', document.getElementById('menu_extras').style.visibility='hidden'" src="img/menu_main.gif" alt="menu">
	<img id="menu_web" src="img/menu_web.gif" alt="web">
	<img id="menu_extras" src="img/menu_extras.gif" alt="extras">
	<img id="menu_info" src="img/menu_info.gif" alt="info">

CSS:

#menu_main {
	margin:0 0 0 -250px;
	position:absolute;
	left:50%;
	z-index:0;
	visibility:visible;
	border:0;
	}
	
#menu_info {
	margin:0 0 0 -250px;
	position:absolute;
	left:50%;
	z-index:9;
	visibility:hidden;
	border:0;
	}
	
#menu_web {
	margin:0 0 0 -250px;
	position:absolute;
	left:50%;
	z-index:8;
	visibility:hidden;
	border:0;
	}
	
#menu_extras {
	margin:0 0 0 -250px;
	position:absolute;
	left:50%;
	z-index:7;
	visibility:hidden;
	border:0;
	}

vielen Dank schon mal für die Antworten!

 

[Quaese]

Hi,

das Problem liegt darin begründet, dass der Browser beim Einblenden der Bilder einen mouseout-Event für das Basisbild auslöst, was das erneute Ausblenden zur Folge hat. Jetzt tritt erneut das mouseover-Ereignis ein und der Zyklus beginnt von vorne, was dir als Flackern erscheint.

Eventuell löst es dein Problem, wenn du den mouseout-Event in die drei neuen Grafiken verlagerst.

Ciao
Quaese

 

[treboras]

vielen Dank, funktioniert. Guter Vorschlag.