Podniana obrazka w menu na stronie w html

[Tomasz]

Witam.
Czy mógłby mi ktoś napisać co zrobić aby po najechaniu na jeden z obrazków stanowiący część menu zamieniał się on na inny obrazek np. taki sam ale innego koloru, takie coś bym chciał zrobić. Znam podstawy HTML i tego nie wiem. Te style, CSS to po trochu. Prosiłbym o jakiś przykładowy skrypt.

[rokko]

Sam kod menu może wyglądać na przykład tak:

Plik HTML

Kod: Zaznacz cały

<ul>
   <li><a href="http://twojastrona.index.html">Strona główna</a></li><li><a href="http://twojastrona.artykuly.html">Artykuły</a></li><li><a href="http://twojastrona.newsy.html">Newsy</a></li>
</ul>

Plik styli:

Kod: Zaznacz cały

ul, ul li {
   list-style: none;
   display: block;
   margin: 0;
   padding: 0;
}

ul li {float: left;}

ul {
   float: left;
   background-color: #6699CC;
   padding: 0px;
}


ul a:link, ul a:visited {
   text-decoration: none;
   display: block;
   font-weight: bold;
   color: #FFF;
   padding: 10px 10px;
   border-right: 2px solid #FFF;
}

ul a:hover {background-color: #3300CC;}

Wstawiasz w odpowiednie miejsce na stronie listę i definiujesz kolejno pozycje w menu, przypisujesz później globalnie jak tutaj definicje styli do każdego elementu listy lub możesz zrobić to na klasach i każdą z nich przypisać do konkretnego elementu. Zależy co dokładnie miałbyś mieć na tej stronie, lepiej jest robić na klasach bo się ma większą przejrzystość.

Aha jak chcesz zrobić podmianę obrazka po prostu zamiast definiować kolor zdefiniuj background-image: url("przycisk.png");

[Tomasz]

OK. Już rozwiązałem ten problem.

Kod: Zaznacz cały

<img src="button.png" onmouseout="this.src='button.png'" onmouseover="this.src='button2.png'" alt="" />

[rokko]

Też tak możesz, tylko jak ktoś wyłączy JavaScript, zastosuje np. NoScript w FF to nici z podmiany, lepiej użyć w takich sytuacjach czystego CSS.

[Tomasz]

A możesz napisać takie coś po swojemu?

[rokko]

W sieci jest sporo przykładów jak zrobić prostą podmianę obrazków w CSS więc jeżeli chodzi ci o napisanie tego od zera, to jestem przekonany że czytając kilka poradników będziesz w stanie własnoręcznie stworzyć to, przynajmniej się czegoś nauczysz

EDIT:
Luknij sobie jeszcze tutaj => Dostępne tylko dla zarejestrowanych użytkowników
Stronek z gotowcami i kreatorami jest sporo.

PS. Kiedyś używałem do generowania buttonów CSS aplikacji CSS-BuMa może Ciebie ona zainteresuje. Szybko, łatwo i skutecznie można stworzyć interesujące menu.