nicht angemeldet
Mouse Over mit CSS 3 verschiedene Mouse over Buttons ??
ICh habe mich darin verannt Java S. aus meiner HP zu verpannen, jetzt möchte eine htm Seite die 16 verschiedene mouse Over Buttons hat ( mit wechselbildern button.gif und button.on.gif ) umstellen auf CSS mouse over.
Ich habe es mit class Zuweisung versucht aber nicht hinbekommen.
Vielleicht hat jemand schonmal ein ähnliches Prob gehabt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Rollover mit CSS - Beispiel 5</title>
<style>
a { display:block;
background-image:url(button.gif);
width:120px; height:30px }
a:hover { background-image:url(button_on.gif); }
</style>
</head>
<body>
<h1>Bild-Button mit CSS</h1>
<p><a href="#"> </a></p>
</body>
</html>
-
Hallo,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
Mach den Dokumenttyp vollständig:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
oder
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Rollover mit CSS - Beispiel 5</title>
<style>
a { display:block;
background-image:url(button.gif);
width:120px; height:30px }
a:hover { background-image:url(button_on.gif); }
</style>
</head>
<body>
<h1>Bild-Button mit CSS</h1>
<p><a href="#"> </a></p>
</body>
</html>Das sollte so gehen. Mit welchem Browser geht das nicht?
In jedem Fall solltest Du Inhalte in die A-Elemente schreiben, damit Textbrowser was zum Anzeigen haben. Du kannst sie ja per CSS verstecken. So etwa:
<!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>Rollover mit CSS - Beispiel 5</title>
<style>
a { display:block;
width:120px; height:30px;
text-decoration:none;
}
a span {
visibility:hidden;
}
a:link, a:visited, a:active, a:focus {
background-image:url(bullet3.gif);
color:blue;
}
a:hover {
background-image:url(stones.jpg);
color:red;
}
</style>
</head>
<body>
<h1>Bild-Button mit CSS</h1>
<p><a href="#"><span>Linktext</span></a></p>
</body>
</html>viele Grüße
Axel