Hallo zusammen,
bin gerade im Einstieg von JS.
Nun möchte ich das auf dem Beispiel: http://djbusteck.dj.ohost.de/übungen/JS.html
wenn ich bspw auf das linke Feld mit der Maus gehe, dass 4 Abwehrspieler gezeigt werden UND nach verlassen dieses Feldes diese wieder verschwinden.
Hatte es mit der function hidden() probiert mit visible="hidden" aber iwie funktioniert es nicht.
Wie gesagt bin totaler Neuänfanger und habe vorher nur HTML und CSS gemacht. (und ein bisschen C und Java)
Danke schonmal für jeden Hinweis
Hier nochmal der Code:
bin gerade im Einstieg von JS.
Nun möchte ich das auf dem Beispiel: http://djbusteck.dj.ohost.de/übungen/JS.html
wenn ich bspw auf das linke Feld mit der Maus gehe, dass 4 Abwehrspieler gezeigt werden UND nach verlassen dieses Feldes diese wieder verschwinden.
Hatte es mit der function hidden() probiert mit visible="hidden" aber iwie funktioniert es nicht.
Wie gesagt bin totaler Neuänfanger und habe vorher nur HTML und CSS gemacht. (und ein bisschen C und Java)
Danke schonmal für jeden Hinweis
Hier nochmal der Code:
Code:
<html>
<head>
</head>
<body>
<script type="text/javascript">
var feld_01_start = new Image();
var feld_01_hover = new Image();
var feld_02_start = new Image();
var feld_02_hover = new Image();
var feld_03_start = new Image();
var feld_03_hover = new Image();
var spieler1 = new Image();
var spieler2 = new Image();
var spieler3 = new Image();
var spieler4 = new Image();
var spieler5 = new Image();
var spieler6 = new Image();
var spieler7 = new Image();
var spieler8 = new Image();
var spieler9 = new Image();
var spieler10 = new Image();
var spieler11 = new Image();
feld_01_start.src="images/feld_01_start.jpg";
feld_01_hover.src="images/feld_01_hover.jpg";
feld_02_start.src="images/feld_02_start.jpg";
feld_02_hover.src="images/feld_02_hover.jpg";
feld_03_start.src="images/feld_03_start.jpg";
feld_03_hover.src="images/feld_03_hover.jpg";
spieler1.src="images/nikolov.jpg";
spieler2.src="images/jung.jpg";
spieler3.src="images/djakpa.jpg";
spieler4.src="images/rode.jpg";
spieler5.src="images/kittel.jpg";
spieler6.src="images/koehler.jpg";
spieler7.src="images/meier.jpg";
spieler8.src="images/schwegler.jpg"
spieler9.src="images/matmour.jpg";
spieler10.src="images/hoffer.jpg";
spieler11.src="images/idrissou.jpg";
function wegblend1()
{
document.images.feld1.src=feld_01_hover.src;
document.images.spieler1.src=spieler1.src;
document.images.spieler2.src=spieler2.src;
document.images.spieler3.src=spieler3.src;
document.images.spieler4.src=spieler4.src;
}
function reinblend1()
{
document.images.feld1.src=feld_01_start.src;
}
function wegblend2()
{
document.images.feld2.src=feld_02_hover.src;
document.images.spieler1.src=spieler5.src;
document.images.spieler2.src=spieler6.src;
document.images.spieler3.src=spieler7.src;
document.images.spieler4.src=spieler8.src;
}
function reinblend2()
{
document.images.feld2.src=feld_02_start.src;
}
function wegblend3()
{
document.images.feld3.src=feld_03_hover.src;
document.images.spieler1.src=spieler9.src;
document.images.spieler2.src=spieler10.src;
document.images.spieler3.src=spieler11.src;
}
function reinblend3()
{
document.images.feld3.src=feld_03_start.src;
}
function hidden() {
document.getElementById("spieler1").style.visibility = "hidden";
}
</script>
<img src=images/feld_01_start.jpg onMouseOver="wegblend1()"; onMouseOut="reinblend1()"; name=feld1>
<img src=images/feld_02_start.jpg onMouseOver="wegblend2()"; onMouseOut="reinblend2()"; name=feld2>
<img src=images/feld_03_start.jpg onMouseOver="wegblend3()"; onMouseOut="reinblend3()"; name=feld3>
<br>
<img src='#' onMouseOut="hidden()"; name=spieler1>
<img src='#' name=spieler2>
<img src='#' name=spieler3>
<img src='#' onMouseOut="hidden()"; name=spieler4>
</body>
</html>