[xhtml] obrazek w <a>:hover ? Opcje

[robos85]

Chodzi mi o to, jak zrobić aby po najechaniu na linka (w formie gif'a) pojawił się inny obrazek.
Chcę aby po najechaniu na obrazek w <a> robił się on jaśniejszy (mam już 2 gotowe obrazki)

[mike]

W skrócie:

[HTML] pobierz, plaintext 
a {
    background: url('obrazek.gif');
}
 
a:hover {
    background: url('obrazek_hover.gif');
}
[HTML] pobierz, plaintext 

[NoiseMc]

Mozesz dodac do css 2 klasy:

Kod

.off
{
    filter:alpha(opacity=50);
    -moz-opacity:.50;
    opacity:.50;
}
.on
{
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
}

I przy obrazku dac na przyklad:

[HTML] pobierz, plaintext 
<a href="http://www.example.com"><img class="off" onmouseover="this.className='on'" onmouseout="this.className='off'" src="image.gif" alt="Image" /></a></li>
[HTML] pobierz, plaintext 

[robos85]

ten 1szy sposób mnie chyba bardziej interesuje, bo będą mi też potrzebne obrazki nie tylko rozjaśnione/pocienione ale także o róznych kształtach itp (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten 2gi sposób też przydatny (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Dzięki ;]

a jest sposób, żeby te 2 obrazki jakoś określać w znaczniku <a> bo np, dla 15 linków robić po 2 klasy w css to sporo roboty:)

[wuchi]

Mocno spóźnione (IMG:style_emoticons/default/winksmiley.jpg) , ale może komuś się jeszcze przyda...

a jest sposób, żeby te 2 obrazki jakoś określać w znaczniku <a> bo np, dla 15 linków robić po 2 klasy w css to sporo roboty:)

<a href="link.php"><img id="polski" src="obrazek1.jpg" onmouseover="this.src='obrazek2.jpg'" onmouseout="this.src='obrazek1.jpg'" /></a>

[erix]

Jak radzisz, to radź dobrze - na co JavaScript do tego?

[seth-kk]

Mocno spóźnione (IMG:style_emoticons/default/winksmiley.jpg) , ale może komuś się jeszcze przyda...




<a href="link.php"><img id="polski" src="obrazek1.jpg" onmouseover="this.src='obrazek2.jpg'" onmouseout="this.src='obrazek1.jpg'" /></a>

takie cos nadal mozna oprzec na css
np dajac jeden obrazek w tlo a drugi do img nastepnie ustawiajac jedno nad drugim i opisujac czyms w stylu

[HTML] pobierz, plaintext 
a img {display: none;}
a:hover img {display: block;}
[HTML] pobierz, plaintext 

[erix]

Dobra, wystarczy bo widzę, że dyskusja zatacza koło.