nicht angemeldet
Menu mit Mouseover-Buttons
Hi!
Ich bin gerade dabei meine Website umzubasteln und habe da ein kleines Problem. Ich habe 2 Grafiken, die ich als Menubuttons einsetzen möchte. Wenn man mit der Maus drüber fährt dann ändert sich die Grafik und es sieht so aus als würde eine LED auf dem Button aufleuchten.
Ich habe das ganze mal zusammengebastelt und wenn ich einen einzelnen Button einbaue dann klappt es einwandfrei. Setze ich allerdings 2 oder mehr Buttons untereinander dann bekomme ich keine Grafiken angezeigt.
Was mache ich falsch?
THX in advance
Cougi
Anbei der HTML-Code.
************************
<body ....
<script language="Javascript">
image1 = new Image();
image1.src ="images/Menu/b1.gif";
image2 = new Image();
image2.src ="images/Menu/b2.gif";
function change(anaus, name)
{
if (anaus==1)
this.document[name].src=image1.src;
else
this.document[name].src=image2.src;
}
</script>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%" background="images/left_bg_tiled.gif">
<tr>
<td align="left" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" background="images/left_bg_table.gif">
<tr>
<td align="left" valign="top" height="10%" background="images/logoBg.jpg"><img src="images/logofinal.gif" with="200" hight="160" width="185" height="160"></td>
</tr>
<tr>
<td><a href="http://" target="dummy" onMouseOver="change(1,'bild1')" onMouseOut="change(0,'bild1')"><img src="r2.gif" width="159" height="28" name="bild1" border=0></a></td>
</tr>
<tr>
<td><a href="http://" target="dummy" onMouseOver="change(1,'bild1')" onMouseOut="change(0,'bild1')"><img src="r2.gif" width="159" height="28" name="bild1" border=0></a></td>
</tr>
<tr>
...
usw...
************************
-
Nochmal ich!
Sorry, aber habe gerade die Pfade etwas verändert, jetzt werden die Buttons angezeigt. Allerdings NUR das Bild1. wenn ich mit der Maus über das Bild fahre verändert sich der Button nicht.
-
Hallo,
das Attribut "name" (bzw. "id") muß dokumentweit eindeutig sein.
Wenn Du beim zweiten Bild immer bild1 durch bild2 ersetzt, dann klappt´s.Schönen Gruß vom Kellerkind
-
Hallo,
das Attribut "name" (bzw. "id") muß dokumentweit eindeutig sein.
Eine ID _muss_ eindeutig sein, ein Name _kann_ bei Elementen, die dieses Attribut haben, auch mehrfach vergeben werden. Dann kann man mittels document.getElementsByName("derName") zugegriffen werden.
Beispiel (gibt den Inhalt des jeweiligen src-Attributes aus, alle Bilder haben name="bild"):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 06/02</title>
</head>
<body onload="var d=document.getElementsByName('bild');for(i=0;i<d.length;i++)alert(d[i].getAttribute('src'))">
<img src="a.gif" alt="Bild_a" name="bild">
<img src="b.gif" alt="Bild_b" name="bild">
<img src="c.gif" alt="Bild_c" name="bild">
<img src="d.gif" alt="Bild_d" name="bild">
<img src="e.gif" alt="Bild_e" name="bild">
</body>
</html>MfG, Thomas
-