[CSS, jQuery] Zmiana obrazka po najechaniu

2018-07-11 07:54:17 Post #1 gość_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 Post #2 gość_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 Post #3 gość_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 Post #4 gość_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 Post #5 gość_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 Post #6 gość_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 Post #7 gość_gosc

 
No ale nie widze kodu z click teraz

2018-07-11 12:39:00 Post #8 gość_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 Post #9 gość_gosc

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

2018-07-11 12:41:49 Post #10 gość_gosc

 
Moze zamiast hover uzyj mouseover

2018-07-11 12:42:38 Post #11 gość_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 Post #12 gość_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 Post #13 gość_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 Post #14 gość_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

Odpowiedz

Skrypty użytkowników

  1. Klasa obsługi szablo... Lirdoner
  2. Sekcje user76
  3. Klasa walidująca for... user76
  4. Licznik Gości online korey
  5. Form Builder Comandeer
  6. Dynamiczny licznik z... korey
  7. Captcha Comandeer