Strzałka - hover Opcje

[napixowany]

Witam, jeśli byłaby taka możliwość chciałbym prosić szanownych Użytkowników o poradę. Mam mały problem dotyczący zmieniania się obrazka po najechaniu myszką. Otóż posiadam taki kod:

[HTML] pobierz, plaintext 
<div id="colMenuCenter">
<ol>
<li><a href="#">Wydarzenia</a></li>
</ol>
</div>
[HTML] pobierz, plaintext 

oraz

[CSS] pobierz, plaintext 
#colMenuCenter li { list-style-type: none; padding: 5px 0px; }
#colMenuCenter li a { width: 156px; height: 14px; margin: 0 auto; padding: 3px 10px; display: block; text-decoration: none; }
#colMenuCenter li a:hover { background-color: #352b2a; color: #feffff; text-decoration: none; }
[CSS] pobierz, plaintext 

Oprócz zmiany koloru tła zależałoby mi na tym żeby wstawić przed napisem wydarzenia taką strzałkę dla a:



oraz dla a:hover taką:



Strzałki nr 2 nie widać gdyż jest białego koloru (strzałka nr1 - li.png, strzałka nr2 - li2.png). Czy jest jakaś możliwość zrobienia tego bez ustalania tła jako np. jpg z tą strzałką? Proszę o pomoc. Pozdrawiam i z góry dziękuje.

Ten post edytował napixowany 19.09.2010, 19:31:56

[tr@k]

Dla a dajesz

Kod

background: url(li.png) no-repeat left

ustawiasz odpowiedni padding-left, żeby tekst nie nachodził na strzałkę. W a:hover zmieniasz obraz na li2.png