Fenêtre dans la fenetre, avec du texte dedans - JavaScript

Logiciel & apps Programmation
1

bonjour,
je suis ici pour savoir comment, dans le code source ci-dessous, à la place des images, afficher du texte.
Ce serais gentil de m’aider !

le code :

<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_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>

Merci de votre aide !

Florent264

2

Salut

si j’ai bien compris ta demande, tu voudrais que lorsque l’utilisateur clique sur un des liens, cela change le contenu (text ou html)

alors voila ce que tu pourrais faire :

  • l’élément “visual” n’est plus une image mais une DIV
  • modifier la fonction “changer_image” par “changer_contenu” et celle-ci ne prendrait plus l’URL de l’image à changer mais du texte (html par exemple)
  • modifier l’appel de la fonction sur les liens

Ce qui donnerait :


<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_contenu(texte_html) { 
 if (ie4) { 
 visual.innerHTML = texte_html;
 cadre_contenu.style.display='';
 }else if (dom) { 
 document.getElementById('visual').innerHTML = texte_html;
 document.getElementById('cadre_contenu').style.display='';
 }else if (ns4) { 
 document.layers.visual.innerHTML = texte_html;
 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><div id='visual' border='0'></div></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'><div id='visual' border='0'></div></td></tr></table></layer>"); 
 } 
</script> 
</p> 
<p><a href="#" onclick="changer_contenu('<b>Voila un nouveau contenu</b>');">Contenu 1</a></p> 
<p><a href="#" onclick="changer_contenu('<i>Voila aussi un nouveau contenu</i>');">Contenu 2</a></p> 
</body> 
 
</html>
3

Bonjour !
Merci énormément je vais essayer !

Au revoir !

4

Coucou ! C’est encore moi !
C’est pour vous dire que ça ne marche pas (http://florent73.ovh.org/layermobile.htm)
lorsque je clique, rien ne se passe ! merci de m’aider !

5

J’ai un truc plus court, je ne sais pas si sa convient à ta demande :
(à mettre dans le body)

chez moi ça marche
:expressionless:

6

Merci mais ça ne convient pas :
le code précédent permettait de créer une éspece de petite fenetre
déplaçable sauf qu’elle affiche des images et moi je voudrais que ce soit du texe.
Merci à vous pour votre aide !
Edité le 16/12/2007 à 19:04

7

Revois ton code il est incorrect
si tu fais copier-coller de mon exemple ca marchera sans problème
là sur ton site il y a 3 erreurs de script :

missing ) after condition
[Break on this error] play==’’) \n
layermobile.htm# (line 44)
unterminated string literal
[Break on this error] document.write("<div id=‘cadre_contenu’ \n
layermobile.htm# (line 211)
start is not defined

corrige déjà ça et ça fonctionnera

8

Voici :

Et au fait, comment encadrer son code comme tu l’as fait et comme l’as fait megatom.sk :wink:

9

Avec la balise [code].

10

Merci :slight_smile:

11

Bonjour
merci de m’aider mais je ne sais pas comment vous dire :
je voudrais (si c’est possible et étant pas nul mais presque du haut de mes 14ans) c’est que une espèce de fenêtre en javascript déplaçable et fermable s’affiche avec, en contenu du texte, lorsque l’on clique sur un lien

Merci d’avance pour l’intention que vous portez pour ma demande.

ps : le code de départ
Edité le 20/12/2007 à 19:30

12

Je jette l’éponge, c’est du drag-drop je crois et c’est au-dessus de mes compétences
(en fait je devrais commencer à m’y mettre) :slight_smile: