Soyez le premier à donner votre avis sur cette source.
Vue 18 424 fois - Téléchargée 1 440 fois
<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>
8 juin 2009 à 01:33
8 sept. 2007 à 11:32
j'ai trouvé un code similaire, ici : http://i.gautier.free.fr/jsprof/scripts/r6.htm
15 mai 2007 à 16:33
A+
23 mai 2006 à 10:19
Il est vrai qu il est mieux de faire bouger directement le div.
Merci de ton code
A++
6 avril 2006 à 09:23
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>
<!--
.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>
<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("
ici pour deplacer la mini fenetre |<gras>[# image 1 .gif]
[# image 2 .gif]
</html>
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.