So, bitteschön:
HTML-Code:
<html>
<head>
<title>
Slider
</title>
<style type="text/css">
.slidertitle {
padding-top: 8px;
padding-left: 6px;
padding-bottom: 4px;
font-size: small;
line-height: 9pt;
font-weight: bold;
color:#d71f03;
}
.sliderpic {
padding-left: 6px;
padding-right: 6px;
}
.sliderlink {
padding-left: 6px;
font-size: small;
font-weight: bold;
}
.sliderlink a {
padding-left: 3px;
color: #000;
text-decoration: none;
}
.sliderlink a:hover {
text-decoration: underline;
}
td.sliderhover:hover {
background-color: #f1d414;
}
.whiteborder {
border-color:#fff;
outline: 1px solid white;
}
.greybg {
background-color: #ddd;
background-position: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body bgcolor="#d5d5d5">
<script>
$("sliderhover")
.hover(
function () {
$(this).toggleClass("active")
.next().stop(true, true).slideToggle();
}
);
</script>
<table style="margin-top: -10px;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="sliderhover">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="slidertitle">TEXT <br>TEXT</td>
</tr>
<tr>
<td class="sliderpic"><img class="whiteborder" src="images/1_active.gif"></td>
</tr>
<tr>
<td class="sliderlink"><img src="images/arrow.gif"><a href="#1">TEXT</a></td>
</tr>
<tr>
<td height="28px;"> </td>
</tr>
</table>
</td>
<!-- Sliderbild 2 -->
<td class="sliderhover">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="slidertitle">TEXT <br>TEXT</td>
</tr>
<tr>
<td class="sliderpic"><img class="whiteborder" src="images/2_active.gif"></td>
</tr>
<tr>
<td class="sliderlink"><img src="images/arrow.gif"><a href="#1">TEXT</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<!-- Sliderbild 3 -->
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="slidertitle">TEXT <br>TEXT</td>
</tr>
<tr>
<td class="sliderpic"><img class="whiteborder" src="images/3_inactive.gif"></td>
</tr>
<tr>
<td class="sliderlink"><img src="images/arrow.gif"><a href="#1">TEXT</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<!-- Sliderbild 4 -->
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td class="slidertitle">TEXT <br>TEXT</td>
</tr>
<tr>
<td class="sliderpic"><img class="whiteborder" src="images/4_inactive.gif"></td>
</tr>
<tr>
<td class="sliderlink"><img src="images/arrow.gif"><a href="#1">TEXT</a></td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>