[CSS, jQuery] Zmiana obrazka po najechaniu

2018-07-11 07:54:17 #1 guest_Czikusek

 
Cześć,

Mam sobie 3 obrazki, które po kliknięciu w nie wyświetlają odpowiednią do nich treść (krótką). Napisałem w JS na atrybucie data-id wyświetlanie odpowiedniej treści do klikniętego obrazka. Działa fajnie. Teraz chciałbym jeszcze zrobić taki myk, że obrazek, który jest aktualnie kliknięty jest podświetlany. Mam takie coś:

<div class="obrazek" data-id="1"><img src="src" /></div>
<div class="obrazek" data-id="2"><img src="src" /></div>


... a w jQuery sobie napisałem:

$("obrazek img").click(... attr("src", "obrazek_podswietlony");


... no i ogólnie jest ok, obrazek zmienia się na podświetlony. Tyle tylko, że ten, który został podświetlony zostaje dalej podświetlony i podświetla się następny. A jak po kliknięciu w inny obrazek ten stary odświetlić?

2018-07-11 08:28:41 #2 guest_Czikusek

 
Zrobiłem tak, że po .click() w obrazek, zmienia się zmienna "wcisniete = numer_obrazka".

Dalej zrobiłem tak:

if (wcisniete != 1) { tutaj zdarzenie .hover() { attr("src", "obrazek_podswietlony"); }

... no ale dalej nie działa

2018-07-11 10:01:33 #3 guest_gosc

 
Poprostu podczas klikniecia na obrazek najpierw wszystkim obrazkom ustawiasz obrazki niepodswietlone a potem temu kliknietemu ustawiasz podswietlony. I juz

2018-07-11 10:19:51 #4 guest_Czikusek

 
No dobra, a jak zrobić że po najechaniu zmienia się na podświetlony? Funkcja hover() działa, ale to mi psuje efekt podświetlenia po kliknięciu, bo kliknę w obrazek - podświetli, ale od razu usuwa podświetlenie bo działa tu funkcja onmouseout. Co robić?

2018-07-11 11:47:09 #5 guest_gosc

 
No to posilkuj sie dodatkowa zmienna ktora na hover ustawiasz na FALSE a po klinieciu ustawiasz na TRUE. I w mouseout usuwasz podswietlenie tylko gdy ta zmienna jest FALSE

2018-07-11 12:05:55 #6 guest_Czikusek

 
Dobra... dałem takie coś w zdarzeniu click()

podswietlenie = true;

i niżej:

$(".home-click2").hover(function(){
			$(".home-click2 img").attr("src","./images/home-click2-on.png");
			podswietlenie = false;
		}).mouseout(function() {
			if (podswietlenie == false) {
				$(".home-click2 img").attr("src","./images/home-click2.png");
			}
		});


Po najechaniu podświetla fajnie, znika podświetlenie po mouseout. Kliknę i nic się nie dzieje, podświetlenia nie ma...

2018-07-11 12:12:04 #7 guest_gosc

 
No ale nie widze kodu z click teraz

2018-07-11 12:39:00 #8 guest_Gość

 
W click() mam tylko podswietlenie = true;

Dobra, zrobiłem że jest ok. Tak to wygląda

$(".home-click1").hover(function(){
			$(".home-click1 img").attr("src","./images/home-click1-on.png");
			
		}).mouseout(function() {
			if (podswietlenie == false && wcisniete != 1) {
				$(".home-click1 img").attr("src","./images/home-click1.png");
			}
		});


Jest ok, działa jak należy tylko jak kliknę w obrazek, podświetli mi go to już dalej jak najeżdżam na inne obrazki i mi podświetla to mouseout nie działa. Jakaś rada?

2018-07-11 12:41:05 #9 guest_gosc

 
Skasowales z hover
podswietlenie = false;
to co sie dziwisz?

2018-07-11 12:41:49 #10 guest_gosc

 
Moze zamiast hover uzyj mouseover

2018-07-11 12:42:38 #11 guest_gość

 
Dalej to samo dodałem podswietlenie=false; do hover i teraz podświetlenie po kliku nie działa

2018-07-11 12:55:30 #12 guest_gosc

 
To ci mowie: zamien hover na mouseover, dodaj co miales dodac i pokaz caly kod z clikiem wlacznie

2018-07-11 13:08:43 #13 guest_gosc

 
$(".home-button").click(function(){
			var homeclick = $(this).data('id');
			
			$("img.img1").attr("src","./images/home-click1.png");
			$("img.img2").attr("src","./images/home-click2.png");
			$("img.img3").attr("src","./images/home-click3.png");
			
			// podswietlamy klikniete
			podswietlenie = true;
$("img.img"+homeclick).attr("src","./images/home-click"+homeclick+"-on.png");
			
			$(".home-text").hide();
			$(".home-info"+homeclick).fadeIn( "slow" );
			
			var wcisniete = homeclick;


$(".home-click1").mouseover(function(){
			$(".home-click1 img").attr("src","./images/home-click1-on.png");
			podswietlenie = false; 
			
		}).mouseout(function() {
			if (podswietlenie == false && wcisniete != 1) {
				$(".home-click1 img").attr("src","./images/home-click1.png");
				podswietlenie = false;
			}
		});
		
		
		$(".home-click2").mouseover(function(){
			$(".home-click2 img").attr("src","./images/home-click2-on.png");
			podswietlenie = false; 
			
		}).mouseout(function() {
			if (podswietlenie == false && wcisniete != 2) {
				$(".home-click2 img").attr("src","./images/home-click2.png");
				
			}
		});
		
		
		$(".home-click3").mouseover(function(){
			$(".home-click3 img").attr("src","./images/home-click3-on.png");
			podswietlenie = false; 
			
		}).mouseout(function() {
			if (podswietlenie == false && wcisniete != 3) {
				$(".home-click3 img").attr("src","./images/home-click3.png");
			}
		});

2018-07-11 13:13:44 #14 guest_gosc

 
Mocno przekombinowales. Te wcisniete powinno byc nie potrzebne a kod dla kazdego obrazka taki sam.
Wrzuc to na jsfiddle to sie pokombinuje na zywo

Answer