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 :
<body onLoad="init()">
<DIV id="mini"><IMG NAME="minipic" SRC="promo1.jpg" width=420></DIV>
<DIV id="large"><IMG NAME="largepic" SRC="promo1.jpg" width=1260></DIV>
<DIV id="loupe"><IMG NAME="loupepic" SRC="loupe.gif"></DIV>
</body>