[CSS] a:hover

Gartenzwerg

hi,
ich möchte eine png-Datei als Links nutzen. Doch wenn man mit der Maus über diese png-Datei fährt, soll eine andere angezeigt werden.

Bei normalen Text würde ich im CSS-Definitionsabschnitt folgendes eingeben:

a:link  {color:blue;}
a:hover  {color:red;}

um eine blau geschriebenen Link zu erhalten, dessen Schrift sich rot färbt, wenn man mit der Maus drübergeht.

Wie kann ich so einen Wechsel mit Bilddateien verwirklichen?

Tschau Gartenzwerg

MORL

Na du kannst doch ein <div> nehmen und die Eigenschaft background-image setzten. Die kannst du dann wie gewohnt mit deinem a:hover setzen und verändern.
Keine Ahnung obs dir hilft aber so hätt ich das glaub ich gemacht.

Gartenzwerg

hi,
ich verstehe nicht so ganz, wie ich die Eigenschaften eines <div>-Abschnittes mit a:hover ändern soll, kannst du vielleicht mal ein Bsp. posten?

Tschau Gartenzwerg

flenders

div:hover bzw. #iddeinesdivs:hover - allerdings können das noch nicht alle gängigen Broswer (der IE kann es afaik z.B. nicht)
Noch ein interessanter Artikel: http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html

Gartenzwerg

hi,
danke im Mozilla funzt es einwandfrei. Doch der IE reagiert, wie du schon sagtest überhaupt nicht darauf.
Werde mir den Artikel jetzt erstmal zu Gemüte führen. Sonst muss ich mein Design umgestalten, denn ich wollte eigentlich auf JavaScript verzichten.

Tschau Gartenzwerg

flenders

Besser gesagt, schau dir direkt von http://www.meyerweb.com/eric/css/edge/ die Beispiele an

flyingCoder

Naja, wieso auf JavaScript verzichten?

<img name="bild1" src="bild1.png" onmouseover="document.bild1.src='bild2.png';"
onmouseout="document.bild1.src='bild1.png';">

So macht man das ...

MfG, the flyingCoder.

flenders

Weil nicht jeder JavaScript aktiviert hat :p
Und wozu JavaScript, wenn es auch die Möglichkeit gibt, sowas mit CSS zu machen

evilissimo

HTML/CSS ist zwar nicht mein Spezialgebiet aber
du könntest das auch einfach so machen:

<sytyle type="text/css">
<!--
.mylink{width:100px; height:10px;}
a.mylink:hover{background-image:url(http://www.irgendwo.de/images/link_hover.gif); color:blue;}
a.mylink:link{background-images:url(http://www.irgendwo.de/images/link.gif); color:red;}
-->
</style>
.
.
.

<table class="mylink">
  <tr>
    <td>
       <a class="mylink" href="http://www.google.de"></a>
    </td>
  </tr>
</table>

Du kannst entweder die
Aber wie und warum IE das nicht mit macht vertehe ich auch nicht!

cya eViLiSSiMo