Mini-Tutorial für Hover Bilder

[GrannySmith]

Ich habe folgendes extrem Mini-Tutorial hier noch nicht gefunden sonst noch wo:
Überall in den FAQs wird immer gefragt: Wie kann ich beim Hover (Wenn die maus über link fährt) das Bild (also Button) verändern?
Hier wird einem immer das Rollover vom Javascript angeboten. Es geht aber auch anders und das mit CSS:
Es ist ganz einfach; nur dort wo ihr mit CSS eure Links designed folgendes hinschreiben:

div-linkbutton a
{ background-image:url(button_link.jpg); width: 100px; height: 20px; }
div.linkbutton a:hover 
{ background-image:url(button_hover.jpg); width: 100px; height: 20px; }
div.linkbutton a:active
{ background-image:url(button_activelink.jpg); width: 100px; height: 20px;  }

Wenn ihr eurem HTML-Tag die class linkbutton hinzufügt, wird dann als linkbild das Bild "button_link.jpg" erscheinen; wenn ihr mit der Maus darüberfahrt, wird das Bild "button_hover.jpg" erscheinen u.s.w.
Hier muss man natürlich dann die richtige Größe des Buttons angeben, was wir mit "width" und "height" gemacht haben.

Und so schaut dann der div-Tag aus

<div class="linkbutton">
<a href="http://www.tutorials.de> </a>
</div>

Wie ihr hier seht, schreibt man hier einfach ein Leerzeichen als Linkwort, da wir ja den Button haben.


Wenn ihr das Tutorial hilfreich fandet, weil ihr z.B. keine Lust habt Javascript zu verwendet, oder es einfach nicht könnt, dann sagts mir doch einfach.
Wenn es so ein ultra-mini-Tutorial schon irgendwo gibt (ich hab derweil keines gesehen) oder ihr es Sch**** findet dann einfach löschen, falls ihr Mods seid.

 

[Fabian H]

Naja, es ist IE only und du hast ein paar (Edit: vier Stueck sind's, wenn ich mich nicht verzaehlt hab) Syntaxfehler drinnen.

Wenn du das gefixt hast, kann man mal drueber reden, ob wir es vielleicht in die FAQs verschieben

 

[GrannySmith]

Oh ich wusste leider nicht, dass dies nur IE ist.
Sehr schade.
Wegen der Syntaxfehler: Ich konnte leider nur die fehlenden Klammern finden mehr nicht.

 

[Fabian H]

div-linkbutton

Da muss ein Punkt hin.

 

[Gumbo]

Wieso sollte dies nur der Internet Explorer interpretieren?

 

[redlama]

Also ich nutze es so:

...
<style type="text/css">
.link { background-image:url(images/b_zurueck.gif); width:130px; height:19px; display:block; }
.link:hover { background-image:url(images/b_zurueck1.gif); }
.link:active { background-image:url(images/b_zurueck1.gif); }
.link:focus { background-image:url(images/b_zurueck1.gif); }
</style>
...
<a href="xyz" target="_blank" class="link">
<img src="images/blank.gif" border="0" alt="blank" /></a>
...

Und das funktioniert nicht nur im IE, sonder auch mit Netscape, Opera, Mozilla und Firefox.

redlama

 

[Fabian H]

.link { background-image:url(images/b_zurueck.gif); width:130px; height:19px; display:block; }

An der display Eigenschaft liegt es.

Der Mozilla interpretiert width und height bei inline Elementen nicht, bei block Elementen schon.


Und Mozilla macht es richtig.
http://www.w3.org/TR/REC-CSS2/visudet.html#the-width-property

 

[redlama]

D. h. so wie ich es mache ist es richtig?

redlama

 

[GrannySmith]

Bei meiner Seite funktioniert es auch. Ich seh das Problem nicht. Beide Browser Stellen es korrekt dar.