Verlinkte Grafik mit Hover-Effekt [IE|M|O|G]

von: Werner Zenk

Mit CSS können Sie ein Bild eine andere Hintergrundfarbe geben.
Fährt man mit dem Mauszeiger über das Bild, so ändert sich die
Hintergrundfarbe von Schwarz in Gelb.

Demo:

Es wird nur ein transparentes GIF-Bild benötigt!
In diesem Bild ist das innere der Glühbirne transparent.

Quelltext:

<style type="text/css">
a.image img {
 background-color: #000000;
}
a.image:hover img {
 background-color: #FFFF00;
}
</style>

</head>
<body>

<a href="#" class="image">
<img src="bild.gif" width="200" height="132" border="0">
</a>

Ein Weiteres Demo:

... und noch eines:

Quelltext:

<style type="text/css">
a.image img {
 background-color: #FFFFFF;
}
a.image:hover img {
 background-color: #FF0000;
 background-image: url(blink1.gif); /* » Blinkender Hintergrund */
}
</style>

</head>
<body>

<a href="#" class="image">
<img src="bild.gif" width="200" height="132" border="0">
</a>

... eins habe ich noch:

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

snaidfish: zur info:einige css befehle funzen nicht in allen browsern Didi: Sieht gut aus, kann man sicher gebrauchen, wenn man überraschende Effekte mag. sanmarco: das script ist schrott, sorry, aber das bild was erst erscheinen soll ist dann bereits schon da Robert: das script passt genau !man muss nur die >grösse anpassen: Also kein schrott LukeLER: super, auf so eine coole Idee muss man erstmal kommen auf meiner Website (die sich in Arbeit befindet) läuft alles mit Firefox 5
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

CSS Hyperlink #24

Textgestaltung mit CSS - Mit CSS ist ein Text schnell formatiert (Farbe, Scriftart, Schriftgröße, Rahmen, Hintergrundfarbe, ...).

CSS Hyperlink #15

Buchstaben mit Abstand

Umrechnungstabelle für CSS-Schriftgrößen

Texteingabe nur in Großbuchstaben zulassen

CSS Befehle: Klassifizierung

CSS Hyperlink #12 …mehr