(reprise du message précédent)
Hello Koala et les autres
Voici ma nouvelle page:
http://www.princessedunjour.com
J'ai donc repris le tuto de Michel Deboom dans le tuto javascript
J'ai l'impression que j'approche du but
Mais:
- ma page s'est allongée et depasse maintenant du cadre violet en bas... savez vous pourquoi ?
- comment positionner le pop up sur la page (là il est centré par défaut)
- quand on déscative JS, une nouvelle page apparait avec l'image agrandie.
Y a t'il un moyen de rajouter un lien "retour" qui permet à l'internaute de revenir sur la page initiale ?
Je vous remets tous mes codes
fiche-produit4.css
zoom.css
popup.js
Modifié par pp51 (03 May 2007 - 13:59)
Hello Koala et les autres
Voici ma nouvelle page:
http://www.princessedunjour.com
J'ai donc repris le tuto de Michel Deboom dans le tuto javascript
J'ai l'impression que j'approche du but
Mais:
- ma page s'est allongée et depasse maintenant du cadre violet en bas... savez vous pourquoi ?
- comment positionner le pop up sur la page (là il est centré par défaut)
- quand on déscative JS, une nouvelle page apparait avec l'image agrandie.
Y a t'il un moyen de rajouter un lien "retour" qui permet à l'internaute de revenir sur la page initiale ?
Je vous remets tous mes codes
<!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" href="fiche-produit4.css" type="text/css" />
<link rel="stylesheet" href="zoom.css" type="text/css" />
<!--[if lte IE 6]><link rel="stylesheet" href="zoom_ie.css" type="text/css" /><![endif]-->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
</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="element1">
<a href="images/orchidee-fp.jpg" class="vig" title="Collier Orchidée"><img alt="Le collier Orchidée" src="images/orchidee-fp-collier.jpg" width="90" height="90" /><span>Cliquer pour agrandir</span></a></div>
<div id="element2">
<a href="images/orchidee-fp.jpg" class="vig" title="Bracelet Orchidée"><img alt="Le bracelet Orchidée" src="images/orchidee-fp-bracelet.jpg" width="90" height="90" /><span>Cliquer pour agrandir</span></a></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>
<script type="text/javascript" src="popup.js">
</script>
</body>
</html>
fiche-produit4.css
*{margin:0;padding:0;}
body{background:url(images/background2.gif) repeat-y center top;font-family:Geneva, Arial, Tahoma, sans-serif;margin:0;padding:0;font-size: 85%;}
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;font-size:0.8em;}
#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;font-size:0.8em;}
#français{padding-left:3px;width:15px;font-size:0.8em;}
#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:0.7em;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:0.7em;}
li#menugauche{float:left; margin-left:10px;}
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:0.8em;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;font-size:0.8em;}
#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:1em;}
h3{padding-top:10px;font-weight:bold; font-size: 0.9em;}
p#composition{padding-top:10px;font-size:0.8em;}
p#coloris{padding-top:5px;font-size:0.8em;}
p#autres_coloris{padding-top:5px;font-size:0.8em;}
p#tarifs{padding-top:5px;font-size:0.8em;}
p#compo{padding-top:5px;font-size:0.8em;}
#produit1 a,#element1 a,#element2 a{font-size:0.8em;text-decoration:none;color:#666;display:table-cell;text-align:center;/*display:inline-block;*/}
#produit1 img,#element1 img,#element2 img{display:block;border-style:none;border-width:0;text-align:center;}
#acces_pagesbas{position:absolute;top:400px;right:35px;line-height:20px;font-size:0.8em;}
#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;}
p#mentions,p#partenaires{color:#666;font-size:0.7em;}
zoom.css
#pop{ /* fenêtre */
position:absolute;
cursor:move;
left:3px;
top:3px;
display:none;
z-index:200;
background-color:#FFF;
border:1px outset;
border-color:#6C3089;
}
#tet{ /* titre */
font-family:Geneva, Arial, Tahoma, sans-serif;
font-size:0.9em;
color:#6C3089;
background-color:#FFF;
padding:0 20px 0 .5em;
white-space:nowrap;
}
#croix{ /* croix pour fermer */
position:absolute;
margin:0;
border:0;
right:0;
top:0;
padding:0;
height:14px;
width:16px;
cursor:pointer;
}
/*liens avec vignette*/
a.vig:hover,a.vig:focus{background:transparent;moz-opacity:.7;opacity:.7;}
popup.js
// initialisation
D=document;gk=window.Event?1:0 //Gecko;
cpt=sx=sy=dx=dy=e=drag=lock=0
function addEvent(obj,evType,fn,capt){ // ajoute un événement sans écraser l'éxistant.
if(obj.addEventListener){obj.addEventListener(evType,fn,capt);return true;} // NS6+
else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) // IE 5+
else {return false;}
}
// correction IE : cache les éléments select
function voirSelect(v){
elem=document.getElementsByTagName('select');
if(!gk){for(i=0;i<elem.length;i++)elem[i].style.visibility=v;}
}
function grandeImage(){
voirSelect('hidden');cpt=0
//charge l'image dans le cache du navigateur.
im=new Image();im.src=this.href;
// renvoi le title
im1.title=this.title;
//infos sur la fenêtre du navigateur
fen_x=gk?innerWidth-20:db.clientWidth //l fenêtre
fen_y=gk?innerHeight:db.clientHeight //h fenêtre
sx=gk?pageXOffset:db.scrollLeft; //scroll h
sy=gk?pageYOffset:db.scrollTop; //scroll v
//montre l'entête avec le mot "patientez".
with(gdim.style){display="block";top=sy+2+'px';left=sx+2+'px'};
im1.style.display='none';lx.firstChild.data="Patientez";
actif=setTimeout('controleChargement()',300)
//désactive l'action normale du lien HTML
;return false
}
// controle le chargement de l'image
function controleChargement(){ cpt++
clearTimeout(actif); // arrête le compteur en cours
if(cpt==1&&im.height<31)alert('image absente ou erreur d\'URL')
lx.firstChild.data+="."; // ajoute "." par seconde
if(im.complete){ // image affichée en fin de chargement
with(im1){style.display='block';src=im.src;width=im.width;height=im.height;
// title reporté dans l'entête
lx.firstChild.data=im1.alt=im1.title
// centre l'image dans la fenêtre
sx=gk?pageXOffset:db.scrollLeft; //scroll h
sy=gk?pageYOffset:db.scrollTop; //scroll v
gdim.style.left=fen_x/2-gdim.offsetWidth/2+sx+'px';
gdim.style.top=fen_y/2-gdim.offsetHeight/2+sy+'px';
};
}
else actif=setTimeout('controleChargement()',1000)
}
// Création des éléments de la fausse fenêtre
// Conteneur :
gdim=D.createElement("div");D.body.appendChild(gdim);gdim.id="pop";
lx=D.createElement("div");gdim.appendChild(lx);
// Entête :
lx.appendChild(D.createTextNode(""));lx.id="tet";
avs=D.createElement("div");lx.appendChild(avs);
// Pour fermer :
avs.id="croix";avs.title="Fermer";avs.appendChild(D.createTextNode("X"));
avs.onclick=function(){gdim.style.display='none';voirSelect('visible');}
im1=D.createElement("img");gdim.appendChild(im1);
// image :
db=!D.documentElement.clientWidth?D.body:D.documentElement //quirk IE6
// fonctions de drag&drop ajoutées à gdim
gdim.onmousedown=function(){dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;return false}
gdim.onmouseup=function(){drag=0}
//évènements onclick ajoutés aux liens image
l=D.getElementsByTagName('a');
for(var i=0;i<l.length;++i){
if(l[i].href.search(/.jpg$|.jpeg$|.png$|.gif$/i)!=-1)l[i].onclick=grandeImage;
}
// déplacer l'image à la souris
addEvent(D,"mousemove",function(e){
px=gk?e.pageX:event.clientX+sx; //curseur x
py=gk?e.pageY:event.clientY+sy; //curseur y
if(drag){with(gdim.style){left=px-dx+"px";top=py-dy+"px"};return false}
}
)
// déplacer l'image au clavier
addEvent(D,"keydown",function(e){
tch=gk?e.which:event.keyCode;//alert(tch)
// avec les flèches
if(tch==40||tch==98){gdim.style.top=gdim.offsetTop+50+'px';lock=1;return false}
if(tch==38||tch==104){gdim.style.top=gdim.offsetTop-50+'px';lock=1;return false}
if(tch==37||tch==100){gdim.style.left=gdim.offsetLeft-50+'px'}
if(tch==39||tch==102){gdim.style.left=gdim.offsetLeft+50+'px'}
// cacher l'image avec la touche "Echap"
if(tch==27){gdim.style.display='none';voirSelect('visible');}
})
D.onkeypress=function(){if(lock){lock=0;return false} else return true}
//-->
Modifié par pp51 (03 May 2007 - 13:59)
. En testant ton exemple précédent, j'avais déjà beaucoup de mal mais là, chercher une erreur là-dedans, j'avoue... Je ne sais pas faire. 
En fait, j'avais commencé par indenter tout çà histoire de le rendre plus lisible. De là, je me suis aperçu que de nombreuses propriétés ne servaient pas et que d'autres étaient mal utilisées sans compter la foule de conflit entre propriétés que çà génèrait. A mon avis, tu es la seule personne à pouvoir réellement comprendre ce code sans y passer des heures et vu la manière dont c'était agencé, il devenait difficile de positionner de nouveaux éléments. Bon ben du coup, je l'ai refais... 
Comparé à ta version précédente, on gagne plus de 200 lignes lorsque le code est indenté, c'est déjà plus clair.
si ! un peu quand même... 
