effet loupe et changement de photo

**hakazizi** · 11/01/2011, 13h49

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>

**Bovino** · 11/01/2011, 13h58

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.

une erreur parce que tu mets un id à une balise ??? Ca m'étonnerais

à moins bien sûr que tu essayes de mettre un id qui ne soit pas unique.

**hakazizi** · 11/01/2011, 17h14

je n'ai pas compris ta réponse.
le name est dans un img pour l'un et l'id pour l'autre dans un a.
le name fonctionne dans l'image mais créer une erreur a la validation w3c.
et rien ne fonctionne pour le lien.
et les id sont uniques tous comme le name auquel je fait reference.
edit: je viens de passer du html 4.0 a 4.01 et l'erreur du name a disparu.

effet loupe et changement de photo

JavaScript

Discussions similaires

Partager

Partager