Bilderwechsel bei "MouseOver"

felix3103

Hi,
Also ich bin dabei eine Homepage zu basteln...
Und versuche ein Linkmenü zu machen.
Das Linkmenü soll z.B aus diesen Grafiken bestehen:

Bild 1 [Blockierte Grafik: http://www.beepworld.de/memberdateien/members98/habbosnet/homepage_inaktiv.gif]
Bild 2 [Blockierte Grafik: http://www.beepworld.de/memberdateien/members98/habbosnet/homepage_aktiv.gif]

Und so solls dann sein:
Es soll erst Bild 1 sichtbar sein und wenn man mit der Maus über ("MouseOver") Bild 1 fährt, soll an genau der selben stelle wo Bild 1 ist, Bild 2 erscheinen und Bild 1 verdecken.

Danke schon mal im vorraus!

MFG FeL!x

dr.zoidberg

es geht mit javascript, wie frag mich nicht.
aber mit css gehts!

driver

Code

<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "button1.gif";     /* erste Standard-Grafik */
Highlight1 = new Image();
Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */


Normal2 = new Image();
Normal2.src = "button2.gif";     /* zweite Standard-Grafik */
Highlight2 = new Image();
Highlight2.src = "button2h.gif"; /* zweite Highlight-Grafik */


Normal3 = new Image();
Normal3.src = "button3.gif";     /* dritte Standard-Grafik */
Highlight3 = new Image();
Highlight3.src = "button3h.gif"; /* dritte Highlight-Grafik */


/* usw. fuer alle weiteren zu benutzenden Grafiken */


function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>

Alles anzeigen

aufruf:

Code

[url='../../../index.htm'][img]button1.gif[/img][/url]

(quelle: selfhtml)[/code]

GreenRover

mal ne frage an dich diver...

wiso JS un kein CSS ?!

vileicht da es pannender ist für die seitenbesucher die kein JS aktiviert haben.

Oder da es mit CSS einfach und schneller geht ?!

driver

Zitat

es geht mit javascript, wie frag mich nicht.

habs nur zur vervollständigung geschrieben.
ich selber würds a mit css machen...

übrigens... bin da driver *G*

manuel0307

hi es geht auch etwas kürzer:

wenn du dann mehere buttons auf diese weise verändern willst, musst jeweils den img name="image" erweitern z.b. durch zahlen 1, 2, 3 usw.

driver

@ GreenRover

aber css kann ich nur nehmen wenn ich nen text als link habe.
wenn des bild selber der link is gehts nur mit java (oder manuels version)

oder ?

sheepdog

würde mich auch interessieren, hab auf meiner HP bilder als link die auch mit dem mouseover effekt arbeiten eingebaut (war eine verdammte arbeit)
jetzt hab ich ein riesen java script code und das gefühl das das auch einfacher gegangen wäre xD

::RMB::

sicher geht das mit CSS einfach ne Tabelle und im hover das "background-image ändern.

driver

aber was is wenn der link selbst ein bild / button ist.
dann bringts ja nix wenn ich den hintergrund ändere, oder ?

und wenn ich den button als hintergrundgrafik mache,
dann brauch ich als link ja nen text, aber den will ich net

das geht dann mit css nicht (oder ich habs noch net gefunden..)

Omgoogles

Würde ich zustimmen, bei Grafiken kenn ich auch nur die JS-Lösung!

felix3103

Danke für die ganzen Beiträge!!

Was Manuel0307 geschrieben hat war absolut ausreichend hat super funktioniert!! die anderen sachen auch, aber mit manuels gings am schnellsten

bin jetzt erst auf das forum zurück gekommen weil mein pc ne weile nich am netz war...

Danke nochmal

MFG Felix

Ronald

Zitat von driver

aber was is wenn der link selbst ein bild / button ist.
dann bringts ja nix wenn ich den hintergrund ändere, oder ?

und wenn ich den button als hintergrundgrafik mache,
dann brauch ich als link ja nen text, aber den will ich net

das geht dann mit css nicht (oder ich habs noch net gefunden..)

Dann schau mal hier (ich hab es eben mal schnell für dich gebastelt): http://ronald.ro.ohost.de/forum-hilfe/navi/navi.html

G.a.d.M.

Ronald

Robmania

das is das mit java script

Dave32

hey hey!

habe auch mal ne Frage zu diesem Thema... Habe es hier zufällig durch google gefunden

Ich hoffe ihr nehmt es mir nicht übel wenn ich das thema hier nach ein paar Jahren wieder aufgreife...

Ich versuche gerade bei einem Image, welches verweis-sensitive flächen hat, einen MouseOver-Effekt einzubauen...

Mein script bis jetzt sieht so aus:

Jetzt würde ich gerne bei jeder Fläche, ein neues Bild laden lassen beim MouseOver... Also dass "bild.jpg" ausgetauscht wird... Weiß da jemand eine Umsetzungsmöglichkeit?

Würde mich über eine Antwort freuen,

Dave

Dodo

HTML

<img .... id="imageMap" ... />
<area .... onmouseover="document.getElementById('imageMap').src = 'image/neuNeu.jpg';" onmouseout="document.getElementById('imageMap').src = 'images/bild.jpg';" ... />

Dave32

Danke! Funktioniert perfekt! =)

Tags