Hallo liebe Webdesigner-Gemeinde,
ich habe mal wieder ein kleines Problem mit JavaScript (hatt ich auch schon länger nicht mehr):
Also ich hab zunächst mal ein Bild:
<img src="img/standard.png" width="120" height="120" title="Standardbild" alt="Standardbild" id="menuimg" />
Und außerdem noch ein paar Links, die alle ungefähr wie folgt aussehen:
<a href="?section=1"><div id="link" onmouseover="change_img(?section=1, 1);" onmouseout="standard_img(1);"> <span class="link">Startseite</span><span class="arrow" id="arrow1">> </span></div></a>
So. Ich möchte folgendes erreichen: Wenn ich mit der Maus über diesen Link fahre, soll erstens ein anderes Bild angezeigt werden und zweitens soll der Pfeil (das Unicode-Gebilde mit der id 'Arrow') eine andere Klasse zugewiesen bekommen. Dazu habe ich folgende JavaScript-Funktionen geschrieben:
function standard_img(Nummer) {
var arrow = 'arrow' + Nummer;
document.getElementById(arrow).className = 'arrow';
document.getElementById('menuimg').src = "img/standard.png";
document.getElementById('menuimg').title = "Standardbild";
document.getElementById('menuimg').alt = "Standardbild";
}
function change_img(Bildname, Nummer) {
var arrow = 'arrow' + Nummer;
document.getElementById(arrow).className = 'arrow_hover';
switch (Bildname) {
case '?section=1':
alert("bla");
document.getElementById('menuimg').src = "img/home.png";
document.getElementById('menuimg').title = "Startseite";
document.getElementById('menuimg').alt = "Haus";
break;
case "?section=2":
document.getElementById('menuimg').src = "img/about.png";
document.getElementById('menuimg').title = "Über mich";
document.getElementById('menuimg').alt = "Glühbirne";
break;
case "?section=3":
document.getElementById('menuimg').src = "img/galerie.png";
document.getElementById('menuimg').title = "Galerie";
document.getElementById('menuimg').alt = "Fotokamera";
break;
case "?section=4":
document.getElementById('menuimg').src = "img/gb.png";
document.getElementById('menuimg').title = "Gästebuch";
document.getElementById('menuimg').alt = "Notizblock";
break;
case "?section=5":
document.getElementById('menuimg').src = "img/links.png";
document.getElementById('menuimg').title = "Links";
document.getElementById('menuimg').alt = "Globus";
break;
case "?section=6":
document.getElementById('menuimg').src = "img/impressum.png";
document.getElementById('menuimg').title = "Impressum";
document.getElementById('menuimg').alt = "Bauhelm";
break;
case "?section=7":
document.getElementById('menuimg').src = "img/mail.png";
document.getElementById('menuimg').title = "Kontakt";
document.getElementById('menuimg').alt = "Briefumschlag";
break;
default:
alert("Fehler");
break;
}
}
Problem: Leider klappt das gar nicht. Ansehen kann man das ganze auf der angegebenen Seite.
Ich hoffe auf Eure Hilfe und bedanke mich schon mal im Voraus.
Gruß
DHK