Zur Navigation

CSS-Rollover + ein anderes div springt drauf an

1 Serifenlos

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.

17.10.2006 07:01 | geändert: 17.10.2006 07:07

2 Jörg

Hallo Simon,

Hover-Effekte können in CSS eigentlich nur für das Element selbst und dessen Kindelemente genutzt werden - dieser Fall liegt hier aber nicht vor. Man könnte hier aber JavaScript zuhilfe nehmen. Um das betreffende Element besser ansprechen zu können, würde ich es mit einer ID "shirts" versehen:

<a id="shirts" class="shirts" href="design_shirts_abc.shtml"></a><br>

Im Head wird dann eine JavaScript-Funktion definiert, die den Hintergrund dieses Elementes verändert:

<script type="text/javascript">
function shirtshover()
{
document.getElementById('shirts').style.backgroundImage = 'url(bilder/navi/shirts+.gif)';
}
</script>

Die Funktion wird dann bei onmouseover über dem Shirt aufgerufen:

<p><a href="design_shirts_abc.shtml" class="?????" onmouseover="shirtshover();"><img src="bilder/navi/klein/klein_shirt.gif" border="0"></a>

17.10.2006 08:35 | geändert: 17.10.2006 08:38

3 Serifenlos

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.

17.10.2006 13:07

4 Jörg

Nachtrag:

ich habe grad den derzeitigen Stand getestet und war die ganze Zeit am Rätseln, warum sich die oberste Grafik nicht ändert. Aber ist ja auch kein Wunder, wenn du sie zusätzlich noch als Image einfügst :)

<a id="shirts" onmouseover="shirts_hover()" onMouseOut="shirts_out()" href="design_shirts_abc.shtml"><img src="bilder/navi/shirts.gif" border="0"></a><br>

Ohne das img ist der Hover sichtbar:

<a id="shirts" class="shirts" onmouseover="shirts_hover()" onMouseOut="shirts_out()" href="design_shirts_abc.shtml" class="shirts"></a><br>

17.10.2006 16:05 | geändert: 17.10.2006 16:28

5 Jörg

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>

17.10.2006 16:23 | geändert: 17.10.2006 16:25

6 Serifenlos

Danke Jörg, ich werds morgen ausprobieren.

Gähn - gute Nacht. Simon

17.10.2006 21:26

7 Serifenlos

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.

20.10.2006 00:51

8 Jörg

Schön - und wenn JavaScript deaktiviert ist, sieht der User noch den einfachen Hover-Effekt :)

20.10.2006 09:21

Beitrag schreiben (als Gast)





[BBCode-Hilfe]