Tu peux l'avoir en faisant Affichage Source depuis le lien ci-dessus
Sinon voici le code (c'est un peu long)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test mouse over</title>
<style>
*
{
font-family : arial;
font-size : 12pt;
}
body
{
margin : 10px;
padding : 10px;
border : 0px;
}
.cible
{
position : relative;
float : left;
top : 500px;
padding:10px;
border-style : solid;
margin : 5px;
border-width : 1px;
}
.popup
{
position : absolute;
width : 400px;
height : 250px;
border-style : solid;
border-width : 1px;
overflow:hidden;
left : -10000px;
z-index : 100;
}
</style>
<script>
aa= 'input['+j+']['+i+']';
function Target(id, picture, width, height)
{
this.id = id;
this.ref = null;
this.width = width;
this.height = height;
this.picture = picture;
}
// Attention : offsetHeight ne fonctionne que si l'élément ne comporte ni marges, ni bordures, ni padding sinon ...
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",400,250);
function strToNumber(value)
{
var nbr = parseInt(value);
if (isNaN(nbr)) { nbr = 0;}
return nbr;
}
// Retourne la position de la souris sur la page (et pas sur l'écran !)
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;
}
// Retourne la position absolue d'un objet sur la page
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","images/AUDI_R8_1.jpg",400,350);
targetList.addTarget("cible2","images/AUDI_R8_2.jpg",400,350);
targetList.addTarget("cible3","images/AUDI_R8_3.jpg",400,350);
document.onmousemove=mouseMove;
}
</script>
</head>
<body onload="load()">
<div class="popup" id="popup"></div>
<div class="cible">
<img id="cible1" src="images/AUDI_R8_1.jpg" width="100px">
</div>
<div class="cible">
<img id="cible2" src="images/AUDI_R8_2.jpg" width="100px">
</div>
<div class="cible">
<img id="cible3" src="images/AUDI_R8_3.jpg" width="100px">
</div>
</body>
</html>
PhP
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...
Agrandir image passage souris
