<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>mehrfach togglebar</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onLoad="MM_preloadImages('toogle_bar2_r.jpg','toggle1_2_r.jpg','toggle2_2_r.jpg','toggle3_2_r.jpg')">
<div id="wrapper">
<ul class="menu">
<table width="660" height="30" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"><img src="toggle1.jpg" width="25" height="30" alt="toggle1"></td>
<td width="25"><img src="toggle2.jpg" width="25" height="30" alt="toggle2"></td>
<td width="610" class="toggle3">
Newsbox mit Togglefunktion...
</td>
</tr>
</table>
<ul>
<table width="660" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="news_text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
</td>
</tr>
</table>
</ul>
<li id="two">
<table width="660" height="30" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"><img src="toggle1_1.jpg" width="25" height="30" alt="toggle3"></td>
<td width="25" height="30"><a href="#two" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','toggle1_2_r.jpg',1)"><img src="toggle1_2.jpg" alt="toggle4" name="two" id="two" width="25" height="30" border="0"></a></td>
<td width="610" class="toggle_1_3">25.06.2012 Lorem Ipsum dolor...
</td>
</tr>
</table>
<ul>
<table width="660" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="news_text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum doloo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justrem ipsum dolor sit amet.
</td>
</tr>
</table>
</ul>
</li>
<li id="three">
<table width="660" height="30" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"><img src="toggle2_1.jpg" width="25" height="30" alt="toggle5"></td>
<td width="25"><a href="#three" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','toggle2_2_r.jpg',1)"><img src="toggle2_2.jpg" alt="toggle6" name="Image12" width="25" height="30" border="0"></a></td>
<td width="610" class="toggle_2_3">22.06.2012 Ipsum dolor Lorem</td>
</tr>
</table>
<ul>
<table width="660" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="news_text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolo sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</ul>
</li>
<li id="four">
<table width="660" height="30" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"><img src="toggle2_1.jpg" width="25" height="30" alt="toggle7"></td>
<td width="25"><a href="#four" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','toggle2_2_r.jpg',1)"><span><img src="toggle2_2.jpg" alt="toggle8" name="Image13" width="25" height="30" border="0"></span></a></td>
<td width="610" class="toggle_2_3">
20.06.2012 Ipsum dolor Lorem
</td>
</tr>
</table>
<ul>
<table width="660" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="news_text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolo sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</ul>
</li>
<li id="five">
<table width="660" height="30" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"><img src="toggle3_1.jpg" width="25" height="30" alt="toggle13" border="0"></td>
<td width="25"><a href="#five" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','toggle3_2_r.jpg',1)"><img src="toggle3_2.jpg" alt="toggle14" name="Image10" width="25" height="30" border="0"></a></td>
<td width="610" class="toggle_3_3">
17.06.2012 Ipsum dolor Lorem
</td>
</tr>
</table>
<ul>
<table width="660" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="news_text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</td>
</tr>
</table>
</ul>
</li>
</ul>
</div>
</body>
</html> |