Bonjour,
je sais que je suis plus passé ici depuis très longtemps, peut-être les Anciens me reconnaîtront-ils ?!
En réalité, je crée un site pour une boucherie, et, sur la page des produits, j'aimerais que lorsque l'on survole le produit, une "popup" apparaisse à côté du produit, en miniature, comme ici, mais sans tableau. J'ai adapté ceci à ma page, en remodifiant un tout petit peu afin que la popup ne soit pas centrée, mais bien qu'elle apparaisse à droite du texte. Or ça ne fonctionne pas, puisque les popup n'apparraissent pas =/ hormis en bas de la page, comme s'ils étaient déjà chargés, mais cela n'est pas très intéressant !
Voici le code HTML de la page :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Nos produits</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="general.css" rel="stylesheet" type="text/css">
<style>
div img
{
padding:0px;
margin:0px;
display:inline;
border-width:0px;
}
</style>
<script type="text/javascript">
<!--
var last_popup = null;
function getAbsY(obj)
{
var absY = 0;
var node = obj;
while (node)
{
absY += node.offsetTop;
node = node.offsetParent;
}
return absY ;
}
function getAbsX(obj)
{
var absX = 0;
var node = obj;
while (node)
{
absX += node.offsetLeft;
node = node.offsetParent;
}
return absX ;
}
function close_popup(obj)
{
obj.style.left = "-10000px";
}
function mouseOut(obj)
{
obj.className="td_out";
}
// Calcul de la hauteur interne de la fenêtre (hors menu, barre d'état etc ...)
function getInnerHeight()
{
var height=0;
if (self.innerHeight) // all except Explorer
{
height = self.innerHeight;
}
else
{
if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
height = document.documentElement.clientHeight;
}
else
{
if (document.body) // other Explorers
{
height = document.body.clientHeight;
}
}
}
return height;
}
// Calcul de la largeur interne de la fenêtre (hors menu, barre d'état etc ...)
function getInnerWidth()
{
var width=0;
if (self.innerWidth) // all except Explorer
{
width = self.innerWidth;
}
else
{
if (document.documentElement && document.documentElement.clientWidth)
// Explorer 6 Strict Mode
{
width = document.documentElement.clientWidth;
}
else
{
if (document.body) // other Explorers
{
width = document.body.clientWidth;
}
}
}
return width;
}
// Calcul de l'offset horizontal = de combien on a déplacé le curseur de l'ascenseur horizontal
function getOffsetX()
{
var offsetX =0;
if (self.pageXOffset) // all except Explorer
{
offsetX = self.pageXOffset;
}
else
{
if (document.documentElement && document.documentElement.scrollLeft)
// Explorer 6 Strict
{
offsetX = document.documentElement.scrollLeft;
}
else
{
if (document.body) // all other Explorers
{
offsetX = document.body.scrollLeft;
}
}
}
return offsetX;
}
// Calcul de l'offset vertical = de combien on a déplacé le curseur de l'ascenseur vertical
function getOffsetY()
{
var offsetY =0;
if (self.pageYOffset) // all except Explorer
{
offsetY = self.pageYOffset;
}
else
{
if (document.documentElement && document.documentElement.scrollTop)
// Explorer 6 Strict
{
offsetY = document.documentElement.scrollTop;
}
else
{
if (document.body) // all other Explorers
{
offsetY = document.body.scrollTop;
}
}
}
return offsetY;
}
function mouseOver(obj)
{
if (last_popup) last_popup.style.left = "-10000px";
obj.className="td_over";
var index = obj.id.indexOf("_");
var elt = document.getElementById("popup"+obj.id.substr(index,3));
// Code pour positionnner le popup à droite de l'objet obj
elt.style.left = (getAbsX(obj)+obj.offsetWidth+10)+"px";
elt.style.top = (getAbsY(obj))+"px";
// Code pour centrer le popup dans la page
// elt.style.left = ((getInnerWidth()-elt.offsetWidth)/2 + getOffsetX())+"px";
// elt.style.top = (((getInnerHeight()-elt.offsetHeight)/2) + getOffsetY())+"px";
// last_popup = elt;
}
//-->
</script>
</head>
<body class="general">
<div align="center">
<h2>Nos produits</h2>
<h3 align="left">Boeuf</h3>
<p align="left" onmouseover="mouseOver(this);" onmouseout="mouseOut(this);">Filet</p>
<p align="left" onmouseover="mouseOver(this);" onmouseout="mouseOut(this);">Contrefilet</p>
<p align="left" onmouseover="mouseOver(this);" onmouseout="mouseOut(this);">Entrecôte</p>
<h3 align="left">Porc</h3>
<h3 align="left">Volaille</h3>
</div>
<div id="popup_1" class="popup" onclick="close_popup(this)">
<table>
<tr>
<td>Ceci est le POPUP 1</td>
<td><img src="/_img/bouton_fermer.jpg"></td>
</tr>
<tr>
<td><img src="/_img/miniaturesviandes/filetboeuf.jpg"></td>
</tr>
</table>
</div>
<div id="popup_2" class="popup" onclick="close_popup(this)">
<table>
<tr>
<td>Ceci est le POPUP 2</td>
<td><img src="/_img/bouton_fermer.jpg"></td>
</tr>
<tr>
<td><img src="/_img/miniaturesviandes/contrefiletboeuf.jpg"></td>
</tr>
</table>
</div>
<div id="popup_3" class="popup" onclick="close_popup(this)">
<table>
<tr>
<td>Ceci est le POPUP 3</td>
<td><img src="/_img/bouton_fermer.jpg"></td>
</tr>
<tr>
<td><img src="/_img/miniaturesviandes/entrecoteboeuf.jpg"></td>
</tr>
</table>
</div>
</body>
<script language="JavaScript">
<!--
window.open = SymRealWinOpen;
//-->
</script>
</html>
<script language='JavaScript' type='text/javascript'> </script>
Un tout grand merci à celui/celle qui pourra m'éclairer :)
Luca
Onmouseover non fonctionnel ?
