Forum » Programowanie » Po stronie przeglądarki

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ć?

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

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

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ć?

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

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

No ale nie widze kodu z click teraz

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?

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

Moze zamiast hover uzyj mouseover

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

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

$(".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");
			}
		});

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