Rollover mit mehreren Images
- Anfangs ist ein Button blau und alle Buttons sind grau.
- Fährt die Maus über den Button, wird er grün.
- Der angeklickte Button wird blau markiert.
Text 1
Text 2
Text 3
<![CDATA[
<SCRIPT LANGUAGE = "JavaScript">
// Bilder vorladen
if (document.images)
{
gruenImage = new Image()
gruenImage.src = "grcube.gif"
grauImage = new Image()
grauImage.src = "wecube.gif"
blauImage = new Image()
blauImage.src = "blcube.gif"
}
// Statustext anzeigen, Button gruen
function statusein(Bild,text)
{
window.status = text;
if (document.images)
{
if (Bild.src == grauImage.src)
Bild.src = gruenImage.src;
}
}
// Statustext aus, Button grau
function statusaus(Bild)
{
window.status="";
if (document.images)
{
if (Bild.src == gruenImage.src)
Bild.src = grauImage.src;
}
}
// aktuellen Link kennzeichnen
// dazu alle Buttons grau, dann
// Button gewaehlter Link blau
function gewaehlt(Bild)
{
if (document.images)
{
for (i=0; i<document.images.length; i++)
document.images[i].src = grauImage.src;
Bild.src = blauImage.src;
}
}
</SCRIPT>
</HEAD>
<BODY onload="gewaehlt(document.Bild1)">
...
<A HREF="#" TARGET="Rumpf"
onmouseover = "statusein(document.Bild1,'Seite 1'); return true"
onmouseout="statusaus(document.Bild1)"
onclick="gewaehlt(document.Bild1)">
<IMG SRC="wecube.gif" NAME="Bild1" BORDER=0> Text 1</A>
<P>
<A HREF="#" TARGET="Rumpf"
onmouseover = "statusein(document.Bild2,'Seite 2'); return true"
onmouseout="statusaus(document.Bild2)"
onclick="gewaehlt(document.Bild2)">
<IMG SRC="wecube.gif" NAME="Bild2" BORDER=0> Text 2</A>
<P>
<A HREF="#" TARGET="Rumpf"
onmouseover = "statusein(document.Bild3,'Seite 3'); return true"
onmouseout="statusaus(document.Bild3)"
onclick="gewaehlt(document.Bild3)">
<IMG SRC="wecube.gif" NAME="Bild3" BORDER=0> Text 3</A>
<P>
]]>