nicht angemeldet
Hallo,
»» Kann man mit CSS das Bild des Buttons ersetzen, wenn er mit dem Cursor überfahren wird?
Ja, sicher. Du könntest *zwei* Bilder einsetzen, einem von beiden eine Klasse geben und die Anzeige per CSS umschalten.
HTML:
<button type="submit"><img src="image1.jpg" alt=""><img src="image2.jpg" alt="" class="hover"></button>CSS:
button img.hover { display: none; }
button:hover img { display: none; }
Ich fürchte, ich bringe jetzt die einzelnen Möglichkeiten durcheiander?
Mein Coding sieht jetzt so aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Klick-Buttons definieren (Bild) - input, type, button, img</title>
<style type="text/CSS">
button img.hover { display: none; }
button:hover img { display: none; }
</style>
</head>
<body>
<h1>Verweise einmal anders</h1>
<form action="">
<div>
<button name="Klickmich" type="submit"
value="Verzeigen" onclick="window.location.href='http://www.example.test'">
<p>
<img src="image1.jpg" alt=""><img src="image2.jpg" alt="" class="button">
<br>
</p>
</button>
</div>
</form>
</body>
</html>
Jetzt ergibt sich folgendes:
1. Beide Bilder werden nebeneinander angezeigt
2. Um die Bilder ist ein grauer Rahmen (Button-Aussehen)
3. Bewege ich die Maus auf den Rahmen, so vershhwinden die Bilder und es bleibt der stark verschmälerte Rahmen
4. Bewege ich den Curso über die Bilder, so flackert das Ganze
Gruß
Staffi
Gernot Back
MudGuard
Der Martin