plantadonf
Messages postés7Date d'inscriptionmercredi 28 mai 2003StatutMembreDernière intervention 6 juin 2005
-
27 mai 2005 à 16:09
plantadonf
Messages postés7Date d'inscriptionmercredi 28 mai 2003StatutMembreDernière intervention 6 juin 2005
-
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)
plantadonf
Messages postés7Date d'inscriptionmercredi 28 mai 2003StatutMembreDernière intervention 6 juin 2005 31 mai 2005 à 10:29
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.
plantadonf
Messages postés7Date d'inscriptionmercredi 28 mai 2003StatutMembreDernière intervention 6 juin 2005 30 mai 2005 à 09:19
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?