voila :
ifrlayer = {
make:function(obj) {
if (!obj) return; obj = (typeof(obj)=="string") ? document.getElementById(obj) : obj; if (!obj) return;
if ((document.getElementsByTagName("select").length>0 || document.getElementsByTagName("embed").length>0 || document.getElementsByTagName("object").length>0) && document.all && document.getElementById && !window.opera) {
if (obj.parentNode && !obj.iframelayer) var ifr = obj.parentNode.insertBefore(document.createElement("iframe"), obj);
else return;
if (obj.currentStyle.zIndex != "" && parseInt(obj.currentStyle.zIndex)>1 ) {
ifr.style.zIndex = parseInt(obj.currentStyle.zIndex)-1;
}
ifr.src = "about:blank";
with (ifr.style) {
filter = "alpha(opacity=0)";
position = "absolute";
width = obj.offsetWidth+"px";
height = obj.offsetHeight+"px";
}
obj.iframelayer = ifr;
ifrlayer.move(obj);
}
},
kill:function(obj) {
if (!obj) return; obj = (typeof(obj)=="string") ? document.getElementById(obj) : obj; if (!obj) return;
var ifr = obj.iframelayer;
if (ifr && ifr.parentNode) {
ifr.parentNode.removeChild(ifr);
obj.iframelayer = null;
}
},
move:function(obj) {
if (!obj || !obj.iframelayer) return;
with (obj.iframelayer.style) {
top = obj.offsetTop+"px";
left = obj.offsetLeft+"px";
}
}
}
// ***********************************************************************
// AFFICHAGE D'UNE IMAGE EN SURIMPRESSION SUR LA PAGE
// ***********************************************************************
// PARAMETRES
var _dir_images = "images/"; // répertoire de l'image à afficher
var _xlayer = (screen.width-600)/2; // position du bord gauche du layer relativement à la page
var _ylayer = (screen.height-600)/2; // position du bord haut du layer relativement à la page
var _couleur_fond = "#8db0db"; // couleur du fond
var _couleur_titre = "#000000"; // couleur du titre
var _bordure_titre = "#8db0db"; // couleur de la bordure autour du titre (pas de bordure indiquer : "")
var _police = "Verdana,Arial,Helvetica,sans serif"; // police du texte
var _bouton_fermer = "images/fermer.gif"; // bouton fermer la fenêtre en haut du layer
var _id_layer = "popup";
var _haut_titre = 25; // hauteur du titre en pixels (pour déterminer la hauteur de la zone permettant le déplacement)
// VARIABLES GLOBALES
var nn4 = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
var obj_layer = null;
var larg_image = 0; // largeur de l'image
var cache = true;
var X,Y,moveX,moveY,offsetX,offsetY;
var b_traine = false; // vrai, lorsqu'on est en train de déplacer le layer
// création de l'objet obj_layer en fonction du navigateur :
// affecte le layer et lui donne son emplacement vertical
function init_layer() {
if (dom && (document.getElementById(_id_layer))) {
obj_layer = document.getElementById(_id_layer).style;
X = iex ? "event.clientX": "e.clientX";
Y = iex ? "event.clientY" : "e.clientY";
offsetX = (iex) ? "document.body.scrollLeft" : "pageXOffset";
offsetY = (iex) ? "document.body.scrollTop" : "pageYOffset";
}
else if (iex && (_id_layer)) {
obj_layer = _id_layer.style;
X="event.clientX";
Y="event.clientY";
offsetX="document.body.scrollLeft";
offsetY="document.body.scrollTop";
}
else if (nn4 && (document.layers[_id_layer])) {
obj_layer = document.layers[_id_layer];
X="e.pageX";
Y="e.pageY";
offsetX="pageXOffset";
offsetY="pageYOffset";
document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|Event.MOUSEUP);
}
if (obj_layer) {
obj_layer.left = _xlayer;
obj_layer.top = _ylayer;
}
}
// écrit le contenu dans le layer et le rend visible
function contenu_layer(contenu) {
if (nn4) {
obj_layer.document.write(contenu);
obj_layer.document.close();
obj_layer.visibility = "visible";
}
else if (dom) {
document.getElementById(_id_layer).innerHTML = contenu;
obj_layer.visibility = "visible";
}
else if (iex) {
document.all[_id_layer].innerHTML = contenu;
obj_layer.visibility = "visible";
}
ifrlayer.make(document.getElementById(_id_layer)); //<================================ ici
}
// cache le layer (seulement s'il est visible)
function fermer() {
if (!cache) {
obj_layer.visibility = "hidden";
ifrlayer.kill(document.getElementById(_id_layer)); //<================================ ici
cache = true;
}
}
// positionne correctement le layer si on a fait défilé la page
function scroll_layer() {
if (document.all) {
obj_layer.left = parseInt(document.body.scrollLeft + _xlayer);
obj_layer.top = parseInt(document.body.scrollTop + _ylayer);
}
else {
obj_layer.left = parseInt(window.pageXOffset + _xlayer);
obj_layer.top = parseInt(window.pageYOffset + _ylayer);
}
}
// affiche le titre
function affiche_titre(texte) {
var ch_texte = "";
// si on a défini une bordure autour du titre, on entoure celui-ci de 2 tableaux imbriqués
// pour simuler une bordure : le 1er de la couleur de la bordure, le 2nd de la couleur du fond
if (_bordure_titre) {
ch_texte += "<tr><td><table width='100%' cellspacing='1' cellpadding='0' border='0' bgcolor='" + _bordure_titre + "'><tr><td>";
ch_texte += "<tr><td><table width='100%' cellspacing='0' cellpadding='0' border='0' bgcolor='" + _couleur_fond + "'><tr><td>";
}
// on écrit le titre
ch_texte += "<tr><td style='cursor:move;' align='center'" + (nn4 ? ">" : " width='100%'>") + "<font color='" + _couleur_titre + "' face='" + _police + "' size='2'><b>" + texte + "</b></font></td>";
// puis le bouton de fermeture de la fenêtre
ch_texte += "<td align='right'><a href='javascript:fermer()'><img src='" + _bouton_fermer + "' border='0'></a></td></tr>";
if (_bordure_titre) ch_texte += "</table></td></tr></table></td></tr>";
return ch_texte;
}
// affiche un sous-titre (en bas de la page)
function affiche_soustitre(texte) {
return "<tr><td align='center'" + (_bordure_titre ? " colspan='2'>" : ">") + "<font color='" + _couleur_titre + "' face='" + _police + "' size='2'>" + texte + "</font></td></tr>";
}
// affiche une image en surimpression
// avec un texte au-dessus et éventuellement un sous-titre en bas
// 4 arguments : le fichier image, sa largeur en pixels, le titre (en haut) et le sous-titre (en bas)
function agrandir_image(fimage, largeur_image, titre, soustitre) {
// reinitialise le layer
init_layer();
// si le layer existe, on affiche titre et image dans un tableau de fond _couleur_fond (défini dans les paramètres)
if (obj_layer) {
larg_image = largeur_image;
cache = false;
var ch_texte = "<table cellspacing='0' cellpadding='4' border='0' bgcolor='" + _couleur_fond + "'>";
// affiche le titre en haut
ch_texte += affiche_titre(titre);
// affiche l'image
ch_texte += "<tr><td align='center'" + (_bordure_titre ? " colspan='2'>" : ">") + "<img src='" + _dir_images + fimage + "' border='0'></td></tr>";
// affiche en bas le sous-titre s'il existe
if (soustitre) ch_texte += affiche_soustitre(soustitre);
ch_texte += "</table>";
// replace le layer, si on a fait défilé la fenêtre
scroll_layer();
// affecte ch_texte au contenu du layer
contenu_layer(ch_texte);
}
}
function exemple(textetitre) {
// reinitialise le layer
init_layer();
// si le layer existe, on affiche titre et image dans un tableau de fond _couleur_fond (défini dans les paramètres)
if (obj_layer) {
larg_image = 600;
cache = false;
var ch_texte = "<form method='post'>";
ch_texte += "<table cellspacing='0' cellpadding='0' border='1' width='600'>";
// affiche le titre en haut
ch_texte += affiche_titre(textetitre);
// affiche l'image
ch_texte += "<tr><td><table cellspacing='0' cellpadding='4' border='1' height='200' width='100%' bgcolor='#FFFFFF'>";
ch_texte += "<tr><td colspan='2' align='center'>Popup Exemple</td></tr>";
ch_texte += "<tr><td align='center'>";
ch_texte += "<table width='60%' border='0' cellspacing='0'><tr> ";
ch_texte += "<td>Indiquez le Lieu : </td>";
ch_texte += "<td align=\'right\'><input type='text' id='lieustage' name='lieustage'></td></tr>";
ch_texte += "<tr><td colspan='2' align='right'><input type='button' value='exemple'></td>";
ch_texte += "</tr></table>";
ch_texte += "</td></tr>";
ch_texte += "<tr><td align=\'center\'><a href=\'javascript:fermer()\' >Annuler et Fermer la fenetre</a><br><br></td></tr>";
ch_texte += "</table></td></tr>";
// ch_texte += "<tr><td align='center'>" + contenu + "</td></tr>";
// affiche en bas le sous-titre s'il existe
// if (soustitre) ch_texte += affiche_soustitre(soustitre);
ch_texte += "</table></form>";
// replace le layer, si on a fait défilé la fenêtre
scroll_layer();
// affecte ch_texte au contenu du layer
contenu_layer(ch_texte);
ifrlayer.make(obj_layer);
}
}
// DEPLACEMENT DU LAYER AVEC LA SOURIS
// initialisation lorsqu'on appuye sur le bouton de la souris (début du déplacement)
// l'argument "e" est nécessaire pour Netscape 4
function init_traine(e) {
if (obj_layer && !cache) {
var Xin = eval(X);
var Yin = eval(Y);
var L = parseFloat(obj_layer.left);
var T = parseFloat(obj_layer.top);
var offX = (nn4)? 0 : eval(offsetX);
var offY = (nn4)? 0 : eval(offsetY);
// détermine si la souris est dans la zone supérieure du layer
if (Xin>(L-offX) && Xin<(L-offX+larg_image) && Yin>(T-offY) && Yin<(T-offY+_haut_titre)) {
b_traine = true;
moveX=Xin-L;
moveY=Yin-T;
}
else b_traine = false;
}
else b_traine = false;
}
function stop_traine() {
if (b_traine) {
moveX = null;
moveY = null;
b_traine = false;
}
}
function traine_layer(e) {
if (b_traine) {
var Xin = eval(X);
var Yin = eval(Y);
// déplacement
obj_layer.top = Yin - moveY;
obj_layer.left = Xin - moveX;
ifrlayer.move(document.getElementById(_id_layer)); //<================================ ici
}
}
document.onmousedown=init_traine;
document.onmousemove=traine_layer;
document.onmouseup=stop_traine;
Tu remarqueras mon objet et ses 3 méthodes au dessus, je fais une tonne de tests pour n'avoir aucune erreur, ca peut paraitre lourd, mais non.
ifrlayer n'est censé fonctionner que sous IE, du fait qu'il n'y a que IE qui pose problème, donc des tests sont effectués pour savoir si on est bien sous IE. de plus s'il n'y aucun select ou aucun object dans la page, la méthode n'est pas appelée.
Ensuite je n'ai juste eu qu'a mettre me méthode à 3 endroits différents dans ton script (j'ai du comprendre le fonctionnement un peu space de ta bête
)
et normalement c'est \o/ \o/ \o/ \o/
teste et tu verras
note : ifrlayer peut servir pour tout type de script qui fait appel à un div qui doit passer au dessus de selects.
un simple appel aux methodes make et kill
et c'est bonheur.
Modifié par Gatsu35 (13 Aug 2006 - 07:48)
.
