<!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>
Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.
