MouseOver/Out - Bildwechsel

[norse]

Schönen guten Abend!

Auf der PCGH Webside exestierte eine Zeit lang der Mouseover/out effekt und diesen würde ich auch gern mal nutzen, jedoch finde ich nichts passendes im Netz dazu.

Möchte halt einfach dieses in eine Webside einbringen, doch wie?

Es soll einfach nur geschehen, dass wenn die maus übers bild geht, dass das bild wechseld und bei mouseout halt das alte bild wieder da ist

weiß jemand Rat??
hab schon einige Foren durchsucht aber bisher nich das gefunden was ich brauche.

lg
Norse

 

[Adrenalize]

Sollte mit Javascript gehen. Eine weitere möglichkeit ganz ohne scripte wäre, den Hovereffekt per CSS zu nutzen. Siehe Mouseover-Buttons und -Effekte mit CSS

Dabei muss die Fragik allerdings als Link eingebunden werden mit <a href...>. Setzt man das Sprungziel auf # passiert aber nichts, wenn man das bild klickt. alternativ könntest du eine größere Grafik verlinken, die dann beide Mouseover bilder nebeneinander zeigt.

alles, was du im CSS tun musst, ist die Definition eigener Styles für die Sortew links, also z.B.

   a.bild      {display:block;
                   background-image:url(button.gif);
                   width:120px; height:30px}
   a.bild:hover {background-image:url(button_on.gif);}

Und halt in der HTML-Datei dann diesen Links die Klasse "bild" zuweisen.
Sollte in allen neueren Browsern problemlos gehen.

 

[norse]

am liebsten wäre mir ja Javascript da ich schon ein andren mouseover effekt über javascript laufen hab, die beiden sollen halt dann gleihczeitig laufen, gibt es da acuh sowas?

 

[Adrenalize]

Das sollte ja recht einfach mit dem Eventhandler "onmouseover" zu machen sein.
Siehe SELFHTML: JavaScript / Sprachelemente / Event-Handler
Da machen sie es mit Text, sollte aber auch mit bildern kein Problem sein, diese da anzuzeigen.
Evtl. im Head dann noch sowas wie

<script
language="JavaScript">
<!--
button1= new Image();
button1.src = "knopf.jpg"
button2= new Image();
button2.src = "email.jpg"
/* usw. für alle Grafiken,
die am Mouse-Over-Effekt beteiligt sind */
//-->
</script>

Damit die Bilder beim Laden der Seite gleich vorgeladen werden, sonst entsteht eine Wartezeit, wenn man mit der Maus drüber fährt (zumindest wohl bei großen Bildern)

 

[Akkuschrauber]

Ach was des geht viel einfacher!!!
Wenn des nur 2 Bilder sind, machste das so:

<img src="1.Bild" onmouseover="this.src='2.Bild';" onmouseout="this.src='wieder 1.Bild';"; />

 

[norse]

supa danke ich werd das dann heut mal ausprobieren!

Vielen dank euch beiden!

lg
Norse