einfacheres imagechange on mouseover

[merls]

hallöchen, erstmal ich hab bei der suchfunktion keine antwort zu diesem speziellen problem gefunden, oder ich hab es einfach überlesen, falls dem so war postet mir einfach den link,
die hitze trübt mir glaube ich das auge *grins*

ich bin am grübeln ob es eine bessere möglichkeit des image change on mouseover gibt als ich sie benutze.
ich will einfach nur das wenn ich über einen button fahre,
dieser button durch einen anderen ausgetauscht wird (eingedrueckt) und bei mouseout wieder das alte bild angezeigt wird..
das script das ich benutze funktioniert zwar super hat aber einen bösen nachteil, denn wenn ich zwischen 2 buttons einen neuen einfügen will muss ich jedesmal ALLE highlight etc umbennen und um eine stelle verschieben:

hier das script das ich benutze:

<script type="text/javascript">
<!--
Normal1 = new Image();
Normal1.src = "gfx/news_off.gif";
Highlight1 = new Image();
Highlight1.src = "gfx/news_on.gif";

Normal3 = new Image();
Normal3.src = "gfx/ger_off.gif";
Highlight3 = new Image();
Highlight3.src = "gfx/ger_on.gif";

function Bildwechsel(Bildnr,Bildobjekt) {
window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>

und fuer die links mit mouseover:

<a href="newsindex.html" target="links" onMouseOver="Bildwechsel(0,Highlight1)" onMouseOut="Bildwechsel(0,Normal1)"><img border="0" src="gfx/news_off.gif" name="charts" width="167" height="13"></a>

<a href="http://germanindex.html" target="main" onMouseOver="Bildwechsel(2,Highlight3)" onMouseOut="Bildwechsel(2,Normal3)"><img border="0" src="gfx/ger_off.gif" name="charts" width="167" height="13"></a>

wenn man also zwischen diesen beiden buttons einen neuen einfügen will muss man den unteren entsprechend ändern, da das script sonst nicht mehr funktioniert...

dummerweise ändern sich bei mir öfter mal die buttons bzw. deren reihenfolge, un dich mus jedesmal heftigsten aufwand betreiben,

das muss doch auch einfacher gehen, kann man die buttons die bim onmouseover und auch die beim onmouseout benutzt werden sollen nicht direkt im link benutzen, anstatt die jedesmal
oben im javasript vorzudefinieren?

ich steh da völlig aufm schlauch,
hoffe ihr könnt mir helfen...

 

[kasimir83]

Wie wär's mit

Preload in Javascript:

bild1=new Image
bild2=new Image

bild1.src=".../bild1.gif"
bild2.src=".../bild2.gif"

der Aufruf:

<a href="..." onmouseover="document.button1.src=bild1.src"
onmouseout="document.button1.src=bild2.src"><img src="..." name="button1"></a>

weiß aber nicht wie Brwowserübergreifend das funktioniert.

 

[merls]

hab deinen vorschlag grade noch bissl verbessert *gg*
so hat man sich bis auf das preload alle andere definitionen im head Tag geschenkt.


<a href="index.html" onmouseover="document.button1.src='sub/bild.gif'"
onmouseout="document.button1.src='sub/bild.gif'"><img src="sub/bild.gif" name="button1"></a>


also so funktioniert es jedenfalls im IE..
weiss jemand ob das auch mit netscape und co funktioniert??

wenn man die buttons nun alle preloaded wäre es genauso wie das script das ich momentan benutze, nur um einiges einfacher und funktionieller.