Salut,
Me revoilà.
Voici les codes... Comme tu vas le voir, çà a changé un peu mais le comportement s'en retrouve amélioré...
>>> Le positionnement de la popup ne pêche plus lorsque tu redimensionnes la fenêtre.
>>> Le script est devenu autonome (plus de popup dans la partie html) et réutilisable sur d'autres pages. J'ai ajouté des commentaires sur les variables que tu peux changer dans cette optique.
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Une popup accessible</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<link rel="stylesheet" type="text/css" href="fiche-produit3.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<script type="text/javascript" src="popup3.js"></script>
</head>
<body>
<div id="page">
<div id="header">
<a href="index.htm" id="Logo">
<img src="images/Logo.gif" alt="Logo Princesse d'un Jour" width="274" height="58" title="Aller à l'accueil" />
</a>
<h1><img src="images/h1.gif" alt="Bijoux et accessoires pour le mariage" /></h1>
<p id="langue">Langue</p>
<ul id="menu_langue">
<li><a id="english" title="English version" href="http://www.english.princessedunjour.com">EN</a></li>
<li><a id="français" title="version française" href="index.htm">FR</a></li>
</ul>
</div>
<div id="haut">
<ul id="menuhaut">
<li><a id="menu1" title="Aller à l'accueil" href="index.htm">ACCUEIL</a></li>
<li><a id="menu2" title="Nos collections de bijoux pour le mariage" href="collections-page1.htm">COLLECTIONS</a></li>
<li><a id="menu3" title="Trouver un point de vente" href="points-de-vente.htm">POINTS DE VENTE</a></li>
<li><a id="menu4" title="Nos secrets de fabrication" href="atelier-de-creation.htm">ATELIER DE CREATION</a></li>
<li><a id="menu5" title="Tout savoir sur Princesse d'un Jour" href="a-propos.htm">A PROPOS</a></li>
<li><a id="menu6" title="Contacter la créatrice" href="contact.htm">CONTACT</a></li>
</ul>
</div>
<div id="gauche">
<ul id="menugauche">
<li><a id="menua" title="Découvrir toute la collection" href="collections-page1.htm">TOUTE LA COLLECTION</a></li>
<li><a id="menub" title="Les modèles en perles de rocaille" href="perles-de-rocaille.htm">PERLES DE ROCAILLE</a></li>
<li><a id="menuc" title="Les modèles en perles nacrées" href="perles-nacrees.htm">PERLES NACREES</a></li>
<li><a id="menud" title="Les modèles en cristal Swarovski" href="cristal-swarovski.htm">CRISTAL SWAROVSKI</a></li>
<li><a id="menue" title="Les modèles en fleurs de soie" href="fleurs-de-soie.htm">FLEURS DE SOIE</a></li>
<li><a id="menuf" title="Les modèles en guipure brodée" href="guipure-brodee.htm">GUIPURE BRODEE</a></li>
</ul>
</div>
<div id="centre">
<div id="zone_haut">
<p class="breadcrumb">
Vous êtes ici: <a href="index.htm">Accueil</a> |<a id="coll" href="collections-page1.htm">Collection</a> |<a id="page1" href="collections-page1.htm">Page 1</a> |<a id="modele" href="parure-camelia.htm">Parure Camélia</a>
</p>
<div id="acces_pages">
<a href="parure-estella.htm">Modèle suivant</a> >
</div>
<div id="produit1">
<img src="images/orchidee-fp.jpg" alt="La Parure Camélia" width="180" height="225" />
</div>
<div id="descriptif">
<h2>Camélia</h2>
<h3>"Toute la finesse et la délicatesse de la fleur de Camélia"</h3>
<p id="composition">- Composition: Perles de rocaille à facettes et perles de verre nacrées. Fermoirs et anneaux en argent massif 925</p>
<p id="coloris">- Coloris: crème</p>
<p id="autres_coloris">- Coloris également disponibles: blanc ou autres coloris sur mesure</p>
<p id="tarifs">- Tarifs: contactez nos boutiques partenaires>> </p>
<p id="compo">- Parure composée de: Collier | Bracelet | Pics à cheveux | Boucles d'oreilles</p>
</div>
<div id="acces_pagesbas">
<a href="parure-estella.htm">Modèle suivant</a> >
</div>
</div>
</div>
<div id="pied">
<p id="mentions">
Copyright © 2006 Princesse d'un Jour. Tous droits réservés. Princesse d'un Jour® est une marque déposée.
</p>
<p id="partenaires">
Sites partenaires : <a href="http://www.noces-provencales.com">Organisation de mariage en provence</a> avec Noces-Provencales.com | <a href="http://www.notremariage.net/decouvrir.htm">NotreMariage.net</a>
</p>
</div>
</div>
</body>
</html>
CSS
*{margin:0;padding:0;}
body{background:url(images/background2.gif) repeat-y center top;font:11px/16px Geneva, Arial, Tahoma, sans-serif;margin:0;padding:0;}
img{border-style:none;border-width:0;}
#page{text-align:left;width:743px;background-color:#FFF;border:1px solid #6C3089;margin:5px auto;}
#header{height:67px;}
h1{display:inline;margin-left:15px;}
p#langue{position:absolute;display:inline;color:#666;padding-top:28px;padding-left:40px;}
#menu_langue{position:absolute;display:inline;list-style-type:none;width:40px;padding-top:30px;padding-left:80px;}
#menu_langue li{float:left;}
#menu_langue a{float:left;text-align:center;line-height:12px;color:#666;text-decoration:none;}
#menu_langue a:hover{color:#6C3089;text-decoration:underline;}
#english{width:20px;border-right:1px solid #666;}
#français{padding-left:3px;width:15px;}
#menu_langue a:focus,#menu_langue a:active{text-decoration:underline;color:#999;}
#haut{float:left;width:743px;border-top:1px solid #6C3089;border-bottom:1px solid #6C3089;margin:2px 0 0;}
ul#menuhaut{clear:both;width:100%;letter-spacing:3px;list-style-type:none;font-size:9px;text-align:center;}
#menuhaut li{float:left;}
#menuhaut a{display:block;color:#FFF;text-decoration:none;text-align:center;line-height:20px;}
#menu1{width:90px;background-color:#8E6784;color:#000;}
a#menu2{color:#6C3089;}
#menu2{width:122px;background:#FFF;}
#menu3{width:160px;background:#8E6784;}
#menu4{width:190px;background:#8E6784;}
#menu5{width:90px;background:#8E6784;}
#menu6{width:91px;background:#8E6784;}
#gauche{float:left;width:150px;list-style-type:none;text-decoration:none;line-height:35px;padding-left:5px;margin-top:25px;color:#6C3089;}
#menugauche a{text-decoration:none;color:#666;}
ul#menugauche{list-style-type:none; letter-spacing: 0.5px;font-size:10px;}
li#menugauche{float:left; margin-left:10px;padding-left:0px;}
a#menua{color:#6C3089;font-weight:900;}
#centre{float:left;height:400px;padding-top:5px;width:588px;color:#666;}
#zone_haut{position:relative;}
p.breadcrumb{position:relative;top:5px;font-size:11px;color:#666;width:150px;display:inline;}
p.breadcrumb a{color:#666;text-decoration:none;}
p.breadcrumb a:hover{text-decoration:underline;color:#6C3089;}
a#coll{padding-left: 3px;}
a#page1{padding-left: 3px;}
a#modele{padding-left: 3px;}
a#produit:hover{text-decoration:none;color:#666;}
#acces_pages{position:absolute;top:10px;right:35px;line-height:20px;}
#pages{list-style-type:none;width:100%;line-height:20px;}
#pages li{float:right;}
#pages a{float:left;text-align:center;line-height:12px;width:10px;color:#666;text-decoration:none;}
#pages a:hover{text-decoration:underline; color:#6C3089;}
a.lastpage{letter-spacing:-1px;padding-left:3px;}
#pages a.selected{font-weight:700;color:#6C3089;text-decoration:none;}
#pages a.selected:hover{text-decoration:none;}
a.firstpage{letter-spacing:-1px;padding-right:4px;}
#pages a:focus,#pages a:active,p.breadcrumb a:focus,p.breadcrumb a:active{text-decoration:underline;color:#999;}
#produit1{position:relative;display:block;top:15px;width:120px;text-decoration:none;}
#element1{position:absolute; top:290px;left:0px;}
#element2{position:absolute; top:290px;left:150px;}
#element3{position:absolute; top:290px;left:300px;}
#element4{position:absolute; top:290px;left:450px;}
#element5{position:absolute; top:290px;left:600px;}
#descriptif{position:absolute;top:31px;left:200px;}
h2{color:#6C3089;font-weight:bold; font-size: 14px;}
h3{padding-top:10px;font-weight:bold; font-size: 13px;}
p#composition{padding-top:10px;}
p#coloris{padding-top:5px;}
p#autres_coloris{padding-top:5px;}
p#tarifs{padding-top:5px;}
p#compo{padding-top:5px;}
#produit1 a,#element1 a,#element2 a,#element3 a,#element4 a,#element5 a{text-decoration:none;color:#666;display:table-cell;text-align:center;/*display:inline-block;*/}
#produit1 img,#element1 img,#element2 img,#element3 img,#element4 img, #element5 img{display:block;border-style:none;border-width:0;}
#acces_pagesbas{position:absolute;top:400px;right:35px;line-height:20px;}
#pagesbas{list-style-type:none;width:100%;line-height:20px;}
#pagesbas li{float:right;}
#pagesbas a{float:left;text-align:center;line-height:12px;width:10px;color:#666;text-decoration:none;}
#pagesbas a:hover{text-decoration:underline; color:#6C3089;}
#pagesbas a.selected{font-weight:700;color:#6C3089;text-decoration:none;}
#pagesbas a.selected:hover{text-decoration:none;}
#pied{clear:both;height:30px;text-align:center;padding-bottom:5px;}
#pied a{text-decoration:none;color:#666;}
partenaires a{color:#666;}
p#mentions,p#partenaires{color:#666;font-size:9px;}
#pops{
position: absolute;
top: 30px;
left: 200px;
height: 265px;
width: 180px;
border:1px solid #6C3089;
background-color: white;
}
#pops p{
text-align:center;
}
#pops img{
display: block;
}
.fermer {
padding-top:3px;
margin: 0 0 0 0;
border-top: 1px solid black;
background: white url(images/bottom.gif) left top repeat-x;
color: black;
}
Javascript
function __enhance__()
{
if( !document.getElementById ||
!document.createElement ||
!document.createTextNode ) return false;
var elem = new pop.__method__;
return elem.__init__(
// On repère l'id du conteneur dans lequel on va insérer nos éléments
'zone_haut',
// On insère le lien image et la popup avant l'élément possédant l'id suivant :
'acces_pagesbas',
// On définit l'id du conteneur qui contient le lien qui génère la popup
'element1',
// Source de l'image (lien)
'images/orchidee-fp-collier.jpg',
// Largeur réelle de l'image (lien)
'90',
// Hauteur réelle de l'image (lien)
'90',
// Texte alternatif de l'image (lien)
'photo',
// Titre (popup)
'collier Orchidée',
// Source de l'image (popup)
'images/orchidee-fp.jpg',
// Largeur réelle de l'image (popup)
'180',
// Hauteur réelle de l'image (popup)
'225',
// Texte alternatif de l'image (popup)
'La Parure Camélia'
);
}
window.onload = __enhance__;
var pop =
{
__method__: function() {}
};
pop.__method__.prototype.__init__ = function(par,id,idRep,srcMimg,widMimg,heiMimg,altMimg,txtH3,srcGimg,widGimg,heiGimg,altGimg)
{
var d = document,
oCont = d.getElementById(par),
oRep = d.getElementById(id),
oMdiv = d.createElement('div'),
oA = d.createElement('a'),
oMimg = d.createElement('img'),
oSpan = d.createElement('span'),
oTxtSpan = d.createTextNode('Cliquer pour agrandir'),
oGdiv = d.createElement('div'),
oH3 = d.createElement('h3'),
oTxtH3 = d.createTextNode(txtH3),
oGimg = d.createElement('img'),
oP = d.createElement('p'),
oTxtP = d.createTextNode('Fermer la boite en cliquant dessus');
oMdiv.setAttribute('id',idRep);
oA.setAttribute('href','#');
oMimg.setAttribute('src',srcMimg);
oMimg.setAttribute('width',widMimg);
oMimg.setAttribute('height',heiMimg);
oMimg.setAttribute('alt',altMimg);
oGdiv.setAttribute('id','pops');
oGimg.setAttribute('src',srcGimg);
oGimg.setAttribute('width',widGimg);
oGimg.setAttribute('height',heiGimg);
oGimg.setAttribute('alt',altGimg);
oGdiv.style.display = 'none';
oA.onclick = pop.__method__.prototype.__Pop__;
oGdiv.onclick = pop.__method__.prototype.__Pop__;
oSpan.appendChild(oTxtSpan);
oA.appendChild(oMimg);
oA.appendChild(oSpan);
oMdiv.appendChild(oA);
oH3.appendChild(oTxtH3);
oP.appendChild(oTxtP);
oGdiv.appendChild(oH3);
oGdiv.appendChild(oGimg);
oGdiv.appendChild(oP);
oCont.insertBefore(oMdiv,oRep);
oCont.insertBefore(oGdiv,oRep);
};
pop.__method__.prototype.__Pop__ = function()
{
var oPop = document.getElementById('pops');
if( oPop.style.display == 'none' )
oPop.style.display = 'block';
else
oPop.style.display = 'none';
return false;
};
A noter que tu as encore quelques erreurs... à savoir, par exemple, que dans ton CSS, les dimensions d'écritures sont définies en px, ce qui ne permet pas le redimensionnement sous IE. Pour bien faire, je te conseille de définir une taille en % sur le body puis de définir les écritures de chaque élément en em. Ainsi, le résultat est approximativement le même quelquesoit le navigateur et lorsque tu diminues la taille des polices au minimum, celles-ci restent lisibles...
Il y a aussi certaines de tes
div qui me semblent inutiles...
Modifié par koala64 (28 Jul 2006 - 19:19)
alors que le but premier est quand même que tout le monde voit au minimum toutes les photos des produits ?