effet loupe et changement de photo
Bonjour,
Le problème sur lequel je butte et ne trouve pas de solution.
Le zoom fonctionne parfaitement le changement d'image au passage de la souris aussi.
Le problème :
Lorsque l'on change d'image après être passer sur les vignette le zoom reste sur la première image et ne change pas.
Je pense qu'il faut changer l'url du lien identifier par l'id "grande_photo".
Ce que je n'arrive pas à faire.
J’ai beau mettre le getElementById("grande_photo") dans tous les sens rien y fait.
De plus je voudrais changer le name"photo" en id "photo". Car bien qu'il fonctionne il me génère une erreur à la validation w3c.
Mon problème vient probablement de la mauvaise utilisation du getElementById. Mais je n'en suis pas sur.
Merci.
Démonstration du problème sur le lien ci-dessous.
http://www.larosedelorient.com/photo2.php
L'erreur javascript est:
Code:
1
2
3
4
5
| Message*: 'document.links.grande_photo' a la valeur Null ou n'est pas un objet.
Ligne*: 45
Caractère*: 1
Code*: 0
URI*: http://www.larosedelorient.com/photo2.php |
Le code html utilisé est ci-dessous.
Code:
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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>essaie photo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/jqzoom.css" type="text/css">
<style type="text/css">
*{margin:0;padding=0;}
p.horizon{float:left;margin-right:5px;}
img{border:0;border-collapse:collapse;}
img.petite{width:55px;height:75px;border:1px solid #990000;}
img.agrandi{width:300px;height:400px;}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<script type="text/Javascript">
if (document.images) {
grande_image = new Image();
photo1 = new Image();
photo2 = new Image();
photo3 = new Image();
grande_image.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg';
photo1.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg';
photo2.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg';
photo3.src = 'photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg';
}
$(function() {
$(".jqzoom").jqzoom();
});
</script>
</head>
<body>
<div id="content" style="width:300px;height:400px;">
<a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" id="grande_photo" class="jqzoom" style="" title="robe de soirée orientale rouge paillette">
<img name="photo" src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" alt="robe de soirée orientale rouge paillette" title="robe de soirée orientale rouge paillette" class="agrandi">
</a>
<script type="text/Javascript">
document.getElementById("grande_photo").href='photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg';
function changerlien(){
document.links["grande_photo"].href=href;}
</script>
</div>
<p>Survoler la vignette pour l'agrandir.</p>
<p class="horizon">
<a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" onmouseover='changerlien();$(".jqzoom").jqzoom();' title="robe de soirée orientale rouge paillette">
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette.jpg" alt="" title="robe de soirée orientale rouge paillette" class="petite" onmouseover="document.photo.src=grande_image.src;">
</a></p>
<p class="horizon">
<a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg" onmouseover='changerlien();$(".jqzoom").jqzoom();' title="robe de soirée orientale rouge paillette">
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-zoom.jpg" alt="robe de soirée orientale rouge paillette zoom" title="robe de soirée orientale rouge paillette zoom" class="petite" onmouseover="document.photo.src=photo1.src;">
</a></p>
<p class="horizon">
<a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg" onmouseover='changerlien();$(".jqzoom").jqzoom();' title="robe de soirée orientale rouge paillette">
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-profile.jpg" alt="robe de soirée orientale rouge paillette profile" title="robe de soirée orientale rouge paillette profile" class="petite" onmouseover="document.photo.src=photo2.src;">
</a></p>
<p class="horizon">
<a href="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg" onmouseover='changerlien();$(".jqzoom").jqzoom();' title="robe de soirée orientale rouge paillette">
<img src="photo/vetement/robe-de-soiree/robe-soiree-rouge-paillette-dos.jpg" alt="robe de soirée orientale rouge paillette dos" title="robe de soirée orientale rouge paillette dos" class="petite" onmouseover="document.photo.src=photo3.src;">
</a></p>
</body>
</html> |
