Bonjour.
Dans ce script, une seule image (de la taille du zoom souhaité) est nécessaire.
Pensez aussi à adapter la taille du "popup" à celle de votre image.
.
Cordialement.
<style>
}
.cible
{
position : relative;
float : left;
top : 500px;
padding:10px;
border-style : solid;
margin : 5px;
border-width : 1px;
}
.popup
{
position : absolute;
width : 250px;
height : 213px;
border-style : solid;
border-width : 1px;
overflow:hidden;
left : -10000px;
z-index : 100;
}
</style>
<script>
function Target(id, picture, width, height)
{
this.id = id;
this.ref = null;
this.width = width;
this.height = height;
this.picture = picture;
}
Target.prototype.getHeight = function()
{
var elt = document.getElementById(this.id);
return elt.offsetHeight;
}
Target.prototype.getWidth = function()
{
var elt = document.getElementById(this.id);
return elt.offsetWidth;
}
function TargetList(popupId, popupWidth, popupHeight)
{
this.popupId = popupId;
this.popupWidth = popupWidth;
this.popupHeight = popupHeight;
this.items = new Array();
this.currentIndex = -1;
}
TargetList.prototype.addTarget = function(id,picture,width,height)
{
var item = new Target(id,picture,width,height);
item.index = this.items.length;
var elt = document.getElementById(id);
this.items.push(item);
}
TargetList.prototype.hidePopup = function()
{
if (this.currentIndex != -1)
{
document.getElementById(this.popupId).style.left=-10000+"px";
this.currentIndex = -1;
}
}
TargetList.prototype.selectTarget = function(index)
{
if (this.currentIndex != index)
{
if ((index >=0) && (index < this.items.length))
{
document.getElementById(this.popupId).innerHTML='<img src="'+this.items[index].picture+'">';
this.currentIndex = index;
}
}
}
TargetList.prototype.showPopup = function(x,y)
{
var elt = document.getElementById(this.popupId);
elt.style.left=x+5+"px";
elt.style.top=y-this.popupHeight+"px";
}
TargetList.prototype.findTarget = function(x,y)
{
var index = -1;
for (var i=0; i < this.items.length; i++)
{
var position = findPosition(this.items[i].id);
if ((x >= position.x) && (x < position.x+this.items[i].getWidth()) && (y >= position.y) && (y < position.y+this.items[i].getHeight()))
{
index = i;
break;
}
}
return index;
}
var targetList = new TargetList("popup",250,213);
function strToNumber(value)
{
var nbr = parseInt(value);
if (isNaN(nbr)) { nbr = 0;}
return nbr;
}
function mousePosition(e)
{
var result = new Array();
result["x"] = 0;
result["y"] = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY)
{
result["x"] = e.pageX;
result["y"] = e.pageY;
}
else if (e.clientX || e.clientY)
{
result["x"] = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
result["y"] = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
return result;
}
function findPosition(id)
{
var elt = document.getElementById(id);
var result = new Array();
result["x"] = 0;
result["y"] = 0;
while (elt)
{
result["x"] += elt.offsetLeft;
result["y"] += elt.offsetTop;
elt = elt.offsetParent;
}
return result;
}
function mouseMove(e)
{
var mouse = mousePosition(e);
index =targetList.findTarget(mouse.x,mouse.y);
if (index != -1)
{
targetList.selectTarget(index);
targetList.showPopup(mouse.x,mouse.y);
}
else
{
targetList.hidePopup();
}
}
function load()
{
targetList.addTarget("cible1","achille_grande.jpg",250,213);
document.onmousemove=mouseMove;
}
</script>
</head>
<body onload="load()">
<div class="popup" id="popup"></div>
<div class="cible">
<img id="cible1" src="achille_grande.jpg" width="100px">
</div>
</body>
</html>
TOWeb
Scripts & astuces pour votre site
Auteur
