✔ Einfach onMouseOver

[Darian]

Hallo Leute,

ich habe einige Menüpunkte, und ich möchte gerne sobald ich mit der Maus rüberfahre, dass sich das erste Bild ändert.

<div id="home" >
   <div class="entry" >
      <a href="<?php echo DOCUMENT_ROOT . 'index.php?site=home'?>" onMouseOver="ChangeImage(self)"><img src="<?php $url="images/arrow1.jpg"; if($_REQUEST['site'] == "home") { $url="images/arrow2.jpg"; } echo $url; ?>" width='15' height='14'/> <img src="images/home.jpg" width='45' height='14'/></a>
   </div>
</div>

Jeder Menüpunkt besteht aus zwei Bildern, und das arrow1.jpg, soll sich in arrow2.jpg ändern.

Wie mache ich das, ich nehme mal an ich übergebe das eigene Objekt, und muss irgendwie zu dem src Attribut des ersten Bildes kommen, weiß aber leider noch nicht wie.

Ich nehme mal an mit css würde es nicht funktionieren, weil sich der Pfeil ändern soll sobald man in die div box geht, und nicht sobald man nur das kleine Bild geht.

Ich hoffe ihr versteht was ich ungefähr meine, und könnt mir da helfen.

mfg und danke für eventuelle Infos
Darian

 

[Maik]

Hi,

schau mal hier: http://www.on-mouseover.de/script1.htm

mfg Maik

 

[Darian]

Hallo,

stimmt hat ja super funktioniert, wusste gar nicht dass man da so praktisch und einfach auf die Bilder zugreifen kann mit js.

Und es geht auch ohne den new Image() Funktionen im Header. Kann mir das jemand erklären?

lg und danke für die Hilfe
Darian

 

[kuddeldaddeldu]

Hi,

Und es geht auch ohne den new Image() Funktionen im Header. Kann mir das jemand erklären?

Das Anlegen der Images ist dazu da, sie vorzuladen, so dass sie sich schon im Cache befinden, wenn das Event ausgelöst wird.

LG

 

[Darian]

Ok stimmt, ich habe es also doch wieder dazu gegeben. Damit es auch passt dann.

Edit doch noch eine kurze Frage:

arrow1= new Image();
	arrow1.src = "images/arrow1.jpg";
	arrow2= new Image();
	arrow2.src = "images/arrow2.jpg";
	
function ChangeImage(src)
{
	alert("Test");
	if(src == "images/arrow1.jpg")
	{
		return "images/arrow2.jpg";
	}
}

Und aufgerufen wird es wie folgt:

onMouseOver="arrow_home.src='ChangeImage(arrow_home.src)'"

Sprich, der Menüpunkt gerade aktiviert ist, und somit den arrow2.jpg hat, wird es nicht verändert, sonst wird es verändert.

Funktioniert aber nicht, wenn ich darüber fahre, ist aufeinmal das Bild weg. Und das alert wird auch nicht ausgeführt. Er geht also gar nicht in die Funktion rein.

lg