|
|
Dynamischer Bildwechsel mit CSS
Sich dynamisch ändernde "Buttons" sind wohl das letzte Bling-Bling-Element, dass sich aus der Zeit der animierten GIF-Grafiken ins Jetzt herüber gerettet hat. Abgesehen vielleicht von ablenkenden Werbebannern.
Hier soll diese Möglichkeit per CSS erledigt werden.
Entwickelt:
Code:
HTML, CSS
Entwicklung:
Das CSS entstand in einem Gedankenblitz schlicht um die Möglichkeiten zu testen.
Status:
aktuell
Erklärung:
Eine transparente Grafik wird per CSS mit einem Hintergrundbild belegt, dass sich beim "Überfahren" des Links oder Verweises ändert.
Die transparente Grafik muss dazu innerhalb des a-Tags referenziert sein. Um verschiedene Garfiken auf unterschiedliche Menüpunkte anzuwenden, muss ein id-Attribut verwendet werden.
Der Quellcode:
und so siehts aus...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<meta name="robots" content="index,follow">
<meta name="author" content="Jörg Ahrens">
<meta name="publisher" content="Jörg Ahrens">
<meta name="copyright" content="Jörg Ahrens">
<meta name="date" content="2010-09-04T10:00:00+02:00">
<title>[Gueldensterns Bildwechsel per CSS]</title>
<style type="text/css">
/*************************************
Script von Jörg Ahrens
www.gueldenstern-webdesign.de
Fragen an:
info@gueldenstern-webdesign.de
*************************************/
a img#change {
background:url('BW/btb.png');
}
a:hover img#change {
background:url('BW/btb_hov.png');
}
</style>
</head>
<body>
<a href="">
<img id="change" src="BW/trans.gif"
width="100px" height="10px">
Bild links</a><br>
</body>
</html>
|
MAIL