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 : Sélectionner tout - Visualiser dans une fenêtre à part
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 : Sélectionner tout - Visualiser dans une fenêtre à part
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>