Création
d'entreprise
Posez votre question Signaler

Fenêtre flottante

chocolat2006 51Messages postés 18 septembre 2006Date d'inscription - Dernière réponse le 2 nov. 2007 à 13:19
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
http://info.template-help.com/...
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 .
Lire la suite 

Fenêtre flottante »

6 réponses
Réponse
+3
moins plus
Posotaz 502Messages postés 23 juin 2007Date d'inscription 19 juin 2011Dernière intervention 29 sept. 2007 à 00:42
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 : 
<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.

 Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
warlix 1226Messages postés 25 juillet 2007Date d'inscription 28 sept. 2007 à 17:43
salut


en javascript je pense.


Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
chocolat2006 51Messages postés 18 septembre 2006Date d'inscription 28 sept. 2007 à 18:31
ça ne m'explique rien de plus malheureusement.

je mets ça où?? dans le code html de ma page principale??

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
chocolat2006 51Messages postés 18 septembre 2006Date d'inscription 2 nov. 2007 à 02:00
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??

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
warlix 1226Messages postés 25 juillet 2007Date d'inscription 2 nov. 2007 à 12:15
salut

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">&nbsp;</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.

Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
chocolat2006 51Messages postés 18 septembre 2006Date d'inscription 2 nov. 2007 à 13:19
je vais essayer ça ce matin et je te le dirais,merci beaucoup

 Ajouter un commentaire
Ajouter un commentaire
Posez votre question
Ce document intitulé « Fenêtre flottante » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
5 extensions si vous voulez revenir à l'ancien Facebook