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: , , , .

16
Dodaj komentarz

avatar
14 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
12 Comment authors
LilianLiveCamKrzysiekOktawiuszTerla Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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ść
Piotr

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ść
Bartosz Stefanicki

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ść
gong

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

Nevada
Gość
Nevada

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ść
Łukasz

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ść
Radosław

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ść
Comandeer

@Ł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ść
Łukasz

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ść
Comandeer

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