nicht angemeldet
Buttons mit Bildern
Ich habe folgendes Problem:
Ich möchte mithilfe von CSS eine Menüleiste erstellen, von der ich jeden einzelnen Button animiere. Ich habe sowohl ein Standart Bild im gif-Format als auch und ein Bild für den Hover-Modus ebenso im gif-Format erstellt.
Bei einem Bild funktioniert der Rollovereffekt auch, nur ich weiß nicht, wie man verschiedene Buttons mit verschiedenen Rolloverbildern macht. In
http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm# steht zwar erklärt ich sollte a:hover durch #button1:hover ersetzen doch dies funktioniert nicht.
Da ich auch (fast) keine Kenntnisse in HTML habe, finde ich keine Lösung zu dem Problem.
Ich hoffe es kann mir jemand helfen...
Danke!
-
Guten Morgen Sebastian,
Bei einem Bild funktioniert der Rollovereffekt auch, nur ich weiß nicht, wie man verschiedene Buttons mit verschiedenen Rolloverbildern macht.
Bei "button1" funktioniert es also. Was hindert dich daran, die anderen Grafiken "button2", "button3" etc zu nennen und das selbe Schema wie bei "button1" durchzuziehen?
In http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm# steht zwar erklärt ich sollte a:hover durch #button1:hover ersetzen doch dies funktioniert nicht.
Wo genau steht das? Ich finde es nicht.
Lies dir mal diesen Abschnitt durch:
http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm#a4 der sollte dir helfen.
Wie du "einen Link" einbaust weißt du? Also so, dass dein Button auf die entsprechende Seite verweist?Ich hoffe es kann mir jemand helfen...
Das hoffe ich auch *g*
Gruß,
Klappi-
Es ist definitiv zu früh am Morgen, sorry.
In http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm# steht zwar erklärt ich sollte a:hover durch #button1:hover ersetzen doch dies funktioniert nicht.
Wo genau steht das? Ich finde es nicht.
Lies dir mal diesen Abschnitt durch:
http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm#a4 der sollte dir helfen.Der Tipp bezieht sich auf _verschiedene_ Effekte, aber so wie ich dich verstanden habe dürfen/sollen die Buttons alle denselben Effekt nutzen. Also button1 wird zu button1on wenn die Maus drüberfährt, richtig?
Ich geh mal basteln...
-
Okay, vergiss was ich geschrieben habe, ich verstehe dein Problem voll und ganz.
Habe ja ein wenig gebastelt und es jetzt so hinbekommen, dass aus derselben Ausgangsgrafik für verschiedene Links verschiedene Bilder beim Hovereffekt angezeigt werden. Allerdings sehen die Buttons dann vor dem Mouseover alle gleich aus.
Hier mal das Gebastelte:
<!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(button1.gif);
width:120px;
height:30px }#button:hover { background-image:url(button1on.gif); }
#button1:hover { background-image:url(button2on.gif); }
#button2:hover { background-image:url(button3on.gif); }</style>
</head>
<body>
<h1>Bild-Button mit CSS</h1>
<p><a href="#" id="button"> </a></p>
<p><a href="#" id="button1"> </a></p>
<p><a href="#" id="button2"> </a></p>
</body>
</html>Eine andere Möglichkeit wäre das hier: http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm#a7
Oder auch das hier:
http://de.selfhtml.org/javascript/beispiele/buttons.htmAber vielleicht kann ja noch jemand anders helfen...?
Würde mich auch interessieren!
Gruß,
Klappi-
Hi Klappi,
Hier mal das Gebastelte:
<!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 type="text/css">ul li {
margin:0; padding:0;
}
ul li a:link, ul li a:visited {
display:block;
background-image:url(button1.gif);
width:120px;
height:30px;
}#button a:hover { background-image:url(button1on.gif); }
#button1 a:hover { background-image:url(button2on.gif); }
#button2 a:hover { background-image:url(button3on.gif); }</style>
</head>
<body>
<h1>Bild-Button mit CSS</h1><ul>
<li><a href="#" id="button"> </a></li>
<li><a href="#" id="button1"> </a></li>
<li><a href="#" id="button2"> </a></li></ul>
</body>
</html>Ungetestet, grad keine Zeit, aber so in dieser Richtung sollte eine Link-Liste aussehen.
Aber vielleicht kann ja noch jemand anders helfen...?
Würde mich auch interessieren!
Interesse befriedigt? *g
Grüße,
Engin
GYRO
-
-
-
