onMousOver and Out, aber gleichzeitig woanders

[cille]

Hi ho, weis jetzt nicht ob ich hier richtig bin.
es geht um folgenes:

Meine Links sind Grafiken und tauschen sich aus bei einem MousOver and MouseOut.
Dabei soll auch eine andere Grafikdatei ausgetauscht werden, da steht nämlich wo es hingeht.

Hier mal der Code zum Grafik vorladen:

import javascript.io

button1= new Image();
button1.src = "images/02_roll.gif"
button2= new Image();
button2.src = "images/09_roll.gif"
button3= new Image();
button3.src = "images/10_roll.gif"
butten4= new Image();
butten4.src = "images/12_roll.gif"
butten5= new Image();
butten5.src = "images/13_roll.gif"
butten6= new Image();
butten6.src = "images/14_roll.gif"
butten7= new Image();
butten7.src = "images/16_roll.gif"
butten8= new Image();
butten8.src = "images/17_roll.gif"
butten9= new Image();
butten9.src = "images/18_roll.gif"
butten10= new Image();
butten10.src = "images/19_roll.gif"

butten11= new Image();
butten11.src = "images/roll_01.gif"
butten12= new Image();
butten12.src = "images/roll_02.gif"
butten13= new Image();
butten13.src = "images/roll_03.gif"
butten14= new Image();
butten14.src = "images/roll_04.gif"´
butten15= new Image();
butten15.src = "images/roll_05.gif"
butten16= new Image();
butten16.src = "images/roll_06.gif"
butten17= new Image();
butten17.src = "images/roll_07.gif"
butten18= new Image();
butten18.src = "images/roll_08.gif"
butten19= new Image();
butten19.src = "images/roll_09.gif"
butten20= new Image();
butten20.src = "images/roll_10.gif"

Hier ein Grafiklink der sich Austauscht:

<a href="siebdruck.php" onMouseOver="austausch2.src='images/09_roll.gif';" onmouseout="austausch2.src='images/09.gif';"><img name="austausch2" src="images/09.gif" width="109" height="99" border="0" align="top" /></a>

Und hier die betreffene Grafik die ausgetauscht werden soll.
Wenn man über einen der anderen grafiken geht die ebenso ausgetauscht werden:

<img src="images/03.gif" width="300" height="107" border="0" align="top" />

Könnt ihr mir helfen bin verzweifelt.

 

[Gumbo]

Arbeite lieber mit CSS:

a {
	width: 300px;
	height: 107px;
	background-image: url(images/09.gif);
}
a:hover {
	background-image: url(images/09_roll.gif);
}
a span {
	display: none;
}

<a href="siebdruck.php" title="Alternativtext"><span>Alternativtext</span></a>

Siehe dazu auch „CSS Sprites: Image Slicing’s Kiss of Death“ von Dave Shea.

 

[cille]

das Problem mit a:hover und so ist,
dass ich auch textlinks habe, da gibt es dann schwierigkeiten.

 

[Gumbo]

Dann musst du die Grafiklinks/Selektoren genauer spezifizieren. Weise ihnen beispielsweise eine gemeinsame Klasse und/oder zusötzliche IDs zu.

 

[cille]

Hi Gumbo,
könntest du mir das ein wenig genauer erklären, vielleicht an einem beispiel.
Bin in CSS und Java nicht so gut.

 

[Gumbo]

Von Java habe ich auch keine Ahnung, von JavaScript hingegen schon. Das ist aber wie bereits erwähnt gar nicht nötig. Ein Beispiel:

<ul id="nav">
	<li id="nav-item-1"><a href="#" title="Alternativtext"><span>Alternativtext</span></a></li>
	<li id="nav-item-2"><a href="#" title="Alternativtext"><span>Alternativtext</span></a></li>
	<li id="nav-item-3"><a href="#" title="Alternativtext"><span>Alternativtext</span></a></li>
	…
	<li id="nav-item-n"><a href="#" title="Alternativtext"><span>Alternativtext</span></a></li>
</ul>

#nav a {
	width: 300px;
	height: 107px;
}
#nav a span {
	display: none;
}

#nav-item-1 a {
	background-image: url(images/01.gif);
}
#nav-item-1 a:hover {
	background-image: url(images/01_roll.gif);
}
#nav-item-2 a {
	background-image: url(images/02.gif);
}
#nav-item-2 a:hover {
	background-image: url(images/02_roll.gif);
}
#nav-item-3 a {
	background-image: url(images/03.gif);
}
#nav-item-3 a:hover {
	background-image: url(images/03_roll.gif);
}
…
#nav-item-n a {
	background-image: url(images/n.gif);
}
#nav-item-n a:hover {
	background-image: url(images/n_roll.gif);
}

 

[cille]

Mhh ich glaube ich seh nicht durch,
da es mir so vorkommt, dass ich was falsch erklärt habe

Hoffe du krigst kein nerven zusammenbuch @Gumbo

Folgende Grafik wird ausgetauscht beim Rollover: (kurzname: LINKMENU)

<a href="referenzen.php" onMouseOver="austausch7.src='images/16_roll.gif';" onmouseout="austausch7.src='images/16.gif';"><img name="austausch7" src="http://www.tutorials.de/forum/images/16.gif" width="109" height="115" border="0" align="top" />

dabei tauscht gleichzeit ein anderes bild woanderes sich auch aus mit dem Passendem Bild.
Das ist die hier: (kurzname: VERSCHIEDENROLL)

<img src="http://www.tutorials.de/forum/images/03.gif" width="300" height="107" border="0" align="top" />

Mein Problem ist eigentlich nur das ich 10 Grafik Links habe die sich bei Mousover tauschen, dabei muss sich aber "VERSCHIEDENROLL" auch ändern und aber so ändern, dass das passende "LINKMENU" mit "VERSCHIEDENROLL" zusammenpast.

Hoffe es war leicht erklärt ;D
bin völlig aus dem kauz,

Hoffe ihr könnt es sogesagt für Webdesign Babys erklären

@Gumbo, wenn du ne Antwort weist, muss ich dir ein Bier ausgeben, wenn wir uns mal begegnen