Podmiana obrazka w linku, Obrazek i tekst w linku Opcje

[TomASS]

Mam coś takiego:

[HTML] pobierz, plaintext 
<a href="#"><img src="dot4a.gif"/>Wymiana taboru<br/></a>
<a href="#"><img src="dot4a.gif"/>Nowy punkt obsługi<br/></a>
<a href="#"><img src="dot4a.gif"/>Jest nas więcej<br/></a>
[HTML] pobierz, plaintext 

dot4a.gif to zielone słoneczko
dot4b.gif to pomarańczowe słoneczko

chcę zrobić aby po najechaniu na linka słoneczko zmieniło się z zielonego na pomarańczowe, czyli coś takiego (myszką najechałem na środkowy link):
(IMG:http://www.logistyka.x12.pl/2.GIF)

na razie wydziergałem coś takiego:

[HTML] pobierz, plaintext 
<script>
function $(id){
 	return document.getElementById(id);
}
 
function zmien_obrazek(obrazek){
	$(obrazek).src="dot4b.gif";
}
 
function przywroc_obrazek(obrazek){
	$(obrazek).src="dot4a.gif";
}
</script>
<a href="#" onmouseover="zmien_obrazek('menuimg1');" onmouseout="przywroc_obrazek('menuimg1');"><img id="menuimg1" src="dot4a.gif"/>Wymiana taboru<br/></a>
	<a href="#" onmouseover="zmien_obrazek('menuimg2');" onmouseout="przywroc_obrazek('menuimg2');"><img id="menuimg2" src="dot4a.gif"/>Nowy punkt obsługi<br/></a>
	<a href="#" onmouseover="zmien_obrazek('menuimg3');" onmouseout="przywroc_obrazek('menuimg3');"><img id="menuimg3" src="dot4a.gif"/>Jest nas więcej<br/></a>
[HTML] pobierz, plaintext 

ale to chyba o dupę rozbić - pewnie da się jakoś w css :/

Dzięki!

Ten post edytował TomASS 7.08.2007, 13:17:09

[exseerius]

No da sie latwiej.... Robisz tak:

[HTML] pobierz, plaintext 
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
[HTML] pobierz, plaintext 

i teraz style:

[HTML] pobierz, plaintext 
a,
a:visited {
  padding-left: (tutaj szerokosc tego obrazka w px+ jakieś3px nadto, żeby ładnie wyglądało);
  background: url('dot4a.gif') no-repeat left;
  line-height: (wysokosc obrazka);
  text-decoration: none;
}
a:hover,
a:active {
  background: url('dot4b.gif') no-repeat left;
}
[HTML] pobierz, plaintext 

Jak coś to pisz...