Un effet de loupe sur une image? [Résolu]

plantadonf 7 Messages postés mercredi 28 mai 2003Date d'inscription 6 juin 2005 Dernière intervention - 27 mai 2005 à 16:09 - Dernière réponse : plantadonf 7 Messages postés mercredi 28 mai 2003Date d'inscription 6 juin 2005 Dernière intervention
- 31 mai 2005 à 10:29
Bonjour, j'ai des grandes images à mettre sur un site (1102 * 780 pixels)
J'ai réussi à faire un zoom sur une partie de l'image en javascript (avec gestion du déplacement de la souris sur la miniature) Ce zoom s'affichant à côté de ma miniature.
Problème, j'aimerai faire apparaître le zoom en question sous le pointeur de la souris, comme si on passait une loupe sur l'image.
Comment faire pour afficher mon zoom à l'endroit où se situe la souris, et le faire bouger avec elle?

ça fait plus d'une journée que je suis dessus, je débute en Javascript (et en programmation en général) et je commence à m'arracher les cheveux...
Est-ce au moins faisable, je n'en suis même pas sûre...

merci de m'aider

Je copie/colle le code, au cas où ça pourrait aider...
le script :
<SCRIPT LANGUAGE="JavaScript">
var isNav, isIE
var offsetX, offsetY
var selectedObj

var enlargefactor=3

var largewidth = 1260
var largeheight = 891
var largeleft = 430
var largetop = 0


var miniwidth = Math.floor(largewidth/enlargefactor)
var miniheight = Math.floor(largeheight/enlargefactor)
var minileft = 0
var minitop = 0


var loupewidth = 116
var loupeheight = 99
var loupeleft = 0
var loupetop = 0


var difleft= largeleft-minileft
var diftop= largetop-minitop


var clippoints
var cliptop = (miniheight-loupeheight)*enlargefactor
var clipbottom = cliptop+(loupeheight*enlargefactor)
var clipleft =(miniwidth-loupewidth)*enlargefactor
var clipright = clipleft+(loupewidth*enlargefactor)


if (parseInt(navigator.appVersion) >= 4) { if (navigator.appName "netscape") {isNav true} else {isIE = true}
}


function setZIndex(obj, zOrder) {
obj.zIndex = zOrder
}


function shiftTo(obj, x, y) {
if (isNav) {obj.moveTo(x,y)}
else {obj.pixelLeft = x
obj.pixelTop = y
}
cliptop = (y-minitop)*enlargefactor
clipbottom = cliptop+(loupeheight*enlargefactor)
clipleft = (x-minileft)*enlargefactor
clipright = clipleft+(loupewidth*enlargefactor)


if (document.all)
{
clippoints ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
document.all.large.style.posTop=largetop-cliptop
document.all.large.style.posLeft=largeleft-clipleft
document.all.large.style.clip=clippoints
}


if (document.layers)
{
document.large.top=largetop-cliptop
document.large.left=largeleft-clipleft
document.large.clip.left = clipleft
document.large.clip.right = clipright
document.large.clip.top = cliptop
document.large.clip.bottom = clipbottom
}
}


function setSelectedElem(evt)
{
if (isNav)
{
var testObj
var clickX = evt.pageX
var clickY = evt.pageY


for (var i = document.layers.length - 1; i >= 0; i--)
{
testObj = document.layers[i]


if ((clickX > testObj.left) &&
(clickX < testObj.left + testObj.clip.width) &&
(clickY > testObj.top) &&
(clickY < testObj.top + testObj.clip.height))
{
selectedObj = testObj
setZIndex(selectedObj, 100)
return
}
}
}
else
{
var imgObj = window.event.srcElement


if (imgObj.parentElement.id.indexOf("loupe") != -1)
{
selectedObj = imgObj.parentElement.style
setZIndex(selectedObj,100)
return
}
}


selectedObj = null
return
}


function dragIt(evt)
{
if (selectedObj)
{
if (isNav)
{
shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
}
else
{
shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY -
offsetY))
return false
}
}
}


function engage(evt) {
setSelectedElem(evt)


if (selectedObj) {
if (isNav) {
offsetX = evt.pageX - selectedObj.left
offsetY = evt.pageY - selectedObj.top
}
else {
offsetX = window.event.offsetX
offsetY = window.event.offsetY
}
}
return false
}


function release(evt) {
if (selectedObj) {
setZIndex(selectedObj, 0)
selectedObj = null
}
}


function setNavEventCapture() {
if (isNav) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
}


function init()
{
if (document.layers)
{
document.large.left=largeleft
document.large.top=largetop


document.mini.left=minileft
document.mini.top=minitop


document.loupe.left=loupeleft
document.loupe.top=loupetop


document.large.clip.left = 0
document.large.clip.right = 0
document.large.clip.top = 0
document.large.clip.bottom = 0


setNavEventCapture()


}


if (document.all)
{
document.all.large.style.posLeft=largeleft
document.all.large.style.posTop=largetop


document.all.mini.style.posLeft=minileft
document.all.mini.style.posTop=minitop

document.all.loupe.style.posLeft=loupeleft
document.all.loupe.style.posTop=loupetop
document.all.large.style.clip="rect(0 0 0 0)"
}


document.onmousedown = engage
document.onmousemove = dragIt
document.onmouseup = release


}


</SCRIPT>

et pour le BODY :
Afficher la suite 

Votre réponse

4 réponses

Meilleure réponse
plantadonf 7 Messages postés mercredi 28 mai 2003Date d'inscription 6 juin 2005 Dernière intervention - 31 mai 2005 à 10:29
3
Merci
Je réponds à mon propre message, ça pourra peut-être en aider certains...



//promo1_24 est l'image miniature




//width et height est la taille de la zone nécessaire à l'affichage de la loupe

//zoom1 car l'image utilisée ici est l'image taille réelle (promo1)


l
//pour la loupe le caractère ci dessus est un rond dans la police wingdings








screen.bufferDepth = 16 //pour la qualité de l'affichagenx ny xm = ym = H = W = 0 //initialisation des valeurs à 0 dans l'ordre : résolution de l'utilisateur, coordonnée de la position de la souris sur la miniature, taille de la miniature.


document.onmousemove = function (){ //calcule les coordonnées de la souris sur la miniature
xm = window.event.x - (nx-W)/2
ym = window.event.y - (ny-H)/2
}


function resize(){ //calcule la position de l'image miniature (centrée sur l'écran)
nx = document.body.offsetWidth
ny = document.body.offsetHeight
with(SPAN.style){
width = W
height = H
left = (nx - W) * .5
top = (ny - H) * .5
}
}


function run(){
LZ1.style.left = xm - 115 //calcule la position d'affichage de la zone contenant la loupe
LZ1.style.top = ym - 160
LZ1.firstChild.style.left = 115 - xm * 2.4 //calcule la position d'affichage de la loupe (intérieur de la loupe, zone agrandie)
LZ1.firstChild.style.top = 160 - ym * 2.4
LZ1.children[1].style.background = 0 //supression du background par défaut
LZ1.children[1].children[1].style.left = 115 - xm //calcule la position d'affichage de la zone loupe (excepté la loupe elle même)
LZ1.children[1].children[1].style.top = 160 - ym
setTimeout("run()",16)
}
function demarre(){
H = IMG.height //taille de l'image miniature définie dans le BODY
W = IMG.width
LZ1.children[1].children[1].src = IMG.src //utilisation de l'image miniature définie dans le BODY pour l'affichage de LZ1 excepté l'intérieur du cercle
LZ1.firstChild.src = "promo1.jpg" //utilisation de l'image taille réelle pour l'affichage à l'intérieur de la loupe (dans LZ1)
resize()
run()
}






// Nota : la taille de l'image taille réelle est ici 2,4 fois celle de la miniature (cf fonction run)
// Ce script permet de garder une image de haute qualité pour l'agrandissement --> pas de pixellisation, détails conservés.

Merci plantadonf 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 93 internautes ce mois-ci

Commenter la réponse de plantadonf
plantadonf 7 Messages postés mercredi 28 mai 2003Date d'inscription 6 juin 2005 Dernière intervention - 27 mai 2005 à 16:10
0
Merci
désolée pour cet énorme pavé...
Commenter la réponse de plantadonf
la_pin 277 Messages postés mercredi 11 août 2004Date d'inscription 15 décembre 2005 Dernière intervention - 27 mai 2005 à 18:34
0
Merci
Je ne puis te conseiller que ce magnifique script !

<html><head>
<title>Magnify/Clip Div</title>
<style type="text/css"><!--
.pic {position:absolute;top:10px;left:10px;cursor:hand;
width:95px;height:115px;border:none;}
.mag {position:absolute;top:10px;left:100px;width:95px; height:115px;visibility:hidden;z-index:2;}
.mnu{position:absolute;background-color:linen;color:black;
top:5px;left:195px;width:213px;height:275px;
border-style:groove;visibility:visible;z-index:1;}
--></style>
<script language="JavaScript"><!--
var ie = document.all?true:false;
var z=2;
function startClip() {
if (!ie) {document.captureEvents(Event.MOUSEMOVE);}
document.getElementById('pic').onmousemove = getMouseXY;
}
function stopClip() {
document.getElementById('loupe').style.visibility='hidden';
}var Xpos 0; var Ypos 0;
function getMouseXY(e) {
if (ie) {
Xpos = event.clientX + document.body.scrollLeft -10;
Ypos = event.clientY + document.body.scrollTop -10;} else {Xpos e.pageX-10; Ypos e.pageY-10;}
if ((Xpos<0) || (Xpos>95) || (Ypos<0) || (Ypos>115)) {
stopClip();}
else {
//selected zoom
if (scale[0].checked) {z=2;}
if (scale[1].checked) {z=3;}
if (scale[2].checked) {z=4;}
document.getElementById('zoomedpic').style.width=z*95+'px';
document.getElementById('zoomedpic').style.height=z*115+'px';
document.getElementById('loupe').style.width=z*95+'px';
document.getElementById('loupe').style.height=z*115+'px';
document.getElementById('loupe').style.left=200-(z*Xpos)+100+'px';
document.getElementById('loupe').style.top=10-(z*Ypos)+100+'px';
document.getElementById('loupe').style.clip='rect('+(z*Ypos-100)+'px '+(z*Xpos+100)+'px '+(z*Ypos+100)+'px '+(z*Xpos-100)+'px)';
document.getElementById('loupe').style.visibility='visible';
}}
--></script></head>

Free CSS/JavaScript provided by ©2004-VB'Breizh

Move the mouse over this picture

<center>ZOOM value

200%

300%

400%</center>

</html>

Script tiré de http://gilles.saunier.free.fr/scripts/divzoom.html

Merci d'accepter ma réponse si elle te convient !

L'homme n'est pas fait pour travailler, la preuve, ça le fatigue Voltaire
Commenter la réponse de la_pin
plantadonf 7 Messages postés mercredi 28 mai 2003Date d'inscription 6 juin 2005 Dernière intervention - 30 mai 2005 à 09:19
0
Merci
ce script fonctionne à merveille en effet, mais je cherchais à "reproduire" un effet de loupe, c'est à dire un agrandissement sous le pointeur de la souris.
Quelqu'un peut-il me dire si celà est au moins faisable en Javascript, ou si il vaut mieux que je cherche une autre solution?

merci
Commenter la réponse de plantadonf

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.