To jest odpowiedź na pytanie zadane przez czytelnika bloga - Wojtka. Zamieścił on komentarz pod postem "Prosty skrypt galerii zdjęć z efektem Highslide". Oto jego treść:
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.
Warto zobaczyć
Szukasz hostingu?
Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Czerwiec 2023).
Data publikacji: 25.02.2012 r. Tagi: css, grafika, html, skrypty.