Ansicht:   

#407583 Mit CSS bei hover ein neues Bild laden (web.design)

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:

[image]

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" >&nbsp;</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:

Ansicht:   
Auf unserer Web-Seite werden Cookies eingesetzt, um diverse Funktionalitäten zu gewährleisten. Hier erfährst du alles zum Datenschutz