| The Serious Sam |
08.05.2007 17:52:24 |
Links per <div>-Tag gestallten
Ich hatte die Idee meine Links per <DIV> zu gestallten. Bis jetzt klappt alles
super bis auf eine Kleinigkeit, die ich nicht hinbekomme!
ich möchte, dass meine links mit hintergrundbilder (buttons) herausgehoben werden.
Also ein button für den normalen link und ein Button für der Links, wenn er anvisiert ist
Ich habe das so imgesetzt:
HTML-Code:
<html>
<head>
<style type="text/css">
img { border-style:none; }
a:link { text-decoration:none; color:#000000; }
a:visited { text-decoration:none; color:#000000; }
a:hover { text-decoration:none; }
a:active { text-decoration:none; }
a:focus { text-decoration:none; }
.normal_t {
text-align: center;
background-image:url(image/buttons/Top-Button_normal.jpg);
background-repeat: no-repeat;
width:250px;
height:21px;
}
.active_t {
text-align: center;
background-image:url(image/buttons/Top-Button_ausgewahlt.jpg);
background-repeat: no-repeat;
width:250px;
height:21px;
}
.normal_m {
text-align: center;
background-image:url(image/buttons/Button_normal.jpg);
background-repeat: no-repeat;
width:250px;
height:21px;
}
.active_m {
text-align: center;
background-image:url(image/buttons/Button_ausgewahlt.jpg);
background-repeat: no-repeat;
width: 250px;
height:21px;
}
.normal_b {
text-align: center;
background-image:url(image/buttons/Bottom-Button_normal.jpg);
background-repeat: no-repeat;
width: 250px;
height:21px;
}
.active_b {
text-align: center;
background-image:url(image/buttons/Bottom-Button_ausgewahlt.jpg);
background-repeat: no-repeat;
width: 250px;
height:21px;
}
#links {
height:126px;
width:250px;
}
</style>
</head>
<body>
<div id=links>
<a href=""><div class="normal_t" onmouseover="this.className='active_t';" onmouseout="this.className='normal_t';">hallo</div></a>
<a href=""><div class="normal_m" onmouseover="this.className='active_m';" onmouseout="this.className='normal_m';">xD</div></a>
<a href=""><div class="normal_m" onmouseover="this.className='active_m';" onmouseout="this.className='normal_m';">Es</div></a>
<a href=""><div class="normal_m" onmouseover="this.className='active_m';" onmouseout="this.className='normal_m';">funk</div></a>
<a href=""><div class="normal_m" onmouseover="this.className='active_m';" onmouseout="this.className='normal_m';">tion</div></a>
<a href=""><div class="normal_b" onmouseover="this.className='active_b';" onmouseout="this.className='normal_b';">iert</div></a>
<p>
</body>
</html>
Ich möchte jetzt jedoch zusätzlich noch eine dritte Buttonfarbe einbauen, wenn man den Link anklick.
Bisher sind es ja nur zwei.
Es wäre net wenn mir jemand sagen könnte wie ich meinen <DIV>-Tag geringfügig abändern müsste, um das zu erreichen. |