Zmiana i rozjaśnienie obrazka po najechaniu kursorem

Witam, mam dwa takie same zdjęcia (czarno-białe i kolorowe) na początku jest czarno-białe ale chciałbym aby po najechaniu (a:hover) było kolorowe.

W odpowiedzi na powyższy komentarz napisałem, że rozwiązaniem tego problemu jest JavaScript. Ale nie jest to jedyne wyjście z problemu - więcej szczegółów w dalszej części posta.

1. JavaScript

Kod do tego podpunktu jest krótki i prosty do zrozumienia. Przyda się, gdy będzie więcej niż jeden obrazek.

<a href="http://ADRES-STRONY.pl"><img src="OBRAZEK-1.PNG" onmouseover="this.src = 'OBRAZEK-2.PNG'" onmouseout="this.src = 'OBRAZEK-1.PNG'"></a>

Domyślnie wyświetla się "OBRAZEK-1.PNG", po kliknięciu czyli onmouseover "OBRAZEK-2.PNG". Natomiast onmouseout służy do przywrócenia pierwszego obrazka, kiedy kursor nie znajduje się już w danym obszarze.

2. CSS

Rozwiązanie bardziej poprawne - dla mnie zachowujące większy porządek. Kod HTML odwołuje się do arkusza stylów (id="fotografia").

<div id="fotografia"></div>

div#fotografia {
background-image: url("OBRAZEK-1.PNG");
background-repeat: no-repeat;
width: 2000px;
height: 200px;
}

div#fotografia:hover {
background-image: url("OBRAZEK-2.PNG");
background-repeat: no-repeat;
width: 200px;
height: 200px;
}

Druga linijka to lokalizacja pierwszego obrazka "OBRAZEK-1.PNG". Następna linijka to zabezpieczenie przed powtarzaniem tła (zdjęcia) - pojawi się tylko raz. Na końcu podajemy wymiary naszych obrazków.

2.1. CSS - Rozjaśnienie obrazka po najechaniu kursorem

Efekt który nada więcej świeżości galerii zdjęć. Aby wprowadzić takie rozjaśnienie należy skorzystać z funkcjonalności CSS-a.

<img id="fotografia" src="OBRAZEK.PNG">

img#fotografia:hover{
opacity : 0.70;
filter : alpha(opacity=70);
}

W przypadku pytań czekam na komentarze pod tym wpisem.

Data publikacji: 25.02.2012 r. Tagi: css, grafika, html, skrypty.