Zmiana i rozjaśnienie obrazka po najechaniu kursorem
HTML + CSS Aktualizacja: 07.08.2017

Zmiana i rozjaśnienie obrazka po najechaniu kursorem

To jest odpowiedź na pytanie zadane przez czytelnika tego serwisu - 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.

Autor: . Tagi: , , , .

Dodaj komentarz

16 komentarzy do "Zmiana i rozjaśnienie obrazka po najechaniu kursorem"

avatar
najnowszy najstarszy oceniany
Lilian
Gość

Świetna robota - już wypróbowałam i działa !

LiveCam
Gość

Dzieki super poradniczek . pozdriam
A jak zrobić np. w jquery by obrazek zmieniał się cały czas gdy najedziemy na niego myszką ?
Obrazek 1.jpg a gdy najedziemy myszka do czasu zjechania kursorem obrazka by naprzemiennie zmieniały się na nim obrazki 2.jpg i 3.jpg ?
Jak to zrobic ?
pozdrawiam i dzieki

Krzysiek
Gość

Może podzielcie się kwestia wyświetlenia się (rozjaśnienia) innego obrazka po najechaniu myszką?

Oktawiusz
Gość

dodałem do style.css zapis:

img#fotografia:hover{
opacity : 0.80;
filter : alpha(opacity=80);
}

Działa fajnie, rozjaśnia wszystkie fotki którym dam id="fotografia"
Interesuje mnie natomiast stworzenie zapisu w css, który spowoduje zmianę obrazka na inny. NIby na górze jest to napisane ale ja potrzebuje żeby na wszystkich dodawanych fotkach z id="fotografia" po najechaniu kursorem pojawiał się ten sam obrazek.

Druga sprawa, to możliwość taka żeby po najechaniu na obrazek pojawiał się inny obrazek ale nie zamiast niego tylko na nim. Chodzi o efekt jak na kafelkach http://www.kopernik.org.pl/

Terla
Gość

Wkońcu znalazłem ! Szukałem tego 6godz. ;/ Dzięki Bartek Stefancki :)

Piotr
Gość

Witam, dopiero co zaczynam stawiać kroki w tworzeniu stron i mam pytanie do części "Rozjaśnienie obrazka po najechaniu kursorem", otóż chciałbym aby po kliknięciu na zdjęciu przejść do innej podstrony, w którym miejsu mam wpisać odsyłacz?

Bartosz Stefanicki
Gość

Po zmianach będzie to tak wyglądać:

[code lang="html"][/code]

Bartosz Stefanicki
Gość

@Gong,

Wstaw style CSS (img#fotografia:hover itp.) do swojego arkusza. Nie musisz zmieniać "fotografia" na nic innego.

Wystarczy, że zmienisz ścieżkę do obrazka - parametr SRC w obrazku.

gong
Gość

jestem kompletnie zielony, dlatego proszę o wyrozumiałość. W rozjaśnieniu obrazka trzeba coś wpisywać zamiast "fotografia"?

Nevada
Gość

Przy ostatniej regułce - baaardzo mi się podoba :D - wcale nie trzeba dodawać regułki do każdego obrazka. Wystarczy w skrypcie php nawiązanie do "id" np.:
[code lang="php"]<?php
<img id="fotografia" src="templates/template ?>/images/obrazek1.png"/>
<img id="fotografia" src="templates/template ?>/images/obrazek2.png"/>
<img id="fotografia" src="templates/template ?>/images/obrazek3.png"/>
?>[/code]

albo też:

[code lang="php"]<?php

<img id="fotografia" src="templates/template ?>/images/obrazek1.png"/> ?>[/code]
jakieś inne części stronki i dalej:
[code lang="php"]<?php
<img id="fotografia" src="templates/template ?>/images/obrazek2.png"/>
?>[/code]

Dziękuję Autorowi za pomoc. Pozdrawiam :)

Łukasz
Gość

Wygodniej jest oczywiście w CSS, ale przy większej ilości zdjęć te regułki w CSS zajmą sporo miejsca bo każdy obrazek musi mieć swoje id.

Radosław
Gość

zdjęcie wcale nie musi mieć przypisanego id żeby css śmigał bezproblemowo. Poniżej przykład.

kod css:
.galery img{
opacity : 0.70;
filter : alpha(opacity=70);
}
.galery img:hover{
opacity : 1.00;
filter : alpha(opacity=100);
}

Wszystkie zdjęcia w znacznikach span będą reagowały na styl css

Comandeer
Gość

@Łukasz: wolisz mieć zlepek HTML i JS dla każdego takiego obrazka czy ładną regułkę w CSS? Bo ja wolę mieć regułkę w CSS.

Łukasz
Gość

A jeśli chodzi o samo rozjaśnienie obrazka to opisany powyżej sposób bardzo mi się podoba, ale sprawdza się tylko w przypadkach gdy mamy do czynienia z jasnym tłem.
Co zrobić gdy mamy na stronie ciemne tło?

Łukasz
Gość

Tylko ciekawe jak drugim sposobem zmienić obrazek na inny dla każdego (jeżeli mamy w galeri więcej zdjęć, co zdarza się nirzadko)?
Wydaje mi się że pierwszy sposób jest całkiem w porządku.

Comandeer
Gość

1 sposób jest feee... jedyne poprawne to 2 kolejne.
nie zapominajmy o nowych fitrach w CSS, które to wszystko sprowadzają do jednej regułki