Grafik über Hover-Effekt darstellen?

[Xyra]

Huhu,
Ich bin zur Zeit dabei ein neues Subweb für meine Arbeit zu erstellen. Allerdings bin ich nun an einen Punkt gekommen, an dem ich nicht weiter weiß und zu dem ich auch keine Information finde.
Ich habe eine Navi mit abgerundeten Ecken durch Grafiken. Alles schön und gut, allerdings sollen die entsprechenden Menüpunkte durch hover ihre Farbe verändern. Soweit kein Problem, allerdings verschwinden meine abgerundeten Ecken, sobald man mit der Maus darüber fährt; sie werden wieder kantig.
Nach einigem herumprobieren mit beispielsweise auch z-index bin ich nun echt langsam verzweifelt.
Weiß irgendjemand, wie man es schaffen kann, die background-Grafik über dem hover-Effekt darzustellen?

Das die Stelle betreffende Html:

<ul>

<li>
<div class="rc oli"> <div class="rc ore"> <div class="rc ure"> <div class="rc uli">
<a href="Link1" target="">Text1</a>
</div> </div> </div> </div>
</li>

<li>
<div class="rc oli"> <div class="rc ore"> <div class="rc ure"> <div class="rc uli">
<a href="Link2" target="">Text2</a>
</div> </div> </div> </div>
</li>

....hier folgen weitere menüpunkte nach dem gleichen schema

</ul>

und das CSS dazu:

.rc {
    padding:0px;
    margin:0px;
}


.oli {
    background-image:url(../../shared/images/corner-top-left.png);
    background-position:0% 0%;
    background-repeat: no-repeat;
}


.ore {
    background-image:url(../../shared/images/corner-top-right.png);
    background-position:100% 0%;
    background-repeat: no-repeat;
}


.ure {
    background-image:url(../../shared/images/corner-bottom-right.png);
    background-position:100% 100%;
    background-repeat: no-repeat;
}


.uli {
    background-image:url(../../shared/images/corner-bottom-left.png);
    background-position:0% 100%;
    background-repeat: no-repeat;
}

Leider bearbeite ich die Seite derzeit lokal und kann euch keinen Link zu der Seite bereitstellen.
Hat jemand eine Ahnung, wie ich die runden Ecken auch mit hover-Effekt erscheinen lassen kann oder ist das absolut unmöglich?

Liebe Grüße,
eure Xyra

 

[prm]

Deine Vorgehensweise sieht mit den vier verwendeten Divs äußerst seltsam aus und mir ist bisher sowas auch noch nicht begegnet.

Aus meiner Sicht solltest du eine Gesamthintergrundgrafik mit diesen abgerundeten Ecken erstellen und keine vier Teilgrafiken.
Dann nochmal eine weitere Grafik, z.B. mit einer anderen Farbe für den Hovereffekt.

Auf sämtliche Div's kannst du verzichten.
Die Grafiken werden dann als Hintergrundgrafik für a:link, a: visited sowie a:hover eingebunden.

Dieses Beispiel sollte dir weiterhelfen:
Link-Buttons

 

[Xyra]

danke für die schnelle Antwort, aber leider löst das mein Problem nicht. diese lösung hatte ich mir auch schon überlegt, aber da hintergrundbilder nicht skalierbar sind und ich nach vorschriften schreiben muss, darf ich das nicht verwenden.
die technik mit den 4 divs stammt von unserem ehemaligen webdesigner. allerdings waren damals für abgerundete ecken keine hover-effekte eingebunden, weil die menüs kantig mit rahmen waren...
mein chef fand diese technik recht toll und meinte ich soll das menü auf diese art und weise gestalten...
ich hab da leider nicht viel spielraum beim einbinden von grafiken, da ich eben nach dieser methode vorgehen soll...
weißt du (oder irgendjemand^^) ob das wenigstens überhaupt geht, einen hover-effekt "hintergründig" erscheinen zu lassen?

 

[prm]

Tut mir leid, da muss ich passen. Ich kann zwar nicht definitv sagen, ob dies absolut unmöglich ist (irgendwelche Tüftlerexperten gibt es immer), mir fällt jedenfalls keine Lösung ein.
Ich werde den Beitrag aber dennoch interessiert verfolgen, falls jemand eine Lösung findet.

Zur Skalierbarkeit hast du Recht. Allerdings sollte das nach meiner Einschätzung ja nur die horizontale Veränderung betreffen, z.B. wenn der Text des Links unterschiedlich lang ist. Wäre es da nicht sinnvoll, den Links eine fixe Breite zu geben, die sich am längsten Text orientiert und dann doch mit Buttons zu arbeiten?

 

[ingoS]

Gibt es nicht einen hover-Trick für Sliding-Doors-Hintergrundgrafiken?
Ist das nicht in etwa das Gleiche?

 

[neuroleptika]

Sollen die runden Ecken immer die selben bleiben?
Dann z.B so:
html

<ul id="men">
<li>
<a href="#">
<span>
<span>
<span>
<span>
link1
</span>
</span>
</span>
</span>
</a>
</li>
<li>
usw.
</li>
</ul>

css

#men li a {
display: block;
background-image: url(image/zitrone1.jpg);
background-position: center center;
background-repeat: no-repeat;
}

#men li a span {
display: block;
height: 100%;
background-image: url(image/rund-gelb-ol.png);
background-position: top right;
background-repeat: no-repeat;
}

#men li a span span {
display: block;
height: 100%;
background-image: url(image/rund-gelb-or.png);
background-position: top left;
background-repeat: no-repeat;
}

#men li a span span span {
display: block;
height: 100%;
background-image: url(image/rund-gelb-ur.png);
background-position: bottom left;
background-repeat: no-repeat;
}

#men li a span span span span {
display: block;
height: 100%;
background-image: url(image/rund-gelb-ul.png);
background-position: bottom right;
background-repeat: no-repeat;
}

#men li a:hover {
background-image: url(image/zitrone.jpg);
}

Die Ecken bleiben bei jedem Inhalt zu sehen.
Müßte noch für den IE 6 angepasst werden (haslayout, white-space-bug).
<a> bräuchten noch jeweils eine id.

Je nach dem wie das Menü und die Bilder aussehen, würde ich das aber sicher anders lösen.
Dazu bräuchten wir aber ein Beispiel als Link.

 

[Xyra]

vielen lieben dank...werds mal versuchen und geb dann nochmal rückmeldung :)
layout etc für den IE6 ist da wohl das geringste problem gewesen, das bekomm ich dann alleine hin...

das mit sliding doors geht in ne andere richtung, aber ist auch ein guter lösungsansatz...(mit dem ich allerdings etwas rumtüfteln müsste damit ich gegen keine restriktionen oder ähnliches verstoße^^)

vlt hätte ich noch schreiben sollen, dass die verwendeten ecken die farbe des body-hintergrunds haben und die menüpunkte sozusagen an den ecken überdecken
aber hab ich bei der ganzen aufregung vergessen...

nen link zu der seite wie sie gerade ist/sein soll gibts leider nicht
die seite, wie sie aktuell noch im netz steht ist zu finden unter International Max Planck Research School on Retaliation, Mediation and Punishment allerdings sieht das menü auf der lokalen seite mittlerweile ziemlich anders aus...
wenn die seite fertig is und bewilligt etc wurde könnt ihr sie euch denk ich mal unter dem gleichen link angucken...

mh...muss mal n bisschen ausprobieren...bis dann:)

 

[Xyra]

du bist ein schatz...funktioniert...
an span hatte ich gar nicht gedacht...hab erst nen ähnlichen ansatz nur mit divs gehabt, aber da tut das nich
nja nun passt das ganze....nochmals danke =)