Mouseover Menü mit Grafik

[Wikinger]

Hallo,

ich möchte ein Menü erzeugen, dass sich beim darüber fahren mit der Maus der Hintergrund des Elements ändert. Das ist soweit kein Problem, hier der wesentliche Code, den ich habe:

<div class="sitenav">
<ul> 
<li><a href="link.html">Menüpunkt</a>/li> 
<li><a href="link.html">Menüpunkt</a>/li>
</ul>
</div>

und bei hover ändert es sich entsprechend

.sitenav ul li a:focus, .sitenav ul li a:hover, .sitenav ul li a:active {
    background: none repeat scroll 0 0 #FF6600;
    border-radius: 0.2em 0.2em 0.2em 0.2em;
    color: #FFFFFF;
    outline: 0 none;
    text-decoration: none;
}

Allerdings möchte ich nun noch vor die einzelnen Menüpunkte zusätzlich eine kleine Grafik setzen.
Der Hovereffekt soll gleich bleiben, nur soll eben die Grafik noch darin mit eingeschlossen werden und das bedeutet, dass beim hover die angezeigte Grafik auch geändert werden soll.

Wie kann ich das erreichen?

 

[phzu]

Hallo!

Also ich verwende fuer Menues immer mehrere Grafiken. Eine fuer "normal", eine fuer "hover" und eine fuer "active". Die kannst du mit verschiedenen Farben, Bildchen etc. formatieren. Mittels CSS machst du dann halt noch die Einrueckung, damit die Schrift nicht ueber dem Bildchen ist.

Alternativ, um die Ladezeit zu optimieren, kannst du aus diesen Grafiken eine einzige machen. Also die verschiedenen Grafiken einfach untereinander/nebeneinander platzieren und mittels background-position verschieben.

Hoffe ich konnte helfen!

 

[Wikinger]

Danke, das hilft mir schon mal weiter!

Ist es auch möglich, ein background-image mit einem hover-Effekt über die Angabe einer Farbe wie oben (background: none repeat scroll 0 0 #FF6600; ) zu kombinieren? Also die Grafik wird vor der Schrift positioniert und der hover-Effekt entsteht durch die Farbangabe und schließt die Grafik mit ein?

 

[phzu]

Nein. Ein Background-Image kann die Position des Textes nicht beinflussen.

Du kannst natuerlich, wenn du nur das Bild willst, eine transparente Grafik nehmen mit dem Bild drauf, dann wird der Rest des Hintergrunds mit der Farbe gefuellt.

Was du willst kannst du ganz einfach folgendermassen machen:
- Verschiedene transparente Hintergrundbilder mit den Bildchen drauf.
- Hintergrundfarbe einstellen
- Menueelement mit paddin-left versehen um den Text nach rechts zu schieben

Dann sollte das funktionieren^^