survol des images

2 avril 2009 à 12:59:37

bonjour.
Voila je voudrais que quand on survole une image elle s'agrandisse. sinon si c'est pas possible que quand on clique dessus elle s'ouvre en plus grand dans une pop up. En fait je préfère la deuxième solution. Le probleme c'est que j'ai peur que certain navigateur bloque les pop up.
Par contre j en sais vraiment pas comment faire.
Pouvez vous m'aider?

voila la page en question
http://julienetemeline.free.fr/enfantshonneurs.php

merci d'avance

birdy42

2 avril 2009 à 13:01:45

Hello,
Il faut utiliser Window.open();

+
Birdy

xavierm02

2 avril 2009 à 13:18:27

Tu peux le faire en HTML en rajoutant un target à ton lien.
Si une page avec ce nom existe déjà, son contenu sera changer et dans le cas contraire, une nouvelle sera ouverte...
Tu peux donc mettre le même target à tous tes liens... sinon, ça risque d'ouvrir 50 00 pages... si c'est ce que tu veux, tu peux mettre un target avec un _, ce qui ouvrira une nouvelle fenêtre à chaque fois...

Si tu connais un minimum le javascript, tu peux te tourner vers window.open() qui te permettra de choisir si tu affiches la barre d'adresse etc. dans le popup... ou même vers des light-box qui mettraient une div en avant pour faire comme un popup sauf que ça sortirait pas de la page...

gaya_102

2 avril 2009 à 13:29:47

Je debute completement et du coup je ne comprend aps trop

pour le window.open() je dois le mettre a chaque photos?

xavierm02

2 avril 2009 à 13:50:28

Bon... on va faire simple...
Soit tu rajoutes un lien vers l'image qui entoure l'image... donc quand on clic sur l'image, ça l'active... et tu lui mets l'rul de l'image comme href... et un target="images" et ça sera toujours compatible.
Soit tu rajoutes onclick="windown.open(this.href,'images','')" et tu me dis si tu veux la barre d'adresse et tout d'affiché ou pas (et je te donnes les options à rajouter) mais ça ne marchera pas pour ceux qui n'ont pas activé le javascript...

gaya_102

2 avril 2009 à 14:04:19

ok je vais suivre ton conseil avec le target="images". Par contre comment je définis la pop up, sa taille?

Golmote

2 avril 2009 à 14:12:23

Bah avec le target, ce sera sans doute pas une popup... mais plutôt un nouvel onglet.

L'avantage est que c'est toujours dans ce même nouvel onglet que les images seront ouvertes.

Pour faire une popup, il faut que tu fasses quelque chose comme ça :

<a href="url_de_l_image" onclick="window.open('url_de_l_image','img_pop','');"><img src="url_de_l_image" alt="texte alternatif" /></a>

Et sinon tu peux utiliser une box... comme Lightbox. (Une des plus simples en ce qui concerne les images)

birdy42

2 avril 2009 à 14:13:21

Recherche sur google : window.open() tu auras la liste des propriétés que tu peux mettre à ta nouvelle fenêtre.
+
Birdy

gaya_102

2 avril 2009 à 14:16:50

c'est ce que je suis en train de faire mais je me pose nue question. Il faut que je créé une nouvelle fenêtre avec dedans la photo? C'est bien ca?

birdy42

2 avril 2009 à 14:21:55

Sinon, jette un coup d'oeil au lien de Golmote (LightBox) c'est une autre manière de faire...

gaya_102

2 avril 2009 à 14:26:53

je viens d'aller voir et ne rigolais pas mais tout est en anglais et je suis nulle en anglais

Mais bon heureusement que les traducteurs sont la. lol
Bon j'ai fait se qu'ils ont dit j'ai mis les différents fichiers qu'ils donnent. et j'ai mis ca dans la page mais ca marche pas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Jour J</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


<link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

	   
	   </head>
 
   <body>
       <div id="rubrique">        
           
		   <?php
include("menu.php");
?> 
           <div id="texte"> 
		   <br>
<h2>Toffee</h2>
		   
		   <P>La présentation de ne serait pas complète sans présenter Toffee de la race « les chats d?amour ».</P>
		   
<p>Toffee a débarqué un soir de juillet 2002 dans la vie d?Emeline : elle est arrivée du boulevard de Belleville à Paris en moto cachée dans le blouson de moto !</p>
 
<p>A l?époque elle avait à peine 5 semaine.</p>
<div id="toffe">

<a href="image/toffe.jpg" rel="lightbox" title="toffe">toffe</a>

</div>
 <p>Comment ne pas craquer devant cette petite boule de poil !</p>
 
 
<p>Elle a d?abord suivi la vie étudiante de sa maîtresse à Rennes. Puis après un court passage de quelques mois chez ses grands-parents elle s?est installée à Rueil Malmaison où elle a rencontré Julien !</p>

<p>Elle a commencé a apprécié le balcon dans le premier appartement d?Emeline et Julien (0019) et continue aujourd?hui à Chatou sa vie de chat ou plutôt de PACHA !</p>

<p>Mais bon, ses maîtres lui pardonne car elle est d?une aide particulièrement active dans les préparatifs du mariage </p>



		   
		   
		   </div>
		 
		   
		   </div>
		   <script type="text/javascript">
    initMenu();
</script>
		   
		   	<script type="text/javascript">
			var imgs = document.getElementsByTagName('img');
			
			for (var i = 0; i < imgs.length; i++)
			{
				if (imgs[i].className == 'rollOver')
				{
					imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
					imgs[i].className = '';
				}
			}
			
			</script>
   </body>
</html>

en fait l'image a disparu et quand on clique sur le titre car envoie sur une autre page ou par contre il y a la photo

http://julienetemeline.free.fr/toffe.php