Aller au contenu

Fenetre popup

nicolas704

Par nicolas704
dans (X)HTML et CSS

 Partager

Sujets conseillés

nicolas704

nicolas704

Posté
Posté

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

ghost

Posté
Posté

Bonjour,

Essaye simple d'abord ...

Dans le body :

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

puis :

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

captain_torche

captain_torche

Posté
Posté

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

nicolas704

Posté
  • Auteur
Posté

oui d'accord mais ceci, j'y mets ou ??

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

ghost

ghost

Posté
Posté

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 Là 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

nicolas704

Posté
  • Auteur
Posté

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 :)

<!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è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

ghost

Posté
Posté

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

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

ghost

ghost

Posté
Posté

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.

marcelman

marcelman

Posté
Posté

Voici un code qui a l'avantage de pouvoir paramétrer tes popup comme tu veux et où tu veux dans ta page

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

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...