Version complète: sur le forum Webmaster Hub : Fenetre popup
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
nicolas704
Bonjour tous le monde!!!

Je suis en train de créer un site que je n'es encore malheureusement pas mis en ligne,donc je ne vais pas encore pouvoir vous montrer de quoi il s'agit mais je vais essayer de vous expliquer le mieux possible :-).

Il s'agit d'un site, où je présente ma villas de corse à louer, J'y es introduit des photos en mignatures sur une page, Je voudrai que dès que l'on clic sur une de ces images, un popup s'ouvre au millieux de la page avec la taille que je désire, avec la photo à l'intérieur et la possibilité de nomé cette fenêtre popup du style "piscine" etc...

Je travail sous Macromedia Dreamweaver.

Merci d'avance pour votre aide précieuse........

;-)))
ghost
Bonjour,

Essaye simple d'abord ...

Dans le body :
CODE
function ouvrir() {
       fenetre=window.open("photo.jpg","fenetre","resizable=no,scrollbars=no,location=no,width=700,height=525,top=0,left=0")
}
// -->
</script>


puis :

CODE
       <p><a  href="java script:ouvrir()"
       onmouseout="window.status=' '; return true"><img src="photo.jpg"  alt="blabla"/> </a></p>


tu peux créer autant de fonction ouvrir, ouvrir1() ouvrir2() ... pour chaque photo
et tu peux parametrer resizable, location ....

C'est du javascript au fait .

Cordialement.
nicolas704
merci pour ta réponse.

Je ne sais pas exactement ou je dois mettre ceci.

Merci beaucoup
ghost
entre les balises <body> et </body>
captain_torche
Il y a des fortes chances que nicolas704 travaille en mode WYSIWYG, sans fenêtre de code.
Il demandait donc la manipulation à effectuer sous DreamWeaver.

Si mes souvenirs sont bons (et ils remontent à au moins trois ans), ça se gère dans la fenêtre 'Comportements', après avoir surligné le texte.
nicolas704
oui d'accord mais ceci, j'y mets ou ??

CODE
      <p><a  href="java script:ouvrir()"
      onmouseout="window.status=' '; return true"><img src="photo.jpg"  alt="blabla"/> </a></p>
ghost
Effectivement, dreamweaver, j'ai du mal !
bon si tu as accés au code entre les balises <body> et</body>
tu poses le premier code tel quel et ensuite quand tu apelle tes liens tu poses le second, bon j'en ai posé un il n'y a pas longtemps, un exemple sera peut être plus parlant, vas voir tu reconaitras le code et essayes pour ton site (une fois sur le site si tu es sous IE, click droit sur la page et afficher le code ...) Repère le code que je t'ai donné et essaye la même chose...) pour plus de détail beep moi
nicolas704
Je vais te donner le code source de la page que je suis en train de faire pour que tu puisse voir pourquoi celà ne fonctionne pas smile.gif

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="body1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Style1 {color: #FFFFFF}
.Style2 {
font-family: Tahoma;
font-size: 12px;
}
.Style3 {
color: #000000;
font-family: Tahoma;
}
-->
</style>
</head><body>
<div id="global">
<script type="text/javascript">
<!--

function ouvrir() {
fenetre=window.open("Photos Villas Corse/Image000_1.jpg.jpg","fenetre","resizable=no,scrollbars=no,location=no,width=700,height=525,top=0,left=0")
}
// -->
</script>

<script type="text/javascript">
<!--

function ouvrir2() {
fenetre=window.open("images/carte.jpg","fenetre","resizable=no,scrollbars=no,location=no,width=510,height=590,top=0,left=0")
}
// -->
</script>

<body onload="MM_preloadImages('HOME2.jpg','CONTACT2.jpg','HOME2.jpg','menu/HOME2.jpg','menu/CONTACT.jpg')">
<table width="732" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<!--DWLayoutTable-->
<tr>
<td height="174" colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="753" height="135" valign="top"><p><img src="banniere/banniere-photo.jpg" alt="banni&egrave;re" width="753" height="174" /></p> </td>
</tr>
</table> </td>
</tr>
<tr>
<td height="61" colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#99CC33">
<!--DWLayoutTable-->
<tr>
<td width="251" valign="top"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','HOME2.jpg',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','HOME2.jpg',1)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','HOME2.jpg',1)"></a><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image16','','menu/HOME2.jpg',1)"><img src="menu/HOME.jpg" name="Image16" width="251" height="61" border="0" id="Image16" /></a></td>
<td width="251"><img src="menu/PHOTO2.jpg" alt="photo" width="251" height="61" /></td>
<td width="252" height="37"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','CONTACT.jpg',0)"></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','CONTACT2.jpg',1)"></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','menu/CONTACT.jpg',1)"><img src="menu/CONTACT2.jpg" name="Image18" width="251" height="61" border="0" id="Image18" /></a><a href="contact.html"></a></td>
</tr>
</table></td>
</tr>
<tr>
<td width="10" height="13"></td>
<td width="733"></td>
<td width="12"></td>
</tr>
<tr>
<td height="843"></td>
<td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="733" align="center" valign="top"><p align="center"><a href="java script:ouvrir()" target="_top"
onmouseout="window.status=' '; return true"><img src="Photos Villas Corse/Image000_1.jpg" alt="la villa" width="320" height="170" border="0"/> </a>
</p></td>
<td width="733" height="196" align="center" valign="top"><img src="Photos Villas Corse/Image005_6.jpg" alt="image2" width="320" height="170" border="2" /></td>
</tr>
<tr>
<td align="center" valign="top"><img src="Photos Villas Corse/Image007_8.jpg" alt="image3" width="320" height="170" border="2" /></td>
<td height="196" align="center" valign="top"><img src="Photos Villas Corse/Image008_9.jpg" alt="image4" width="320" height="170" border="2" /></td>
</tr>
<tr>
<td align="center" valign="top"><img src="Photos Villas Corse/Image009_10.jpg" alt="image5" width="320" height="170" border="2" /></td>
<td height="196" align="center" valign="top"><img src="Photos Villas Corse/Image010_11.jpg" alt="image6" width="320" height="170" border="2" /></td>
</tr>
<tr>
<td align="center" valign="top"><img src="Photos Villas Corse/Image018_19.jpg" alt="image7" width="320" height="170" border="2" /></td>
<td height="196" align="center" valign="top"><img src="Photos Villas Corse/Image031_32.jpg" alt="image8" width="320" height="170" border="2" /></td>
</tr>
<tr>
<td align="center" valign="top" bordercolor="2"><img src="Photos Villas Corse/Image032_33.jpg" alt="image9" width="320" height="170" border="2" /></td>
<td height="199" align="center" valign="top" bordercolor="2"><img src="Photos Villas Corse/Image033_34.jpg" alt="image10" width="320" height="170" border="2" /></td>
</tr>
<tr>
<td align="center" valign="top"><img src="Photos Villas Corse/Image000_1.jpg" alt="image11" width="320" height="170" border="2" /></td>
<td height="204" align="center" valign="top"><img src="Photos Villas Corse/Image012_13.jpg" alt="image12" width="320" height="170" border="2" /></td>
</tr>
<tr>
<td align="center" valign="top"><img src="Photos Villas Corse/Image011_12.jpg" alt="image13" width="320" height="170" border="2" /></td>
<td height="59" align="center" valign="top"><img src="Photos Villas Corse/Image024_25.jpg" alt="image15" width="320" height="170" border="2" /></td>
</tr>




</table></td>
<td></td>
</tr>
<tr>
<td height="21"></td>
<td></td>
<td></td>
</tr>




<tr>
<td height="22" colspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#666666">
<!--DWLayoutTable-->
<tr>
<td width="534" height="22" align="center" valign="middle"><div align="center" class="Style1 Style2">
<div align="right"></div>
</div></td>
</tr>
</table></td>
</tr>
</table>

</body>
</html>


Merci


[edit modérateur]Merci d'utiliser la balise Codebox pour les morceaux de code "long"[/edit]
ghost
Salut,

Un lien aurait été plus pratique mais bon !

D'abord il y a déjà beaucoup de java et je ne sais pas si il est vraiment necessaire de faire un preload ?

Ensuite ton css est pas exploité et surtout c'est les tableaux ce n'est pas le top ...
Evite également les noms de fichier avec des espaces.

La solution de la fonction ouvrir() est valable pour quelques photos et necessite pour chaque photo, une en dimension normale (aggrandi) à poser dans la définition de la fonction et une reduite (cliquable) à poser en lien dans ton html. Bon je te donnes un bout de code vite fait pour une photo, mais le reste tu le fais tout seul ...

CODE
<body>
<!----------------------------------- 1 fonction ouvrir () pour chaque photo ----------------------------->
<script type="text/javascript">
<!--
function ouvrir() {
fenetre=window.open("Photos_Villas_Corse/Image000_1.jpg","fenetre","resizable=no,scrollbars=no,location=no,width=700,height=525,top=0,left=0")
}
// -->
</script>
<!---
....
.... Du html si il faut
....
---->
<td width="733" align="center" valign="top">
<a  href="java script:ouvrir()" onmouseout="window.status=' '; return true"><!-- appel de ta fonction -->
<img src="Photos_Villas_Corse/Image000_1_reduite.jpg"  alt="la villa"/> </a></td><!-- ta photo reduite si possible !! ---->

</body>


La modification des parametres de la popup se fait là :"resizable=no,scrollbars=no,location=no,width=700,height=525,top=0,left=0")

Pour le reste je te conseille un bon tuto (voir http:()//www.siteduzero.com)
captain_torche
Pour info, le preload est automatique dans DreamWeaver, pour les images hover (par exemple).
ghost
Désolé ... DreamWeaver c'est pas ma tasse de thé
Les Frontpages, DreamWeaver etc je n'aime pas des masses et justement pour ces histoires de petites choses que je ne contrôle pas et puis le code tourne vite en "soupe". Mais bon ce n'est que mon point de vue.
nicolas704
ok merci beaucoup pour ton aide, je vais voir ce que je peux faire.
marcelman
Voici un code qui a l'avantage de pouvoir paramétrer tes popup comme tu veux et où tu veux dans ta page
CODE
<a href="imageagrandie" onclick="window.open'','popup','height=650,width=650,left=50,top=50, menubar=0,toolbar=0,location=0,status=0,scrollbars=0,directories=0,resizable=0,c
pyhistory=0,')" target="popup"><img src="imagepetite" width="140" height="117" border="0" title="Tontitre"></a>


J'utilise ça pour mes popup de photos ou dessins sur mon site en bossant sous dreamweaver.

C'est un peu laborieux mais ça fonctionne.

Donc quand tu as inséré ta petite photo cliquable, au lieu de mettre un lien simple, tu mets ce genre de lien. Le mieux à faire si tu ne maîtrise pas encore bien le code, c'est de définir le lien et de remplacer ensuite le code écrit par dream par celui que je viens de te donner.

Cela dit, en cherchant un peu, tu trouves pas mal de sites qui te proposent des générateurs de popup plus ou moins perfectionnés.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.