verfaßt von Johann, 19.01.2017, 18:00:59
(editiert von Johann, 19.01.2017, 18:02:13)
Du musst dafür die Einzelbilder in ein einziges bild packen und mit dem x/y Offset (die beiden 0 0 nach der url im CSS) im background bei CSS arbeiten.
Beispiel:
der Button ist 100px Breits und 50px hoch. Dann baust Du nicht zwei Bilder a 100x50 sondern eins mit 100x100, wo beide Darstellungen z.B. übereinander sind:
Im CSS sind für beide Klassen nun die gleiche Grafik angegeben, aber in der hover-Klasse steht nach dem Background ein y-Offset von -50px, welcher dafür sorgt, dass man anstatt der oberen Hälfte des Sprite die untere sieht. Da die gesamte Grafik bereits geladen ist flackert da dann auch nichts mehr.
<html>
<head>
<title>Hover-Test</title>
<meta charset="UTF-8">
<style>
.image_link {
width: 100px;
height: 50px;
display:inline-block;
background: url('http://devel.sixbytes.de/testsprite.png') 0 0 no-repeat transparent;
text-decoration:none;
}
.image_link:hover {
background: url('http://devel.sixbytes.de/testsprite.png') 0 -50px no-repeat transparent;
}
</style>
</head>
<body>
<a href=" http://www.netz-treff.de/forum" class="image_link" > </a>
</body>
</html>
Man kann so ein Sprite auch sehr groß und mit vielen verschiedenen Grafiken für ein Projekt bauen, z.B. alle Image-Butons mit all ihren hover-Grafiken in einem großen Sprite und dann entsprechend dem x/y Offset und entsprechender Pixelgröße einblenden. Wichtig: Immer an das "px" denken.
gesamter Thread: