Ansicht:   

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

verfaßt von Mike_R zur Homepage von Mike_R, Rosenheim, 15.01.2017, 19:19:47

Hallo Johann,

nochmals danke für die weitere Antwort. Ich hoffe, ich strapaziere Deine Geduld nicht zu sehr, wenn ich nun auf Deinen Vorschlag eingehe. Anbei somit ein Beispiel (das sich auf das Wesentliche beschränkt) mit einer der Einfachheit halber in die html-Datei eingebundenen CSS. Aus demselben Grund einfach als img Dein sowie 'Hackertromm's' logo.
Die Klasse 'art' ist nur zu Testzwecken eingefügt, um zu demonstrieren, dass hier 'hover' funktioniert. Man kann auch erkennen, dass bei 'hover' über Deinem logo sich beim 'logo-link' etwas tut. Das einzuwechselnde logo von H. erscheint ein bisschen mit dem unteren Rand. Vielleicht stimmt ja nun mit dem Code etwas nicht, andernfalls fehlt somit eigentlich nur noch der Trick, wie man das 1. logo durch das 2. gänzlich austauschen kann.

<html>
<head>
<title>Hover-Test</title>
<meta charset="UTF-8">
<style>
.art {
font-size: 30pt;
color: purple;
}
.art:hover {
color: orange;
}
img {
/* An H.'s logo angepasst */
width: 125px;
height: 62px;
}
.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" >
<img src="http://astro.sixbytes.de/sixbytes_logo.png"> </a>
<p class="art">
Text
</p>
</body>
</html>

 

gesamter Thread:

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