[jQuery] zmiana obrazka po najechaniu na obrazek i text

2011-11-20 18:54:01 Post #1 Przemo_75

 
Witam.
Próbuję zrobić coś na wzór MouseOver z textem ale nie bardzo wiem jak to zrobić.
Mam 4 obrazki + 4 odnośniki textowe (jako img) i chcę aby zarówno po najechaniu na obrazek i text zmieniał się obrazek (z szarego na kolorowy) - dla przykładu posłużyłem się tylko 2 obrazkami.
Poniżej przykład:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
<head>
<title>Efekt</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img.g1, img.g2").hover(
function() {
$(this).stop().animate({"opacity": "0"}, 200);
},
function() {
$(this).stop().animate({"opacity": "1"}, 200);
});
 
});
</script>

<style>
div.fadehover {position: absolute; cursor: pointer; margin-left: 73px}
img.g1 {position: absolute; left: 0px; top: 0px; z-index: 10} 
img.k1 {position: absolute; left: 0px; top: 0px}
img.g2 {position: absolute; left: 257px; top: 0px; z-index: 11} 
img.k2 {position: absolute; left: 257px; top: 0px}
p {margin-top: 300px}
</style>
</head>
<body>
<div class="fadehover">
<a href="koty.html"><img src="kot1.jpg" class="g1" /></a>
<img src="kot2.jpg" class="k1" />
</div>
<div class="fadehover">
<a href="koszule.html"><img src="koszula-bw.jpg" class="g2" /></a>
<img src="koszula.jpg" class="k2" />
</div>
<div class="fadehover">
<p>
<a href="koty.html"><img src="koty.jpg" /></a>
<a href="koszule.html"><img src="koszule.jpg" /></a>
</p>
</div>
</body>
</html>

W powyższym przykładzie po najechaniu myszką na kot1.jpg następuje zmiana obrazka na kot2.jpg. Analogicznie z obrazkiem koszule-bw.jpg, który zmienia się na koszula.jpg.
Jak zrobić, aby także po najechaniu na koty.jpg obrazek kot1.jpg zmianił się na kot2.jpg?

2011-11-20 19:00:48 Post #2 nospor

 
Dziwne pytanie.... jak zrobić? Normalnie - analogicznie.
Nadaj dla koty.jpg jakąś klasę, np. gg
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){ 
$("img.gg").hover( 
function() { 
$('img.g1').stop().animate({"opacity": "0"}, 200); 
}, 
function() { 
$('img.g1').stop().animate({"opacity": "1"}, 200); 
}); 
  
});

I już

2011-11-20 22:24:21 Post #3 Przemo_75

 
Wielkie dzięki. Wiedziałem, że rozwiązanie może być proste i analogiczne ale nie potrafiłem tego zrobić.
Raz jeszcze dziękuję za pomoc.

Odpowiedz