Fenêtre flottante
chocolat2006
Messages postés
51
Statut
Membre
-
chocolat2006 Messages postés 51 Statut Membre -
chocolat2006 Messages postés 51 Statut Membre -
Bonjour,
bon je suis pas une lumière en création de site web mais je cherche comment faire une fenêtre flottante (pas un pop-up externe à ma fenêtre principale), j'ai lu plein de truc sur des tas de site (en javascript, en CSS) mais le martien me paraitrai plus clair, j'ai aussi trouvé une aide ici
https://www.templatemonster.com/help/
Là où j'ai acheté mon template (mais leur aide est très modérée sinon payante, c'est pas juste)
mais je ne comprend rien, j'ai beau essayer ça ne fonctionne pas et je le veux, le but est de mettre un "lire plus" et que là, la petite fenêtre s'ouvre à l'intérieur de ma fenêtre principale afin de donner plus d'info et ça en cliquant dessus,mais je mets ça où et comment?faut-il avoir une image de cadre?et puis tant qu'a y être je dois m'arranger pour que cela fonctionne tant sur explorer que sur firefox pouvez-vous m'aider??Mais s.v.p expliquez-le moi comme à une enfant.
Ah oui ç'est en html et je travaille avec Dreamweaver.
Merci pour votre aide précieuse .
bon je suis pas une lumière en création de site web mais je cherche comment faire une fenêtre flottante (pas un pop-up externe à ma fenêtre principale), j'ai lu plein de truc sur des tas de site (en javascript, en CSS) mais le martien me paraitrai plus clair, j'ai aussi trouvé une aide ici
https://www.templatemonster.com/help/
Là où j'ai acheté mon template (mais leur aide est très modérée sinon payante, c'est pas juste)
mais je ne comprend rien, j'ai beau essayer ça ne fonctionne pas et je le veux, le but est de mettre un "lire plus" et que là, la petite fenêtre s'ouvre à l'intérieur de ma fenêtre principale afin de donner plus d'info et ça en cliquant dessus,mais je mets ça où et comment?faut-il avoir une image de cadre?et puis tant qu'a y être je dois m'arranger pour que cela fonctionne tant sur explorer que sur firefox pouvez-vous m'aider??Mais s.v.p expliquez-le moi comme à une enfant.
Ah oui ç'est en html et je travaille avec Dreamweaver.
Merci pour votre aide précieuse .
A voir également:
- Fenêtre flottante
- Fenetre windows - Guide
- Fenêtre hors écran windows 11 - Guide
- Fenetre de navigation privée - Guide
- Mcafee fenetre intempestive - Accueil - Piratage
- Forcer fermeture fenetre windows - Guide
6 réponses
Salut chocolat,
Pour t'expliquer en français le contenu de la page dont tu as fourni le lien...
Tu dois télécharger le fichier JavaScript et le placer dans le même répertoire que ta page. Sur cette page tu t'assures que dans le header, le code en gras soit présent :
Ensuite dans le corps (<body>) de ta page HTML, il faut que tu définisses un bloc qui ressemble à ceci (ce qui est en gras est l'appel au Drag):
C'est donc le deuxième bloc DIV (celui imbriqué au premier qui porte l'id "window") qui contient l'appel à la fonction Drag. Il est essentiel de le placer dans le premier bloc que tu vas reprendre tel quel. Et normalement ça devrait aller.
Pour t'expliquer en français le contenu de la page dont tu as fourni le lien...
Tu dois télécharger le fichier JavaScript et le placer dans le même répertoire que ta page. Sur cette page tu t'assures que dans le header, le code en gras soit présent :
<head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> <title>Floating Window</title> <script src="Drag.js"></script> </head>
Ensuite dans le corps (<body>) de ta page HTML, il faut que tu définisses un bloc qui ressemble à ceci (ce qui est en gras est l'appel au Drag):
<div id="window" style="position:absolute; z-index:10; left:350px; top:160px; width:400px;background-color:#dde3eb; border:1px solid #464f5a; display:none;">
<div style="padding-bottom:8px; width:400px; background-color:#718191; border-bottom:1px solid #464f5a;" onMouseDown="beginDrag(this.parentNode, event);">
<div style="position:absolute; top:2px; left:5px; font-size:16px; font-weight:bold; color:#FFFFFF;">Drag me!</div>
</div>
</div>
C'est donc le deuxième bloc DIV (celui imbriqué au premier qui porte l'id "window") qui contient l'appel à la fonction Drag. Il est essentiel de le placer dans le premier bloc que tu vas reprendre tel quel. Et normalement ça devrait aller.
ça ne m'explique rien de plus malheureusement.
je mets ça où?? dans le code html de ma page principale??
je mets ça où?? dans le code html de ma page principale??
merci infinement.
d'accord mais petite question, est-ce que tout ça, je dois le rentrer dans une page différente ou par exemple ici
http://www.kreavie.ca/clients/index.html
dans le code de cette page html??
d'accord mais petite question, est-ce que tout ça, je dois le rentrer dans une page différente ou par exemple ici
http://www.kreavie.ca/clients/index.html
dans le code de cette page html??
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
salut
Bon une autre solution qui marche pas mal
dans le <head></head> te ta page tu y mets
w.document.write("<HTML><HEAD><TITLE>"+titre+"</TITLE></HEAD>");
w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+15,document.images[0].height+60); window.focus();} else { setTimeout('checksize()',250) } }</"+"SCRIPT>");
w.document.write("<BODY onload='checksize()' onblur='window.close()' onclick='window.close()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>");
w.document.write("<TABLE width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'><TR>");
w.document.write("<TD valign='middle' align='center'><IMG src='"+img+"' border=0 alt='delice de pierre'>");
w.document.write("</TD></TR></TABLE>");
w.document.write("</BODY></HTML>");
w.document.close();
}
//-->
</SCRIPT>
</code>
en gras ce que tu peu modifier pour l affichage
dans la partie où tu as l image (vignette/logo) tu y mets ceci
la aussi tu mets le nom des deux images 1 la grande 2 la petite
tout code dois être sur la même page (le mien) pas de page en plus , juste une insertion du script et du code.
Bon une autre solution qui marche pas mal
dans le <head></head> te ta page tu y mets
<SCRIPT LANGUAGE="JavaScript">
<!--
function PopupImage(img) {
titre="Agrandissement";
w=open("",'image','width=700,height=500<code>,toolbar=no,scrollbars=no,resizable=no');
w.document.write("<HTML><HEAD><TITLE>"+titre+"</TITLE></HEAD>");
w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+15,document.images[0].height+60); window.focus();} else { setTimeout('checksize()',250) } }</"+"SCRIPT>");
w.document.write("<BODY onload='checksize()' onblur='window.close()' onclick='window.close()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>");
w.document.write("<TABLE width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'><TR>");
w.document.write("<TD valign='middle' align='center'><IMG src='"+img+"' border=0 alt='delice de pierre'>");
w.document.write("</TD></TR></TABLE>");
w.document.write("</BODY></HTML>");
w.document.close();
}
//-->
</SCRIPT>
</code>
en gras ce que tu peu modifier pour l affichage
dans la partie où tu as l image (vignette/logo) tu y mets ceci
<p align="center"><A href="javascript:PopupImage('nom_de_l_image_grand_format.jpg')"><IMG src="nom_de_l_image_vignette.jpg" alt="Cliquer pour agrandir" border="0" class="image"></A></p>
<p align="center"> </p>
la aussi tu mets le nom des deux images 1 la grande 2 la petite
tout code dois être sur la même page (le mien) pas de page en plus , juste une insertion du script et du code.
