<html>
<head>
<title>Rollover mit mehreren Bildern</title>
<script language="javascript" type="text/javascript">
function swapPictures(id, status)
{
var rollover = new Array();
rollover[0] = new Array();
rollover[0].standartURL = "rot.gif";
rollover[0].rolloverURL = "gelb.gif";
rollover[0].pictureID = "p1";
rollover[0].chgID = new Array();
rollover[0].chgID[0] = 2;
rollover[1] = new Array();
rollover[1].standartURL = "blau.gif";
rollover[1].rolloverURL = "gruen.gif";
rollover[1].pictureID = "p2";
rollover[1].chgID = new Array();
rollover[1].chgID[0] = 1;
rollover[2] = new Array();
rollover[2].standartURL = "gelb.gif";
rollover[2].rolloverURL = "blau.gif";
rollover[2].pictureID = "p3";
rollover[2].chgID = new Array();
rollover[2].chgID[0] = 1;
rollover[3] = new Array();
rollover[3].standartURL = "gruen.gif";
rollover[3].rolloverURL = "rot.gif";
rollover[3].pictureID = "p4";
rollover[3].chgID = new Array();
rollover[3].chgID[0] = 2;
rollover[3].chgID[1] = 1;
rollover[4] = new Array();
rollover[4].standartURL = "trigger.gif";
rollover[4].rolloverURL = "trigger_over.gif";
rollover[4].pictureID = "p5";
rollover[4].chgID = new Array();
rollover[4].chgID[0] = 1;
rollover[5] = new Array();
rollover[5].standartURL = "trigger.gif";
rollover[5].rolloverURL = "trigger_over.gif";
rollover[5].pictureID = "p6";
rollover[5].chgID = new Array();
rollover[5].chgID[0] = 2;
for (var pictureIndex in rollover)
{
for(var idIndex in rollover[pictureIndex].chgID)
{
doRollover = (rollover[pictureIndex].chgID[idIndex] == id)
if(doRollover)
{
break;
}
}
if(doRollover&&status=="over")
{
var picIndex = rollover[pictureIndex].pictureID;
document.images[picIndex].src = rollover[pictureIndex].rolloverURL;
}
else if(doRollover&&status=="out")
{
var picIndex = rollover[pictureIndex].pictureID;
document.images[picIndex].src = rollover[pictureIndex].standartURL;
}
doRollover = false;
}
}
</script>
</head>
<body>
<table>
<tr>
<td><img id="p1" src="rot.gif"></img></td>
<td><img id="p2" src="blau.gif"></img></td>
<td><img id="p3" src="gelb.gif"></img></td>
<td><img id="p4" src="gruen.gif"></img></td>
</tr>
<tr>
<td colspan="2">
<p>Swap 1:<img id="p5" src="trigger.gif" onMouseOver="swapPictures(1, 'over')" onMouseOut="swapPictures(1, 'out')"></p>
</td>
<td colspan="2">
<p>Swap 2:<img id="p6" src="trigger.gif" onMouseOver="swapPictures(2, 'over')" onMouseOut="swapPictures(2, 'out')"></p>
</td>
</tr>
</table>
</body>
</html>
so gehts! :-)