Mouseover bei Bildern

[Alves]

Hi!

Da ich mich grad son bisschen mit HTML und CSS beschäftige, komt schon eine nächste Frage:

Wie kann ich ein Bild verändern, wenn die Maus drüber ist?

Ich habe schon gesehen, dass man in einen a-tag ein "onmouseover" und ein "onmouseout" einbaut, etwa so:

Code: Alles auswählen

<a href="bla.de" onmouseover="..." onmouseout="...">

Bloß, ist die Frage, wenn ich mri einige Queltexte anschaue, sind das dort immer so komische Javascript Funktionen.

Ich verstehe das nicht.

Wie gehts? kann ich auch einfach mit realtiven/absoluten Bildadressen arbeiten?

Bitte um Hilfe!

MFG

[bluejoke]

Haaaalt Stop! Ich editier gleich diesen Post, aber kommt mir nicht zuvor verdammt! Endlich kann ich mal ne Frage beantworten!!!

Edit:
So. Jetzt.
Also: Eine inzwischen veraltete Technik ist es, bei dem Event mouseOver eine JavaScript-Funktion aufzurufen, die den src-Wert beim Image-Tag verändert. Ist aber nicht so toll, weil man dazu eben JavaScript braucht, und der Browser erst beim mouseOver erfährt, dass da noch ein anderes Bild auch hin soll, wird also erst dann geladen (ok, kann man lösen, ist aber nochmal JavaScript).
Lustige Leute haben sich dann CSS angesehen, und sich gedacht: Das geht doch auch ohne JS. Denn seit CSS2 gibts die sog. Pseudo-Klassen. Z.B. ":hover". Jetzt kannst du also ein Stylesheet schreiben, das besagt "Wenn ne Maus über mir steht, dann bin ich unsichtbar". Und das geht so:

Code: Alles auswählen

.firstimage:hover {display:none}

Die selben Leute haben sich dann auch noch gedacht, dass das ja blöd sei, wenn nun kein Bild mehr angezeigt wird. Also haben sie noch dazugeschrieben:

Code: Alles auswählen

.firstimage:hover {display:inline}

Jetzt hatten diese lieben Menschen aber ein Problem: Sie mussten das ganze Testen und ausprobieren, das haben sie aber leider aus Zeitgründen nicht geschafft, denn sie sind dann essen gegangen. Sie konnten sich noch vorstellen, dass man unter Umständen irgendwas verschachteln muss, und sie wussten auch, dass man sowas unter http://de.selfhtml.org/css/ nachschauen kann, aber leider wurden sie nie mehr gesehen. Wichtig war ihnen aber der Kampf gegen JavaScript, und das ist ihnen auch gelungen...

Ok, das wars, sorry, da muss man noch was dran machen, aber ich hab wirklich keine Zeit mehr. Ist nicht schwer!

Grüße,
Simon

[Kaeru Gaman]

XDD go go go! bluejoke! go go go!

[AND51]

Kommt die Antwort denn noch? Sonst hätt ich schon ne Lösung parat...

[bluejoke]

Man seit ihr schnell! Dabei hab ich so schnell getippt wie noch nie!

[Alves]

Also so ganz hab ich das jetzt noch nciht gecheckt, aber wenn du sagst, dass die Lösung noch kommt, dann glaub ich dir!

PS:

5...4...3...2...1...Go Go Go!

<sehr langsam>"C", Buy Posttext, Buy Lösung, losgehen</sehr langsam>


OT: Ich hab mir das bei Selfhtml mal angeschaut, kann es sein, dass der IE so gut wie gar kein CSS2 interpretiert?

[Alves]

Zu Hover und so hab ich mich auch schon beschäftigt, allerdings mit Links usf. Geht das auch mit Bildern?

[bluejoke]

Soweit ich weiß schon. Allerdings muss man die Bilder u.U. in ein gemeinsames DIV schreiben. ungeprüft und mit wenig Ahnung würde ich einfach behaupten, dass es so geht.

Code: Alles auswählen

<style....
div:hover .secondimage {/*anzeige-eigenschaft*/}
div:hover .firstimage {/*ausblend-eigenschaft (also glaub display:none)*/}
...</style>

[AND51]

onMousover und -out sind Eventhandler und gehören zu JavaScript und nicht zu HTML/CSS!

Wenn du willst, kann ich auch noch mal eine Lösung mittels JS schreiben...

[Tafkadasom2k5]

Jo, da hat AND recht.
Hier könnt ihr ja mal ein wenig drin herum wurschteln.

Wer mal eine AUfgabe falsch, und eine richtig macht, der wird sehen, dass da auch bilder ausgewechselt werden. Viel Spaß beim Durchstöbern des Codes (da lernt man wenigstens etwas ).

Gr33tz
Tafkadasom2k5