MouseOver mit 2-seitigen Grafiken

Sascha · 29.05.2009, 08:23

es gibt doch eine möglichkeit aus einem bild zb. eine navigation zu bauen in der ich z.b. oben die inaktivie navigation und darunter gleich die aktive navigation auf einem bild habe. und die sich dann austauscht. weisst du welche art es ist ? über css oder javascript?

***developr*** · 29.05.2009, 08:45

Ich würde nun darauf setzen, die Position des Hintergrundbildes mit background-position zu verschieben und somit nur den erwünschten Teil "sichtbar" zu machen.

HTML-Code:

<html>
<head>
<title>test</title>
<style>
.button {
width: 61px;
height: 20px;
display: block;
background-image: url(button.gif);
background-position: top center;
text-decoration: none;
}
.button:hover {
background-position: bottom center;
}
</style>
</head>
<body>

<a href="#" class="button">&nbsp;</a>

</body>
</html>

29.05.2009, 08:23	#1
Sascha Neuer Benutzer Registriert seit: 01.04.2009 Beiträge: 1	MouseOver mit 2-seitigen Grafiken es gibt doch eine möglichkeit aus einem bild zb. eine navigation zu bauen in der ich z.b. oben die inaktivie navigation und darunter gleich die aktive navigation auf einem bild habe. und die sich dann austauscht. weisst du welche art es ist ? über css oder javascript?

29.05.2009, 08:45	#2
*developr* Administrator Registriert seit: 11.11.2008 Ort: Bremen Beiträge: 260	AW: MouseOver mit 2-seitigen Grafiken Ich würde nun darauf setzen, die Position des Hintergrundbildes mit background-position zu verschieben und somit nur den erwünschten Teil "sichtbar" zu machen. HTML-Code: <html> <head> <title>test</title> <style> .button { width: 61px; height: 20px; display: block; background-image: url(button.gif); background-position: top center; text-decoration: none; } .button:hover { background-position: bottom center; } </style> </head> <body> <a href="#" class="button">* *</a> </body> </html>

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche