CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 13:34:22

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

DIV/LAYER MOBILE COMME UNE FENETRE

Information sur la source

Note :

7,60 / 10

Catégorie :Frames Niveau :Initié Date de création :08/06/2003 Date de mise à jour :08/06/2003 16:29:39 Vu / téléchargé :16 389 / 1 302

Auteur : lumesh

Ecrire un message privé

Site perso

Commentaire sur cette source (6)

Ajouter un commentaire et/ou une note

Description

J'ai monté ce script avec plein de bout de code trouver ici et la.
ce script permet de creer une fenetre deplacable avec la souris avec les leyers.
le script est compatible ie4 et + , ns4 et + .

pour deplacer cette fenetre utilisez la barre marron (barre de titre, meme deplaement qu'une fenetre OS).
pour afficher une image dans cette fenetre liquez sur un lien image1.gif ou image2.gif.
pour cacher l'image chargée, cliquez sur O ds la barre de titre (idem pour la faire reaparaitre)

le script n'est pas commenté mais le bloque est tres facilement utilisable pour tout vos sites.
le style de la fenetre est modifiable via du code html assez simplement.

Source

<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
<title>dsdsd</title>
<style>
<!--
.drag {
position:relative; cursor:hand
}
//-->
.barre_titre {
background-color:#FFFFFF; position:absolute; top:0; left:0;
}
.barre_contenu {
position:absolute; top:30; left:0; background-color:#FFFFFF;
}
.table_titre {
border-width:1px; border-color:rgb(102,102,102); border-style:solid;
}
.table_contenu {
border-width:1px; border-color:rgb(102,102,102); border-style:solid;
}
</style>
<script language='JavaScript'>
var dom = (document.getElementById)? true:false;
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
var dd_mode='';
function onoffdisplay(){
if (ie4) {
if (cadre_contenu.style.display=='') cadre_contenu.style.display='none'
else cadre_contenu.style.display=''
}else if (dom) {
if (document.getElementById('cadre_contenu').style.display=='') document.getElementById('cadre_contenu').style.display='none'
else document.getElementById('cadre_contenu').style.display=''
}else if (ns4) {
if (document.layers.cadre_contenu.visibility=='show') document.layers.cadre_contenu.visibility='hide'
else document.layers.cadre_contenu.visibility='show'
}
}
function changer_image(ima) {
if (ie4) {
visual.src=ima;
cadre_contenu.style.display=''
}else if (dom) {
document.getElementById('visual').src=ima;
document.getElementById('cadre_contenu').style.display=''
}else if (ns4) {
document.layers.visual.visibility=ima;
document.layers.cadre_contenu.visibility='show'
}
}
function start() {
var h=100;
if (ie4) {
var w=document.body.clientWidth-200;
w=50;
cadre_barre.style.left=w;
cadre_barre.style.top=h;
cadre_contenu.style.left=w;
cadre_contenu.style.top=h+30;
cadre_contenu.style.display='none';
cadre_barre.onmousedown=beginDrag;
}else if (dom) {
var w=window.outerWidth-200;
w=0
document.getElementById('cadre_barre').style.left=w;
document.getElementById('cadre_barre').style.top=h;
document.getElementById('cadre_contenu').style.left=w;
document.getElementById('cadre_contenu').style.top=h+30;
document.getElementById('cadre_contenu').style.display='none';
document.getElementById('cadre_barre').addEventListener('mousedown',beginDrag, false);
}else if (ns4) {
var w=window.outerWidth-200;
w=0
document.layers.cadre_barre.left=w;
document.layers.cadre_barre.top=h;
document.layers.cadre_contenu.left=w;
document.layers.cadre_contenu.top=h+30;
document.layers.cadre_contenu.visibility='hide'
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=beginDrag;
}
}
function doDrag(e) {
if (ie4) {
var difX=event.clientX-window.lastX;
var difY=event.clientY-window.lastY;
var newX1 = parseInt(cadre_barre.style.left)+difX;
var newY1 = parseInt(cadre_barre.style.top)+difY;
cadre_barre.style.left=newX1+'px';
cadre_barre.style.top=newY1+'px';
cadre_contenu.style.left=newX1+'px';
cadre_contenu.style.top=newY1+30+'px';
window.lastX=event.clientX;
window.lastY=event.clientY;
}else if (dom) {
var difX=e.clientX-window.lastX;
var difY=e.clientY-window.lastY;
var newX1 = parseInt(document.getElementById('cadre_barre').style.left)+difX;
var newY1 = parseInt(document.getElementById('cadre_barre').style.top)+difY;
document.getElementById('cadre_barre').style.left=newX1+'px';
document.getElementById('cadre_barre').style.top=newY1+'px';
document.getElementById('cadre_contenu').style.left=newX1+'px';
document.getElementById('cadre_contenu').style.top=newY1+30+'px';
window.lastX=e.clientX;
window.lastY=e.clientY;
}else if (ns4) {
var difX=e.pageX-window.lastX;
var difY=e.pageY-window.lastY;
var newX1 = parseInt(document.layers.cadre_barre.left)+difX;
var newY1 = parseInt(document.layers.cadre_barre.top)+difY;
document.layers.cadre_barre.left=newX1;
document.layers.cadre_barre.top=newY1;
document.layers.cadre_contenu.left=newX1;
document.layers.cadre_contenu.top=newY1+30;
window.lastX=e.pageX;
window.lastY=e.pageY;
}
}
function beginDrag(e) {
if (ie4) {
window.lastX=event.clientX;
window.lastY=event.clientY;
document.onmousemove=doDrag;
document.onmouseup=endDrag;
// if (event.srcElement.id=='cadre_barre'){
// Récup de l'Id d'un élément sous IE
// }
}else if (dom) {
window.lastX=e.clientX;
window.lastY=e.clientY;
window.onmousemove=doDrag;
window.onmouseup=endDrag;
myattr=e.target.getAttribute('ID');
// if(myattr=='cadre_barre') {
// Récup de l'ID d'un élément sous NS6
// }
}else if (ns4) {
window.lastX=e.pageX;
window.lastY=e.pageY;
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=doDrag;
document.captureEvents(Event.MOUSEUP)
document.onmouseup=endDrag;
}
}
function endDrag(e) {
if (ie4 || ns4) {
document.onmousemove=null;
}else if (dom) {
window.onmousemove=null;
}else if (ns4) {
alert('endDrag');
document.onmousemove=null;
}
}
</script>
</head>
<body bgcolor='white' text='black' link='blue' vlink='purple' alink='red' onload='start();'>
<p><script language='JavaScript'>
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
var dom = (document.getElementById)? true:false;
if ((dom) || (ie4)) {
document.write("<div id='cadre_barre' class='barre_titre'><table class='table_titre' cellpadding='5' cellspacing='0' width='310'><tr><th width='275' height='19' valign='middle' nowrap bgcolor='#CC9900'><p>ici pour deplacer la mini fenetre</p></th><th width='15' height='19' valign='middle' nowrap bgcolor='#CC9900'><p><a href='#' onclick='onoffdisplay();'><font color='red'>O</font></a></p></th></tr></table></div>");
document.write("<div id='cadre_contenu' class='barre_contenu'><table class='table_contenu' cellpadding='5' cellspacing='0' width='310'><tr><td width='300' height='263' align='center' valign='middle' colspan='2' bgcolor='white'><p><img id='visual' src='' border='0'></p></td></tr></table></div>");
} else if (ns4) {
document.write("<layer id='cadre_barre' class='barre_titre'><table class='table_titre' cellpadding='5' cellspacing='0' width='310'><tr><th width='275' height='19' valign='middle' nowrap bgcolor='#CC9900'><p>ici pour deplacer la mini fenetre</p></th><th width='15' height='19' valign='middle' nowrap bgcolor='#CC9900'><p><a href='#' onclick='onoffdisplay();'><font color='red'>O</font></a></p></th></tr></table></layer>");
document.write("<layer id='cadre_contenu' class='barre_contenu'><table class='table_contenu' cellpadding='5' cellspacing='0' width='310'><tr><td width='300' height='263' align='center' valign='middle' colspan='2' bgcolor='white'><p><img id='visual' src='' border='0'></p></td></tr></table></layer>");
}
</script>
</p>
<p><a href="#" onclick="changer_image('1.gif');">image 1 .gif</a></p>
<p><a href="#" onclick="changer_image('2.gif');">image 2 .gif</a></p>
</body>
</html>

<html>

<head>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
<title>dsdsd</title>

<style>
	<!--
		.drag {
			position:relative; cursor:hand	
		}
	//-->
	.barre_titre {
		background-color:#FFFFFF; position:absolute; top:0; left:0;
	}
	.barre_contenu {
		position:absolute; top:30; left:0; background-color:#FFFFFF;
	}
	.table_titre {
		border-width:1px; border-color:rgb(102,102,102); border-style:solid;
	}
	.table_contenu {
		border-width:1px; border-color:rgb(102,102,102); border-style:solid;
	}
	
</style>

<script language='JavaScript'>
var dom = (document.getElementById)? true:false;
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
var dd_mode='';

function onoffdisplay(){
	if (ie4) {
		if (cadre_contenu.style.display=='') cadre_contenu.style.display='none'
		else cadre_contenu.style.display=''
	}else	if (dom) {
		if (document.getElementById('cadre_contenu').style.display=='') document.getElementById('cadre_contenu').style.display='none' 
		else document.getElementById('cadre_contenu').style.display=''
	}else	if (ns4) {
		if (document.layers.cadre_contenu.visibility=='show') document.layers.cadre_contenu.visibility='hide' 
		else document.layers.cadre_contenu.visibility='show'
	}
}

function changer_image(ima) {
	if (ie4) {
		visual.src=ima;
		cadre_contenu.style.display=''
	}else	if (dom) {
		 document.getElementById('visual').src=ima;
		 document.getElementById('cadre_contenu').style.display=''
	}else	if (ns4) {
		document.layers.visual.visibility=ima;
		document.layers.cadre_contenu.visibility='show'
	}	
}

function start() {
	var h=100;
 	if (ie4) {
		var w=document.body.clientWidth-200;
		w=50;
		cadre_barre.style.left=w;
		cadre_barre.style.top=h;
		cadre_contenu.style.left=w;
		cadre_contenu.style.top=h+30;
		cadre_contenu.style.display='none';
		cadre_barre.onmousedown=beginDrag;
	}else if (dom) {
		var w=window.outerWidth-200;
		w=0
		document.getElementById('cadre_barre').style.left=w;
		document.getElementById('cadre_barre').style.top=h;
		document.getElementById('cadre_contenu').style.left=w;
		document.getElementById('cadre_contenu').style.top=h+30;
		document.getElementById('cadre_contenu').style.display='none';
		document.getElementById('cadre_barre').addEventListener('mousedown',beginDrag, false);
	}else if (ns4) {
		var w=window.outerWidth-200;
		w=0
		document.layers.cadre_barre.left=w;
		document.layers.cadre_barre.top=h;
		document.layers.cadre_contenu.left=w;
		document.layers.cadre_contenu.top=h+30;
		document.layers.cadre_contenu.visibility='hide'
		document.captureEvents(Event.MOUSEDOWN);
		document.onmousedown=beginDrag;
	}
}

function doDrag(e) {
	if (ie4) {
		var difX=event.clientX-window.lastX;
	   var difY=event.clientY-window.lastY;
		var newX1 = parseInt(cadre_barre.style.left)+difX;
	   var newY1 = parseInt(cadre_barre.style.top)+difY;
	   cadre_barre.style.left=newX1+'px';
	   cadre_barre.style.top=newY1+'px';
	   cadre_contenu.style.left=newX1+'px';
	   cadre_contenu.style.top=newY1+30+'px';
	   window.lastX=event.clientX;
	   window.lastY=event.clientY;
	}else if (dom) {
		var difX=e.clientX-window.lastX;
	   var difY=e.clientY-window.lastY;
		var newX1 = parseInt(document.getElementById('cadre_barre').style.left)+difX;
	   var newY1 = parseInt(document.getElementById('cadre_barre').style.top)+difY;
	   document.getElementById('cadre_barre').style.left=newX1+'px';
	   document.getElementById('cadre_barre').style.top=newY1+'px';
	   document.getElementById('cadre_contenu').style.left=newX1+'px';
	   document.getElementById('cadre_contenu').style.top=newY1+30+'px';
	   window.lastX=e.clientX;
	   window.lastY=e.clientY;
	}else if (ns4) {
		var difX=e.pageX-window.lastX;
	   var difY=e.pageY-window.lastY;
		var newX1 = parseInt(document.layers.cadre_barre.left)+difX;
	   var newY1 = parseInt(document.layers.cadre_barre.top)+difY;
	   document.layers.cadre_barre.left=newX1;
	   document.layers.cadre_barre.top=newY1;
	   document.layers.cadre_contenu.left=newX1;
	   document.layers.cadre_contenu.top=newY1+30;
	   window.lastX=e.pageX;
	   window.lastY=e.pageY;
	} 
}

function beginDrag(e) {
	if (ie4) {
		window.lastX=event.clientX;
	   window.lastY=event.clientY;
	   document.onmousemove=doDrag;
	   document.onmouseup=endDrag;
//		if (event.srcElement.id=='cadre_barre'){
//			Récup de l'Id d'un élément sous IE
//		}
	}else if (dom) {
		window.lastX=e.clientX;
	   window.lastY=e.clientY;
	   window.onmousemove=doDrag;
	   window.onmouseup=endDrag;
		myattr=e.target.getAttribute('ID');
//		if(myattr=='cadre_barre') {
//			Récup de l'ID d'un élément sous NS6
//		}
	}else if (ns4) {
		window.lastX=e.pageX;
	   window.lastY=e.pageY;
	   document.captureEvents(Event.MOUSEMOVE)
	   document.onmousemove=doDrag;
	   document.captureEvents(Event.MOUSEUP)
	   document.onmouseup=endDrag;
	}
}

function endDrag(e) {
	 if (ie4 || ns4) {
	 	document.onmousemove=null;
	 }else if (dom) {
		window.onmousemove=null;
	}else if (ns4) {
		alert('endDrag');
		document.onmousemove=null;
	}
}

</script>


</head>

<body bgcolor='white' text='black' link='blue' vlink='purple' alink='red'  onload='start();'>

<p><script language='JavaScript'>
	var ns4 = (document.layers)? true:false;
	var ie4 = (document.all)? true:false;
	var dom = (document.getElementById)? true:false;
	if ((dom) || (ie4)) {
		document.write("<div id='cadre_barre' class='barre_titre'><table class='table_titre' cellpadding='5' cellspacing='0' width='310'><tr><th width='275' height='19' valign='middle' nowrap bgcolor='#CC9900'><p>ici pour deplacer la mini fenetre</p></th><th width='15' height='19' valign='middle' nowrap bgcolor='#CC9900'><p><a href='#' onclick='onoffdisplay();'><font color='red'>O</font></a></p></th></tr></table></div>");
		document.write("<div id='cadre_contenu' class='barre_contenu'><table class='table_contenu' cellpadding='5' cellspacing='0' width='310'><tr><td width='300' height='263' align='center' valign='middle' colspan='2' bgcolor='white'><p><img id='visual' src='' border='0'></p></td></tr></table></div>");
	} else if (ns4) {
		document.write("<layer id='cadre_barre' class='barre_titre'><table class='table_titre' cellpadding='5' cellspacing='0' width='310'><tr><th width='275' height='19' valign='middle' nowrap bgcolor='#CC9900'><p>ici pour deplacer la mini fenetre</p></th><th width='15' height='19' valign='middle' nowrap bgcolor='#CC9900'><p><a href='#' onclick='onoffdisplay();'><font color='red'>O</font></a></p></th></tr></table></layer>");
		document.write("<layer id='cadre_contenu' class='barre_contenu'><table class='table_contenu' cellpadding='5' cellspacing='0' width='310'><tr><td width='300' height='263' align='center' valign='middle' colspan='2' bgcolor='white'><p><img id='visual' src='' border='0'></p></td></tr></table></layer>");
	}
</script>





</p>
<p><a href="#" onclick="changer_image('1.gif');">image 1 .gif</a></p>
<p><a href="#" onclick="changer_image('2.gif');">image 2 .gif</a></p>
</body>

</html>

Conclusion

un ptit zip est dispo et fonctionnel.
perso jai testé sous IE5 et ns6 et ca marche impec (ce dont je suis plutot content).

voila voilou.
Christophe.

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

1.gif 21 833 octets
2.gif 23 323 octets
layzemobile.htm 7 254 octets

Télécharger le zip

Sources du même auteur

DIV: VRAI FAUSSE FENETRE

MENU DHTML : PAS BIEN SORCIER MAIS PRATIQUE A SAVOIR

Toutes les sources de lumesh

Sources de la même categorie

DIAPORAMA SIMPLE PAR IFRAME par sartoz

CHARGER UNE PAGE WEB DANS UN DIV par flk974

DYNAMIC CONTENT DANS UNE DIV par duterte

INCLUDE EN JAVASCRIPT par yousfane

PASSER DE FRAMES A UNE PAGE par David78390

Toutes les sources de la catégorie Frames

Commentaires et avis

Commentaire de ThunderPsycho le 09/06/2003 14:04:10

mouai c pas mal et c fluide, a exploiter... 9/10

Commentaire de Marcial le 06/04/2006 09:23:07

Bon code...
J'ai mis 8 car on sent l'effort et la recherche.
(sinon cela mérite un 7)
J'aurais mis 9/10 si le calque permettant le déplacement avait été dans le calque déplacé...

ce qui aurais donné le code suivant...

<html>

<head>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
<title>dsdsd</title>

<style>
    
    .barre_titre {
        background-color:#FFFFFF; position:absolute; top:0; left:0;
    }
    .barre_contenu {
        position:absolute; top:30; left:0; background-color:#FFFFFF;
    }
    .table_titre {
        border-width:1px; border-color:rgb(102,102,102); border-style:solid;
    }
    .table_contenu {
        border-width:1px; border-color:rgb(102,102,102); border-style:solid;
    }

</style>

<script language='JavaScript'>
var dom = (document.getElementById)? true:false;
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
var dd_mode='';

function onoffdisplay(){
    if (ie4) {
        if (cadre_contenu.style.display=='') cadre_contenu.style.display='none'
        else cadre_contenu.style.display=''
    }else    if (dom) {
        if (document.getElementById('cadre_contenu').style.display=='') document.getElementById('cadre_contenu').style.display='none'
        else document.getElementById('cadre_contenu').style.display=''
    }else    if (ns4) {
        if (document.layers.cadre_contenu.visibility=='show') document.layers.cadre_contenu.visibility='hide'
        else document.layers.cadre_contenu.visibility='show'
    }
}

function changer_image(ima) {
    if (ie4) {
        visual.src=ima;
        cadre_contenu.style.display=''
    }else    if (dom) {
         document.getElementById('visual').src=ima;
         document.getElementById('cadre_contenu').style.display=''
    }else    if (ns4) {
        document.layers.visual.visibility=ima;
        document.layers.cadre_contenu.visibility='show'
    }
}

function start() {
    var h=100;
     if (ie4) {
        var w=document.body.clientWidth-200;
        w=50;
        cadre_barre.style.left=w;
        cadre_barre.style.top=h;
        cadre_contenu.style.left=w;
        cadre_contenu.style.top=h+30;
        cadre_contenu.style.display='none';
        cadre_barre.onmousedown=beginDrag;
    }else if (dom) {
        var w=window.outerWidth-200;
        w=0
        document.getElementById('cadre_barre').style.left=w;
        document.getElementById('cadre_barre').style.top=h;
        document.getElementById('cadre_contenu').style.left=w;
        document.getElementById('cadre_contenu').style.top=h+30;
        document.getElementById('cadre_contenu').style.display='none';
        document.getElementById('cadre_barre').addEventListener('mousedown',beginDrag, false);
    }else if (ns4) {
        var w=window.outerWidth-200;
        w=0
        document.layers.cadre_barre.left=w;
        document.layers.cadre_barre.top=h;
        document.layers.cadre_contenu.left=w;
        document.layers.cadre_contenu.top=h+30;
        document.layers.cadre_contenu.visibility='hide'
        document.captureEvents(Event.MOUSEDOWN);
        document.onmousedown=beginDrag;
    }
}

function doDrag(e) {
    if (ie4) {
        var difX=event.clientX-window.lastX;
     var difY=event.clientY-window.lastY;
        var newX1 = parseInt(cadre_barre.style.left)+difX;
     var newY1 = parseInt(cadre_barre.style.top)+difY;
     cadre_barre.style.left=newX1+'px';
     cadre_barre.style.top=newY1+'px';
     cadre_contenu.style.left=newX1+'px';
     cadre_contenu.style.top=newY1+30+'px';
     window.lastX=event.clientX;
     window.lastY=event.clientY;
    }else if (dom) {
        var difX=e.clientX-window.lastX;
     var difY=e.clientY-window.lastY;
        var newX1 = parseInt(document.getElementById('cadre_barre').style.left)+difX;
     var newY1 = parseInt(document.getElementById('cadre_barre').style.top)+difY;
     document.getElementById('cadre_barre').style.left=newX1+'px';
     document.getElementById('cadre_barre').style.top=newY1+'px';
     document.getElementById('cadre_contenu').style.left=newX1+'px';
     document.getElementById('cadre_contenu').style.top=newY1+30+'px';
     window.lastX=e.clientX;
     window.lastY=e.clientY;
    }else if (ns4) {
        var difX=e.pageX-window.lastX;
     var difY=e.pageY-window.lastY;
        var newX1 = parseInt(document.layers.cadre_barre.left)+difX;
     var newY1 = parseInt(document.layers.cadre_barre.top)+difY;
     document.layers.cadre_barre.left=newX1;
     document.layers.cadre_barre.top=newY1;
     document.layers.cadre_contenu.left=newX1;
     document.layers.cadre_contenu.top=newY1+30;
     window.lastX=e.pageX;
     window.lastY=e.pageY;
    }
}

function beginDrag(e) {
    if (ie4) {
        window.lastX=event.clientX;
     window.lastY=event.clientY;
     document.onmousemove=doDrag;
     document.onmouseup=endDrag;
//        if (event.srcElement.id=='cadre_barre'){
//            Récup de l'Id d'un élément sous IE
//        }
    }else if (dom) {
        window.lastX=e.clientX;
     window.lastY=e.clientY;
     window.onmousemove=doDrag;
     window.onmouseup=endDrag;
        myattr=e.target.getAttribute('ID');
//        if(myattr=='cadre_barre') {
//            Récup de l'ID d'un élément sous NS6
//        }
    }else if (ns4) {
        window.lastX=e.pageX;
     window.lastY=e.pageY;
     document.captureEvents(Event.MOUSEMOVE)
     document.onmousemove=doDrag;
     document.captureEvents(Event.MOUSEUP)
     document.onmouseup=endDrag;
    }
}

function endDrag(e) {
     if (ie4 || ns4) {
         document.onmousemove=null;
     }else if (dom) {
        window.onmousemove=null;
    }else if (ns4) {
        alert('endDrag');
        document.onmousemove=null;
    }
}

</script>


</head>

<body bgcolor='white' text='black' link='blue' vlink='purple' alink='red' onload='start();'>

<p><script language='JavaScript'>
    var ns4 = (document.layers)? true:false;
    var ie4 = (document.all)? true:false;
    var dom = (document.getElementById)? true:false;
    if ((dom) || (ie4)) {
        document.write("<div id='cadre_contenu' class='barre_contenu'><div id='cadre_barre' class='barre_titre'><table class='table_titre' cellpadding='5' cellspacing='0' width='310'><tr><th width='275' height='19' valign='middle' nowrap bgcolor='#CC9900'><p>ici pour deplacer la mini fenetre</p></th><th width='15' height='19' valign='middle' nowrap bgcolor='#CC9900'><p><a href='#' onclick='onoffdisplay();'><font color='red'>X</font></a></p></th></tr></table></div><table class='table_contenu' cellpadding='5' cellspacing='0' width='310'><tr><td width='300' height='263' align='center' valign='middle' colspan='2' bgcolor='white'><p><img id='visual' src='' border='0'></p></td></tr></table></div>");
    } else if (ns4) {
         document.write("<layer id='cadre_contenu' class='barre_contenu'><layer id='cadre_barre' class='barre_titre'><table class='table_titre' cellpadding='5' cellspacing='0' width='310'><tr><th width='275' height='19' valign='middle' nowrap bgcolor='#CC9900'><p>ici pour deplacer la mini fenetre</p></th><th width='15' height='19' valign='middle' nowrap bgcolor='#CC9900'><p><a href='#' onclick='onoffdisplay();'><font color='red'>X</font></a></p></th></tr></table></layer><table class='table_contenu' cellpadding='5' cellspacing='0' width='310'><tr><td width='300' height='263' align='center' valign='middle' colspan='2' bgcolor='white'><p><img id='visual' src='' border='0'></p></td></tr></table></layer>");
    }
</script>





</p>
<p><a href="#" onclick="changer_image('1.gif');">image 1 .gif</a></p>
<p><a href="#" onclick="changer_image('2.gif');">image 2 .gif</a></p>
</body>

</html>

Commentaire de atlante34 le 23/05/2006 10:19:19

merci Marcial,
Il est vrai qu il est mieux de faire bouger directement le div.
Merci de ton code
A++

Commentaire de bobabar le 15/05/2007 16:33:16

Je n'ai pas réussi à le faire fonctionner que ce soit sous IE 6 ou FireFox 2.0 (pris les fichiers du .zip).

A+

Commentaire de jiminy2 le 08/09/2007 11:32:13

Pareil, ça ne marche pas pour moi.

j'ai trouvé un code similaire, ici : http://i.gautier.free.fr/jsprof/scripts/r6.htm

Commentaire de cirkooo le 08/06/2009 01:33:59

le 1 er et deuxieme code marche impecablement, mais que le code est long. Ça doit être bien de comprendre tous ce code.... ^^.

Ajouter un commentaire

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP