#407394 Johann14.01.2017, 19:55:51 (editiert von Johann, 14.01.2017, 20:00:53) @ Mike_R |
Mit CSS bei hover ein neues Bild laden (ed) |
Dafür nutzt man Pseudo-Klassen wie hover oder focus. .image_link {
display: inline-block;
width: 120px;
height: 60px;
background: url('irgend/was.png') 0 0 no-repeat transparent;
}
.image_link:hover,focus {
background: url('irgend/was.anderes.png') 0 0 no-repeat transparent;
}
<a href="#" class="image_link"></a>
|
#407400 Mike_RRosenheim, 15.01.2017, 10:27:20 @ Johann |
Mit CSS bei hover ein neues Bild laden |
Hallo, Johann, |
#407405 Johann15.01.2017, 13:33:47 @ Mike_R |
Mit CSS bei hover ein neues Bild laden |
> trotzdem tut sich, wenn man dann das |
#407410 Mike_RRosenheim, 15.01.2017, 19:19:47 @ Johann |
Mit CSS bei hover ein neues Bild laden |
Hallo Johann, |
#407413 Johann15.01.2017, 19:41:04 (editiert von Johann, 15.01.2017, 19:53:37) @ Mike_R |
Mit CSS bei hover ein neues Bild laden (ed) |
Es fehlt die .image_link Klasse im CSS und im HTML hatte ich im a-Tag kein img. Da darf kein Bild rein, sonst liegt das über dem per CSS gestylten a-tag. Willst Du zwingend erforderlich mit img-tags arbeiten, dann schrieb ich: Geht nur mit Javascript oder ganz anders, indem Du dem img-tag in der hover-Klasse ein display:none; setzt. Den a-tag in der richtigen Größe musst Du trotzdem anlegen. |
#407439 Mike_RRosenheim, 16.01.2017, 13:41:19 @ Johann |
Mit CSS bei hover ein neues Bild laden |
Danke für die nunmehr 3. Unterstützung. Du schreibst |
#407440 Johann16.01.2017, 14:25:02 @ Mike_R |
Mit CSS bei hover ein neues Bild laden |
> Danke für die nunmehr 3. Unterstützung. Du schreibst <html>
<head>
<title>Hover-Test</title>
<meta charset="UTF-8">
<style>
.art {
font-size: 30pt;
color: purple;
}
.art:hover {
color: orange;
}
.image_link {
/* An H.'s logo angepasst */
width: 125px;
height: 62px;
display:inline-block;
background: url('http://astro.sixbytes.de/sixbytes_logo.png') 0 0 no-repeat transparent;
}
.image_link:hover, focus {
background: url('http://www.th-hermann.de/Bilder/signatur.jpg') 0 0 no-repeat transparent;
}
</style>
</head>
<body>
<a href=" http://www.netz-treff.de/forum" class="image_link" > </a>
<p class="art">
Text
</p>
</body>
</html>
|
#407446 Johann16.01.2017, 16:44:00 (editiert von Johann, 16.01.2017, 16:48:11) @ Johann |
Mit CSS bei hover ein neues Bild laden (ed) |
...und wie gesagt, schon wieder vergessen, mach in die Klasse .image_link, mindestens jedoch in der Pseudoklasse .image_link:hover,focus noch folgendes: |
#407452 MudGuardMünchen, 16.01.2017, 17:05:37 @ Johann |
Mit CSS bei hover ein neues Bild laden |
> .image_link:hover,focus { |
#407454 Johann16.01.2017, 17:36:07 @ MudGuard |
Mit CSS bei hover ein neues Bild laden |
Ja, stimmt oder focus ganz weg lassen. |
#407485 MudGuardMünchen, 16.01.2017, 20:45:08 @ Johann |
Mit CSS bei hover ein neues Bild laden |
> Ja, stimmt oder focus ganz weg lassen. |
#407546 Mike_RRosenheim, 18.01.2017, 21:03:07 @ MudGuard |
Mit CSS bei hover ein neues Bild laden |
Hallo, |
#407583 Johann19.01.2017, 18:00:59 (editiert von Johann, 19.01.2017, 18:02:13) @ Mike_R |
Mit CSS bei hover ein neues Bild laden (ed) |
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. <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>
|