✔ mouseover -> objekt erwartet?

[Microhome]

Hallo liebe Community,
ich bastle gerade an einem mouseovereffekt über ein EINFACHES JavaScript:

<script language="JavaScript">
<!--
wasoff = new Image(); wasoff.src = "./images/was.gif";
wason = new Image(); wason.src = "./images/was_over.gif";
weroff = new Image(); weroff.src = "./images/wer.gif";
weron = new Image(); weron.src = "./images/wer_over.gif";
wooff = new Image(); wooff.src = "./images/wo.gif";
woon = new Image(); woon.src = "./images/wo_over.gif";

function swap(imgName,select) {
	document.[imgName].src = select.src;
}
// -->
</script>

Das ganze rufe ich wie folgt auf:

<a href="#" onmouseover="swap('was','wason')" onmouseout="swap('was','wasoff')"><img name"was" src="./images/was.gif" border="0"></a>

Doch leider funktioniert das nicht. Es kommt immer wieder der Fehler 'Objekt erwartet'

 

[Sven Mintel]

Dafehlt was:

<img name="was".....

 

[Gumbo]

Es gäb auch eine CSS-Lösung, die dazu noch barrierefrei wäre:

#nav li {
	float:			left;
}
#nav li a {
	display:		block;
	width:			[…];
	height:			[…];
}
#nav li a span {
	display:		none;
}

a#was:link,
a#was:visited {
	background:		url(wasoff.gif) no-repeat;
}
a#was:hover {
	background-image:	url(wason.gif);
}

a#wer:link,
a#wer:visited {
	background:		url(weroff.gif) no-repeat;
}
a#wer:hover {
	background-image:	url(weron.gif);
}

a#wo:link,
a#wo:visited {
	background:		url(wooff.gif) no-repeat;
}
a#wo:hover {
	background-image:	url(woon.gif);
}

<ul id="nav">
	<li><a href="[…]" id="was"><span>was</span></a></li>
	<li><a href="[…]" id="wer"><span>wer</span></a></li>
	<li><a href="[…]" id="wo"><span>wo</span></a></li>
</ul>

Besser wäre es sogar noch mit der im Artikel „CSS Sprites: Image Slicing’s Kiss of Death“ beschriebenen Technik zu arbeiten, da dort weniger Grafiken benötigt werden.

 

[Microhome]

Mit CSS geht das definitiv nicht, weil ich noch was anderes vorhabe (dazu habe ich auch schon was in der Rubrik CSS geschrieben und dabei ist herausgekommen, dass mein Problem insgesamt nur mit JavaScript zu lösen ist). Mit CSS hatte ich es zuerst auch

Das mit dem '=' ist peinlich.. *rot werd*. Ändert aber nichts an dem Fehler

<script language="JavaScript">
<!--
wasoff = new Image(); wasoff.src = "./images/was.gif";
wason = new Image(); wason.src = "./images/was_over.gif";

function swap(imgName,select) {
	document.[imgName].src = select.src;
}
// -->
</script>

<a href="#" onmouseover="swap('was','wason')" onmouseout="swap('was',wasoff)"><img name="was" src="./images/was.gif" border="0"></a>

Fehler: 'wasoff' ist undefiniert
Wenn ich es in Anführungszeichen setze kommt selber fehler wie oben..

Ich bin echt am Verzweifeln!

 

[Gumbo]

Variablen werden normalerweise durch das Schlüsselwort var definiert.


Um noch einmal auf den Bezug mit CSS zu kommen: Was hast du denn noch vor, dass eine CSS-Variante nicht funktionieren würde?

 

[Microhome]

Das ganze soll so funktionieren wie auf byteshift.de .
Obwohl du schon irgendwie recht hast. Man könnte ja für die verschiedenen Seiten dann die entsprechende CSS Datei reinladen. Kommt im prinzip aufs selbe, aber ist natürlich mit CSS besser wegen der JS Aktivierung etc. Ich werds mal so probieren!

Nachtrag
Jetzt weiß ich weider warum es nicht geht: Wenn ich auf einen anderen Button hovere, soll sich der erste ändern und man kann soweit ich weiß dieses Problem nicht via CSS lösen, sondern nur in JS, indem man das Bild via document.bild.src ändern.

Aber warum funktioniert mein JS nicht?

 

[Sven Mintel]

Versuchs mal so:

function swap(imgName,select) {
	eval('document.'+imgName+'.src = select.src');
}

 

[Gumbo]

Wenn ich auf einen anderen Button hovere, soll sich der erste ändern […]

Das verstehe ich nicht ganz, könntest du diesen Aspekt etwas genauer erläutern.

 

[Microhome]

Okay, habs jetzt wie folgt gemacht (Danke an Sven Mintel):

function swap(imgName,select) {
	eval('document.'+imgName+'.src = '+select+'.src');
}

Ich frag mich nur, warum auf diversen Internetseiten das ganze ohne die eval-Funktion gezeigt wird. Denn es funktioniert ja anscheinend ohne "zusammensetzen" nicht.

@Gumbo
Auf byteshift.de kannst du denke ich sehr gut sehen was ich meine. Wenn man über einen anderen Button fährt, dann wird dieser durch zwei Striche begrenzt. Wenn man nun draufklickt ist man ja in dieser Rubrik und der Button bleibt entsprechend markiert, bis man über einen aderen fährt. Dann ändert er sich. Und das, also dieses Ändern eines anderen Buttons in Abhängig vom Mouseover eines zweiten Buttons, ist soweit ich das weiß mit CSS nicht möglich. Zumindest nicht auf so einfache Art und Weise wie mit JS. Ich lasse mich jedoch sehr gern eines besseren belehren

 

[Gumbo]

Eigentlich hatte ich gedacht, dass jemand, der sich so ausgiebig damit beschäftigt eine Webseite fast 1:1 zu kopieren, auch mal einen gezielteren Blick in den Quellcode wirft. Denn anhand diesem wäre dir sicherlich aufgefallen, dass die derzeitige Position des Navigationsmenüs kein Verweis ist, sondern als schlichter Text fungiert, wie es auch in der nur-Text-Version gut zu sehen ist. Und wer das Funktionsprinzip von CSS kennt wird wissen, dass dies nicht mit CSS allein zu bewerkstelligen ist. In diesem Fall wird wohl ein serverseitiges Script für die korrekte Auszeichnung sorgen.