Zmiana i rozjaśnienie obrazka po najechaniu kursorem

Bartosz

Bartosz Stefanicki Poniedziałek, 22.04.2024

Zmiana i rozjaśnienie obrazka po najechaniu kursorem

Pytanie zadane przez Wojtka: mam dwa takie same zdjęcia - na początku jest czarno-białe, chciałbym aby po najechaniu 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 2024).

Data publikacji: Sobota, 25.02.2012. Tagi: css, grafika, html, skrypty. Źródło obrazka Pixabay, Font awesome.

18 komentarzy


© 2005-2024 itporady.pl. Wszystkie prawa zastrzeżone.

Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką prywatności. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.