effet loupe
Posté : 07 janv. 2011, 14:18
Bonjour, je voudrais agrandir une partie de la photo.
Mais l'agrandissement doit se produire sur le coté et voir la zone agrandi sur la petite.
Les seul chose que j'ai trouve ce sont des script déjà prêt mais pas de méthode pour le faire sois même.
De plus je voudrais conserver le changement d'image au passage de la souris sur les miniature.
Cela fait plus de 3 semaines que je cherche mais rien, à part les scripts deja codé que je n'arrive pas à adapter pour en faire ce que je veux.
Merci.
pour le moment j'ai ceci:
http://www.larosedelorient.com/photo1.php
code de la page
Mais l'agrandissement doit se produire sur le coté et voir la zone agrandi sur la petite.
Les seul chose que j'ai trouve ce sont des script déjà prêt mais pas de méthode pour le faire sois même.
De plus je voudrais conserver le changement d'image au passage de la souris sur les miniature.
Cela fait plus de 3 semaines que je cherche mais rien, à part les scripts deja codé que je n'arrive pas à adapter pour en faire ce que je veux.
Merci.
pour le moment j'ai ceci:
http://www.larosedelorient.com/photo1.php
code de la page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>essaie photo</title>
<style type="text/css">
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 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';
}
</script>
</head>
<body>
<img name="grande_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">
<div style="clear:both;">
<p>Survoler la vignette pour l'agrandir.</p></div>
<p class="horizon"><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.grande_photo.src=grande_image.src;"></p>
<p class="horizon"><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.grande_photo.src=photo1.src;"></p>
<p class="horizon"><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.grande_photo.src=photo2.src;"></p>
<p class="horizon"><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.grande_photo.src=photo3.src;"></p>
</body>
</html>
