Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

Fenêtre flottante

Dernière réponse le 2 nov 2007 à 13:19:27 chocolat2006, le 28 sep 2007 à 17:26:18

Signaler ce message aux modérateurs

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 .

Configuration: Windows XP
Firefox 2.0.0.6

Posez votre question Répondre

warlix, le 28 sep 2007 à 17:43:55

Salut

en javascript je pense.

la tristesse c est de ne pas savoir que l on est heureux !

Répondre à warlix

chocolat2006, le 28 sep 2007 à 18:31:10

ça ne m'explique rien de plus malheureusement.

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

Répondre à chocolat2006

Posotaz, le 29 sep 2007 à 00:42:34

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.

Répondre à Posotaz

chocolat2006, le 2 nov 2007 à 02:00:31

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

Répondre à chocolat2006

warlix, le 2 nov 2007 à 12:15:56

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.
la tristesse c est de ne pas savoir que l on est heureux !

Répondre à warlix

chocolat2006, le 2 nov 2007 à 13:19:27

Je vais essayer ça ce matin et je te le dirais,merci beaucoup

Répondre à chocolat2006

Posez votre question Répondre