[CSS] a:hover
-
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
-
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.
-
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
-
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
-
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
-
Besser gesagt, schau dir direkt von http://www.meyerweb.com/eric/css/edge/ die Beispiele an
-
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.
-
Weil nicht jeder JavaScript aktiviert hat :p
Und wozu JavaScript, wenn es auch die Möglichkeit gibt, sowas mit CSS zu machen
-
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