[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