CSS-Rollover + ein anderes div springt drauf an

Hallo gutes Forum.

Wie kann ich die kleinen Vorschaubilder über CSS einstellen, daß die jeweilige Menüpunkt auf

der linken Seite auf das schwarze Hintergrundbild umspringt.

Die navi-Rollover sind schichte CSS-Definitionen:

a.shirts, a.shirts:visited {
	width:64px;
	display:block;
	height:20px;
	background-image:url(bilder/navi/shirts.gif);
}
a.shirts:hover, a.shirts:active {
	background-image:url(bilder/navi/shirts+.gif);
}

und werden so in html angesprochen:

<div id="navi_roll_2">
<a class="shirts" href="design_shirts_abc.shtml"></a><br>
<a class="websites" href="#"></a><br>
<a class="katalog" href="#"></a><br>
<a class="zinnober" href="#"></a><br>
<a class="flyer" href="#"></a><br>
<a class="sonstiges" href="#"></a><br>
</div>

Wenn ich nun beispielsweise über das T-Shirt gehe, soll auch der Stil "shirts:hover" geladen

werden.

<a href="design_shirts_abc.shtml" class="?????"><img 

src="bilder/navi/klein/klein_shirt.gif" border="0"></a>

Aber wie?

Vosicht: es funktioniert nur der Navigations-Strang "Home -> Design-> T-Shirts -> abc/Narva/pirsch"
Link: http://www.ivb.cc/a/design.shtml
CSS1: http://www.ivb.cc/a/style_all.css
CSS2: http://www.ivb.cc/a/style_design.css

PS aus diesem Forum habe ich schon viel gelernt. Danke dafür.
Simon.

Hi Jörg,

jep, danke für den Tip.

nun hackt's aber beim onMouseOut ()
Es wird ein festes Bild geladen, so daß der vorherige CSS-Effekt nicht mehr funktioniert

gibts ne Lösung, wie mittels deinem Vorschlag nur temporär das 'shirt+.gif gezeigt wird? Und nach dem Verlassen des Bereichs der ürsprüngliche class-Effekt wieder greift?
im letzten Punkt "Sonstiges" habe ich dir zur Verdeutlichung meinen mouseOut-Befehl rausgenommen. Auch hier wurde ein festes Bild geladen.

Eingentlich wollte ich die Website gänzlich ohne JS gestalten, bin aber leider kein Hirn, und frage mich nun ob es nicht insgesamt pflegeleichter ist alle rollover doch mit deinem JS-Tip zu gestalten.

Heimlich hatte ich noch auf diesem CSS-Trick geschielt.http://www.drweb.de/csspraxis/css-rollover-menu.shtml

Ach und jetzt bekomme ich den einfachen JS-Rollover nicht hin. (Probehalber auf Shirts)

Kannst'te mir noch ein kleinen Tip geben?
Simon.

Nachtrag 2:

Man bräuchte wohl auch nur zwei Funktionen, wenn man die Bildernamen als Argument übergibt:

function mouse_hover(img_name)
{document.getElementById(img_name).style.backgroundImage = 'url(bilder/navi/' + img_name + '+.gif)';}
function mouse_out(img_name)
{document.getElementById(img_name).style.backgroundImage = 'url(bilder/navi/' + img_name + '.gif)';}

Und diese werden dann folgendermaßen aufgerufen:

<a id="shirts" class="shirts" href="design_shirts_abc.shtml" onmouseover="mouse_hover('shirts')" onMouseOut="mouse_out('shirts')" href="design_shirts_abc.shtml"></a><br>

<p><a href="design_shirts_abc.shtml" onmouseover="mouse_hover('shirts')" onMouseOut="mouse_out('shirts')"><img src="bilder/navi/klein/klein_shirt.gif" border="0"></a></p>

Hi Jörg & Co.

Ich danke dir für deine Unterstützung. Unter dem oben genannten Link findest du den aktuellen Stand.
Es sieht leider irgendwie wackelig aus, aber zumindestens der Effekt klappt, und darauf kann ich aufbauen.

Danke schön. Ciao Simon.