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

[mike]

Daj to słonko jako tło dla <a> i na zdarzenie najechania myszki na <a> zdefiniuj w CSS podmianę tła.
Możesz przeciez to zrbić w pseudoklasie :hover dla <a>

[HTML] pobierz, plaintext 
<style type="text/css">
a.menu {
    background: url('dot4a.gif') left no-repeat;
}
 
a.menu:hover {
    background: url('dot4b.gif') left no-repeat;
}
</style>
 
<a href="" class="menu">jeden</a>
<a href="" class="menu">dwa</a>
<a href="" class="menu">trzy</a>
[HTML] pobierz, plaintext 

Coś takiego

[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...

[TomASS]

Wiedziałem, że da się prościej (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Dzięki

Daj to słonko jako...

Jak mike do mnie słodko mówisz (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

o to chodziło (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

No da sie latwiej...

Wybacz, ale mike zrobił to łatwiej (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Też kombinowałem tak jak Ty, ale coś mi nie wychodziło...jednak Twój sposób też jest dobry (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Dodam jeszcze, że zrobiłem tak jak mike i dodałem padding, bo tekst wchodził na obrazek:

[HTML] pobierz, plaintext 
a.menu {
	background: url('dot4a.gif') left no-repeat;
	padding-left: 20px;
}
 
a.menu:hover {
background: url('dot4b.gif') left no-repeat;
}
[HTML] pobierz, plaintext 

Dzięki

[babejsza]

Zasugeruję jeszcze jedną możliwość. Linki daj do listy nieuporządkowanej i im w tle przypisz pomarańczowe słonko. Dla samych linków zdefiniuj tlo na zielone słoneczko, a dla hover'a daj background: none.

W css kodu będzie troszkę więcej, ale będą dwie korzyści:

- lista w liście
- tło dla hover'a załaduje się od razu, a nie dopiero po najechaniu na pozycję.

[TomASS]

W listy wolę się nie pchać - różnie wyglądają pod różnymi przeglądarkami - ale dzięki za sugestię.

[babejsza]

A od kiedy to różnie wygląda pod różnymi przeglądarkami (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) . Kwestia odpowiedniego ostylowania i wszędzie będzie tak samo. No ale z tego co można się domyślić to to będzie narzędzie, a nie strona więc można sobie darować (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) .

[Kreton]

Co do zmiany obrazka można to zrobić dużo lepiej, nie będzie też efektu ładowania. Mam na myśli najazd na słoneczko, czekamy aż się załaduje obrazek. Nie ! To trzeba tak:

Kod

a.menu { background: url('obrazek.gif') no-repeat 0 0; }

a.menu:hover { background: url('obrazek.gif') no-repeat 0 25px; }

Tylko wtedy masz 1 obrazek. Na górze jedno słoneczko na dole drugie. Oczywiście te 25px dałem przykładowo.

Ten post edytował Kreton 13.08.2007, 22:15:03

[Rzast]

Kreton:

Tylko wtedy masz 1 obrazek. Na górze jedno słoneczko na dole drugie. Oczywiście te 25px dałem przykładowo.

Wszystko pięknie, ładnie, ale się jeszcze piękniej sypie jak Ci się link na 2 wiersze robi, bo widać wtedy oba słoneczka. A czasami się tak zdarza, jeśli link jest długi, a szerokość menu stała....

Można zrobić jak exseerius lub mike, a żeby nie było ładowania, to na początku body umieścić niewidzialnego (display:none) diva z zapalonym słoneczkiem. Załaduje się, ale będzie niewidoczny

[Kreton]

Wyżej rozmawialiśmy o menu tylko z jedną linią w menu. Problem podany przez Ciebie można trochę inaczej ominąć. Można zastosować więcej przestrzeni między omawianymi słoneczkami. Co do dodawania niewidoczengo diva. Bez sensu moim zdaniem, dodajemy nic nieznaczące śmieci, szczególnie, że można to rozwiązać za pomocą czystego CSS-a.

[pavobe]

W skrócie:

Menu zrobił bym na li'ach i dał słonko pierwsze jako punktor. Gdy li będzie aktywowane (najechalne), to w CSS ustawić zmienę punktora na słonko 2.

[Kreton]

Beznadziejne rozwiązanie, ze względu na opóźnienie w ładowaniu. Przecież sposób podany przeze mnie też działa tylko i wyłącznie na CSS-ie, bez efektu ładowania.