hallo fly
hier eine mögliche lösung:
//------------------------------
<html>
<head>
<title>JavaScript - 3 Buttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
<!--
// der konstruktor für das menu objekt
function Menu() {
// das verzeichnis in dem die menubilder sind
this.imageDirectory = "images/";
// der indentifikator für "normal" im bild-dateinamen
this.imageNormalSuffix = "_normal";
// der indentifikator für "over" im bild-dateinamen
this.imageOverSuffix = "_over";
// der indentifikator für "selected" im bild-dateinamen. (in diesem beispiel gleich wie "over")
this.imageSelectedSuffix = "_over";
// die dateiendung der bild-dateien
this.imageFileSuffix = ".gif";
// die namen der bilder. im html code MÜSSEN die bilder gleich heissen wie hier angegeben.
// also: <img name="menu1" src="images/menu1_normal.gif"> usw.
this.imageBaseNames = new Array("menu1", "menu2", "menu3", "menu4", "menu5", "menu6", "menu7", "menu8", "menu9");
/*
dieses beispiel geht davon aus dass die dateinamen der bilder wie folgt gewählt sind:
normal: menu1_normal.gif
over: menu1_over.gif
selected: menu1_selected.gif (oder eben gleich wie over falls es kein eigenes bild für selected gibt)
*/
// ein array welcher die selbst erzeugten bild-objekte hält
this.menuImages = new Array();
// referenz zum zuletzt geklickten menu-item
this.currentSelection = null;
// intialisierung des menus.
// hier wird der "menuImages" array abgefüllt, bilder preloaded usw.
this.initialize = function() {
for (var i=0; i<this.imageBaseNames.length; i++) {
// ein objekt welches die verschiedenen bild-objekte hält
var obj = new Object();
obj.normal = new Image();
obj.normal.src = this.imageDirectory + this.imageBaseNames
+ this.imageNormalSuffix + this.imageFileSuffix;
obj.over = new Image();
obj.over.src = this.imageDirectory + this.imageBaseNames + this.imageOverSuffix + this.imageFileSuffix;
obj.selected = new Image();
obj.selected.src = this.imageDirectory + this.imageBaseNames + this.imageSelectedSuffix + this.imageFileSuffix;
// referenz auf das bild im html-baum
obj.element = document.images[this.imageBaseNames];
// hier wird die soeben erzeugte bild-objekt-gruppe in den menuImages array geschrieben
this.menuImages = obj;
}
};
// setzt das n-te menuitem auf "normal" sofern es sich dabei nicht um das selektierte handelt
this.setNormal = function(index) {
if (this.currentSelection != index) {
this.menuImages[index].element.src = this.menuImages[index].normal.src;
}
};
// setzt das n-te menuitem auf "over" sofern es sich dabei nicht um das selektierte handelt
this.setOver = function(index) {
if (this.currentSelection != index) {
this.menuImages[index].element.src = this.menuImages[index].over.src;
}
};
// setzt das n-te menuitem auf "selected" und merkt sich welchen index es hat
this.setSelected = function(index) {
this.resetSelection();
this.currentSelection = index;
this.menuImages[index].element.src = this.menuImages[index].selected.src;
};
// setzt das zuletzt selektierte menuitem zurück auf "normal"
this.resetSelection = function() {
if (this.currentSelection != null) {
this.menuImages[this.currentSelection].element.src = this.menuImages[this.currentSelection].normal.src;
}
};
// initialisierung des menu objektes aufrufen.
this.initialize();
return this;
}
// globale variable in welche nachher das menu instanziert wird
var menu = null;
// onload handler welcher ausgeführt wird wenn die seite komplett geladen ist
onload = function() {
// instanzierung/erzeugung des menus
menu = new Menu();
// optional:
// ein beliebiges menuitem default-mässig auf selected setzen
//menu.setSelected(0);
menu.setSelected(3);
};
// -->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#0000FF" alink="#0000FF" topmargin="10" leftmargin="10">
<table width="100" height="75%" border="0">
<tr height="120"><td height="120"> </td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(0)" onmouseout="menu.setNormal(0)" onclick="menu.setSelected(0);"><img src="images/menu1_normal.gif" name="menu1" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(1)" onmouseout="menu.setNormal(1)" onclick="menu.setSelected(1);"><img src="images/menu2_normal.gif" name="menu2" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(2)" onmouseout="menu.setNormal(2)" onclick="menu.setSelected(2);"><img src="images/menu3_normal.gif" name="menu3" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(3)" onmouseout="menu.setNormal(3)" onclick="menu.setSelected(3);"><img src="images/menu4_normal.gif" name="menu4" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(4)" onmouseout="menu.setNormal(4)" onclick="menu.setSelected(4);"><img src="images/menu5_normal.gif" name="menu5" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(5)" onmouseout="menu.setNormal(5)" onclick="menu.setSelected(5);"><img src="images/menu6_normal.gif" name="menu6" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(6)" onmouseout="menu.setNormal(6)" onclick="menu.setSelected(6);"><img src="images/menu7_normal.gif" name="menu7" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(7)" onmouseout="menu.setNormal(7)" onclick="menu.setSelected(7);"><img src="images/menu8_normal.gif" name="menu8" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td><a href="#" onmouseover="menu.setOver(8)" onmouseout="menu.setNormal(8)" onclick="menu.setSelected(8);"><img src="images/menu9_normal.gif" name="menu9" width=105 height=25 alt="" border="0"></a></td></tr>
<tr><td> </td></tr>
</table>
</body>
</html>
//------------------------------
getestet unter windows 2000 mit:
- Mozilla 1.2.1
- Netscape 7.0
- Netscape 4.75
- IE 6
- Opera 7.02
kannst ja mal schauen ob du damit klar kommst. sonst einfach nachfragen.
hope this helps
liabs grüassli us züri
Steven