Sujet Précédent Sujet Suivant

Créer un popup

Fermé
lelo4 Messages postés 8 Date d'inscription vendredi 17 août 2007 Statut Membre Dernière intervention 18 août 2007 - 17 août 2007 à 17:51
lelo4 Messages postés 8 Date d'inscription vendredi 17 août 2007 Statut Membre Dernière intervention 18 août 2007 - 17 août 2007 à 18:24
Bonjour à tous, j'ai besoin de votre aide.
Je voudrais recréer à l'identique le plus parfaite ce popup (aller sur ce site et cliquer sur la photo de cette tomate http://www.declic-bio.fr/ )
Voila pouvez vous m'indiquer le code html que je doi inserer dans ma page. Expliquez moi bien je suis un pur débutant " qui comprend pas tout" !!!
Je voudrais faire le même système sur mon site à cette page http://www.lejardindelaclairette.com/jardin.html

Je vous insère le code html de la page pour que vous puissiez me le montrer ou si vous pouvez me le compléter.
Merci d'avance, je laisse mon adresse msn si vous trouvez sa plus rapide !!! tolfl_milou4@hotmail.fr


<html>
<head>
<title>Le Jardin de la Clairette - Côté Transformation - Nos Spécialités Culinaires - Produits Régionaux </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Keywords here">
<meta name="description" content="Description here">
<meta name="Author" content="Joseph De Araujo">
<meta name="robots" content="index, follow"> <!-- (Robot commands: All, None, Index, No Index, Follow, No Follow) -->
<meta name="revisit-after" content="30 days">
<meta name="distribution" content="global">
<meta name="rating" content="general">
<meta name="Content-Language" content="english">

<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.Style2 {
font-size: 10px;
font-weight: bold;
}
.Style14 {
font-family: "Comic Sans MS";
font-size: 15px;
}
.Style42 {
font-family: "Westwood LET";
font-size: 60px;
color: #009933;
}
body {
background-color: #009933;
}
.Style45 {font-size: 8px}
.Style10 { font-family: "Comic Sans MS";
font-size: 30px;
font-weight: bold;
color: #CC0000;
}
.Style49 {font-size: 18}
.Style50 {font-size: 10px}
.Style52 {
color: #FF0000;
font-size: 10px;
}
.Style53 {
color: #0000FF;
font-size: 18px;
font-weight: bold;
}
.Style54 {
font-size: 18px;
color: #0000FF;
}
.Style55 {color: #FF0000}
.Style56 {font-size: 10px; font-weight: bold; color: #FF0000; }
-->
</style>
</head>

<body style="margin:0;">
<table width=1069 height="100%" border=0 align="center" cellpadding=0 cellspacing=0>
<tr>
<td width=223 height=15 nowrap></td>
<td width=846 height=15 nowrap></td>
</tr>
<tr>
<td height=15 nowrap></td>
<td height=15 nowrap></td>
</tr>
<tr>
<td height="58" colspan="2"><div align="center"><img src="Tomates/baniere.jpg" alt="y" width="920" height="119"></div></td>
</tr>
<tr>
<td height="13"> </td>
<td height=13><div align="center"></div></td>
</tr>
<tr>
<td height="73" colspan="2"><div align="center"><a href="index.html"><img src="bouton accueil.jpg" alt="y" width="98" height="66"></a><a href="exploitation.html"><img src="bouton exploitation.jpg" alt="y" width="118" height="67"></a><a href="jardin.html"><img src="bouton cote jardin.jpg" alt="y" width="130" height="67"></a><a href="cotetransfo.html"><img src="bouton cote transformation.jpg" alt="y" width="101" height="68"></a><a href="marches.html"><img src="bouton marche.jpg" alt="y" width="103" height="69"></a><a href="cte.html"><img src="bouton infos.jpg" alt="y" width="102" height="69"></a><a href="on.html"><img src="bouton contactez nou.jpg" alt="y" width="102" height="69"></a></div></td>
</tr>

<tr>
<td width=223 height=3 nowrap background="images/subnavr2bg.gif"><img src="images/subnavr2bg.gif" width=10 height=3 alt=""></td>
<td width=846 height=3 nowrap background="images/subnavr2bg.gif"><img src="images/subnavr2bg.gif" width=10 height=3 alt=""></td>
</tr>
<tr>
<td width=223 height=21 nowrap></td>
<td width=846 height=21 nowrap></td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td valign="top" bgcolor="#FCF1DB"><p> </p>
<p align="center"><span class="Style10">MENU</span></p>
<p> </p>
<p align="center"><a href="index.html" class="Style52">Accueil</a></p>
<p align="center"><span class="Style49"><span class="Style52"><a href="exploitation.html">L'exploitation</a></span></span></p>
<p align="center" class="Style53"><a href="jardin.html" class="Style54">Côté Jardin</a></p>
<p align="center" class="Style2"><span class="Style55"><a href="cotetransfo.html">Côté Transformation</a></span></p>
<p align="center" class="Style56"><a href="marches.html">Les Marchés</a></p>
<p align="center" class="Style52"><a href="evenementsetpromos.html">Événements et Promotions</a></p>
<p align="center" class="Style52"><a href="cte.html">Informations</a></p>
<p align="center" class="Style52"><a href="on.html">Où nous trouver</a></p>
<p align="center" class="Style55"><span class="Style50"><a href="on.html">Nous contacter</a></span></p>
<p class="Style55"> </p></td>
<td width=846 valign="top" bgcolor=#FCF1DB style="padding:25px; "><table width="783" height="85" border="7">
<tr>
<td width="761"><div align="center" class="Style42 ">Côté Jardin</div></td>
</tr>
</table>
<p align="justify" class="Style14">Sur cette page, nous allons vous présenter la gamme de Fruits de Légumes et des oeufs du Jardin de la Clairette. Pour consulter les informations d'un produit, il suffit de cliquer sur le nom de l'élément.</p>
<p align="justify" class="Style14"> </p>
<p align="justify" class="Style14">Les Légumes : </p>
<table width="788" border="1">
<tr>
<td width="76"><div align="center">Nom :</div></td>
<td width="66"><div align="center">Producteur<br>
Adresse</div></td>
<td width="129"><div align="center">Infos <br>
supplémentaires :</div></td>
<td width="52"><div align="center">Quantité :</div></td>
<td width="332"><div align="center">Photos :</div></td>
<td width="41"><div align="center">Prix :</div></td>
<td width="46"><div align="center">Ajouter au panier : </div></td>
</tr>
<tr>
<td><div align="center">Aubergine</div></td>
<td><div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div></td>
<td>
<td><div align="center">Le Kg </div></td>
<td><div align="center"><img src="Photos pour cote jardin/aubentiere.JPG" width="155" height="76"><img src="Photos pour cote jardin/aubcoupe.JPG" width="116" height="76"></div></td>
<td><div align="center">1 € 90</div></td>
<td> </td>
</tr>
<tr>
<td><div align="center">Oignon Doux</div></td>
<td><div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div></td>
<td> </td>
<td><div align="center">Le Kg <br>
ou la Botte<br>
</div></td>
<td><div align="center"><img src="Photos pour cote jardin/cebettes.JPG" width="164" height="110"></div></td>
<td><div align="center">2 € 00<br>
1 € 50</div></td>
<td> </td>
</tr>
<tr>
<td><div align="center">Concombre</div></td>
<td><div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div></td>
<td> </td>
<td><div align="center">La Pièce </div></td>
<td><div align="center"><img src="Photos pour cote jardin/concombresite.jpg" width="114" height="114"></div></td>
<td><div align="center">0 € 80</div></td>
<td> </td>
</tr>
<tr>
<td><div align="center">Carottes</div></td>
<td><div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div></td>
<td> </td>
<td><div align="center">Le Kg ou<br>
La Botte</div></td>
<td><div align="center"><img src="Photos pour cote jardin/carottes.JPG" width="88" height="132"></div></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><div align="center">Courgettes</div></td>
<td><div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div></td>
<td><div align="center">Courgettes Longues Vertes</div></td>
<td><div align="center">Le Kg</div></td>
<td><div align="center"><img src="Photos pour cote jardin/cglongetiere.JPG" width="201" height="63"><br>
<img src="Photos pour cote jardin/cglongcoupe.JPG" width="202" height="50"></div></td>
<td><div align="center">1 € 60</div></td>
<td> </td>
</tr>
<tr>
<td colspan="2" rowspan="3"> </td>
<td><div align="center">Courgettes Longues Jaunes</div></td>
<td><div align="center">Le Kg</div></td>
<td><p align="center"><img src="Photos pour cote jardin/courgette longue jaune.JPG" width="164" height="61"><br>
<img src="Photos pour cote jardin/cgjaunecoupe.JPG" width="163" height="54"></p> </td>
<td><div align="center">1 € 60</div></td>
<td> </td>
</tr>
<tr>
<td><div align="center">Courgettes Rondes Vertes</div></td>
<td><div align="center">Le Kg</div></td>
<td><div align="center"><img src="Photos pour cote jardin/courgette entiere.jpg" width="80" height="121"><img src="Photos pour cote jardin/courgette ronde coupe.JPG" width="187" height="121"></div></td>
<td><div align="center">1 € 60</div></td>
<td> </td>
</tr>
<tr>
<td><div align="center">Courgettes Rondes Jaunes</div></td>
<td><div align="center">Le Kg </div></td>
<td><div align="center">Photo Non disponible</div></td>
<td><div align="center">1 € 60</div></td>
<td> </td>
</tr>
<tr>
<td><div align="center">Poivrons</div></td>
<td><div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div></td>
<td><div align="center">Poivrons Longs Verts</div></td>
<td><div align="center">Le Kg</div></td>
<td><div align="center"><img src="Photos pour cote jardin/poivron long entier.jpg" width="134" height="88"><img src="Photos pour cote jardin/poiv long coupe.jpg" width="135" height="89"></div></td>
<td><div align="center">2 € 20</div></td>
<td> </td>
</tr>
<tr>
<td colspan="2" rowspan="3"> </td>
<td><div align="center">Poivrons Longs Rouges</div></td>
<td><div align="center">Le Kg</div></td>
<td> </td>
<td><div align="center">2 € 20</div></td>
<td> </td>
</tr>
<tr>
<td><div align="center">Poivrons Ronds Verts</div></td>
<td><div align="center">Le Kg</div></td>
<td><div align="center"><img src="Photos pour cote jardin/poivron.jpg" width="124" height="70"><img src="Photos pour cote jardin/poivron rond coupe.jpg" width="105" height="69"></div></td>
<td><div align="center">2 € 20</div></td>
<td> </td>
</tr>
<tr>
<td><div align="center">Poivrons Ronds ROuges</div></td>
<td><div align="center">Le Kg</div></td>
<td> </td>
<td>2 € 20</td>
<td> </td>
</tr>
<tr>
<td><div align="center">Betterave </div></td>
<td><div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div></td>
<td> </td>
<td><div align="center">Le Kg</div></td>
<td><div align="center"><img src="Photos pour cote jardin/betterave.JPG" width="189" height="125"></div></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="7"><div align="center">
<p>LES TOMATES, OUI, MAIS LESQUELLES ?<br>
<img src="Photos pour cote jardin/516154175_88e8e80f13_b.jpg" width="469" height="349"></p>
</div></td>
</tr>
<tr>
<td><div align="center">Tomates :</div></td>
<td><div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div></td>
<td><div align="center">Myriade</div></td>
<td><div align="center">Le Kg</div></td>
<td><div align="center"><img src="Photos pour cote jardin/myriadeentiere.jpg" width="126" height="89"><img src="Photos pour cote jardin/myriade coupe.jpg" width="139" height="90"></div></td>
<td><div align="center">1 € 60</div></td>
<td> </td>
</tr>
<tr>
<td colspan="2" rowspan="5"> </td>
<td><div align="center">Paola</div></td>
<td><div align="center">Le Kg</div></td>
<td><div align="center"><img src="Photos pour cote jardin/tomate ronde 1.jpg" width="96" height="100"><img src="Photos pour cote jardin/tomatecoupe.jpg" width="141" height="101"></div></td>
<td><div align="center">1 € 60</div></td>
<td> </td>
</tr>
<tr>
<td><div align="center">Coeur de Boeuf</div></td>
<td><div align="center">Le Kg</div></td>
<td><div align="center"><img src="Photos pour cote jardin/coeur beouf entiere.jpg" width="94" height="130"><img src="Photos pour cote jardin/coeurdeboeufcoupe.jpg" width="92" height="128"></div></td>
<td><div align="center">1 € 60</div></td>
<td> </td>
</tr>
<tr>
<td><div align="center">Marmande</div></td>
<td><div align="center">Le Kg</div></td>
<td><div align="center"><img src="Photos pour cote jardin/marmandeseule.JPG" width="131" height="122"><img src="Photos pour cote jardin/marmande2.JPG" width="189" height="124"></div></td>
<td><div align="center">1 € 60</div></td>
<td> </td>
</tr>
<tr>
<td><div align="center">Noire de Crimée</div></td>
<td><div align="center">Le Kg</div></td>
<td><img src="Photos pour cote jardin/tomate.jpg" width="130" height="129"><img src="Photos pour cote jardin/noire crimee coupe.jpg" width="202" height="130"></td>
<td><div align="center">2 € 60</div></td>
<td> </td>
</tr>
<tr>
<td><div align="center">Tomates Cerises </div></td>
<td><div align="center">300 gr</div></td>
<td><div align="center"><img src="Photos pour cote jardin/tomate cerise entiere.jpg" width="145" height="114"><img src="Photos pour cote jardin/tomate cerise coupe.jpg" width="143" height="114"></div></td>
<td><div align="center">2 € 00</div></td>
<td> </td>
</tr>
</table>
<p class="Style14">Les Fruits :</p>
<table width="796" border="1">
<tr>
<td><div align="center">Nom :</div></td>
<td><div align="center">Producteur<br>
Adresse</div></td>
<td><div align="center">Infos <br>
supplémentaires :</div></td>
<td><div align="center">Quantité :</div></td>
<td><div align="center">Photos :</div></td>
<td><div align="center">Prix :</div></td>
<td><div align="center">Ajouter au panier : </div></td>
</tr>
<tr>
<td><div align="center">Melon </div></td>
<td><div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div></td>
<td>
<td><div align="center">Le Kg </div></td>
<td><div align="center"><img src="Photos pour cote jardin/melon.JPG" width="115" height="103"><img src="Photos pour cote jardin/melonincline.JPG" width="103" height="103"></div></td>
<td><div align="center">1 €60</div></td>
<td> </td>
</tr>
<tr>
<td width="82"><div align="center">Melon </div></td>
<td width="62"><div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div></td>
<td width="129"><div align="center">Melon Jaune </div></td>
<td width="52"><div align="center">Le Kg </div></td>
<td width="329"><div align="center"></div></td>
<td width="43"><div align="center">1 € 00</div></td>
<td width="53"><div align="center"></div></td>
</tr>
<tr>
<td><div align="center">Melon </div></td>
<td><div align="center">
<div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div>
</div></td>
<td><div align="center">Melon Vert </div></td>
<td><div align="center">Le Kg</div></td>
<td><div align="center"></div></td>
<td><div align="center">1 € 00</div></td>
<td><div align="center"></div></td>
</tr>
<tr>
<td><div align="center">Melon </div></td>
<td><div align="center">
<div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div>
</div></td>
<td><div align="center">Melon "Première Fleur"<br>
Pays Cathare</div></td>
<td><div align="center">Le Kg</div></td>
<td><div align="center"><img src="Photos pour cote jardin/melonpf.JPG" width="111" height="118"></div></td>
<td><div align="center">1 € 80</div></td>
<td><div align="center"></div></td>
</tr>
<tr>
<td><div align="center">Pastèque </div></td>
<td><div align="center">
<div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div>
</div></td>
<td><div align="center">Pastèque Rouge</div></td>
<td><div align="center">Le Kg</div></td>
<td><div align="center"><img src="Photos pour cote jardin/pasteque.JPG" width="181" height="120"></div></td>
<td><div align="center">0 € 90</div></td>
<td><div align="center"></div></td>
</tr>
<tr>
<td><div align="center">Fraises </div></td>
<td><div align="center">
<div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div>
</div></td>
<td><div align="center"></div></td>
<td><div align="center">Le Kg</div></td>
<td><div align="center"><img src="Photos pour cote jardin/fraise1.JPG" width="183" height="121"><img src="Photos pour cote jardin/fraise3.JPG" width="180" height="119"></div></td>
<td><div align="center">5 € 00</div></td>
<td><div align="center"></div></td>
</tr>
</table>
<p class="Style14">Les Oeufs :</p>
<table width="796" border="1">
<tr>
<td width="82"><div align="center">Nom :</div></td>
<td width="82"><div align="center">Producteur<br>
Adresse</div></td>
<td width="129"><div align="center">Infos <br>
supplémentaires :</div></td>
<td width="82"><div align="center">Quantité :</div></td>
<td width="329"><div align="center">Photos :</div></td>
<td width="82"><div align="center">Prix :</div></td>
<td width="82"><div align="center">Ajouter au panier : </div></td>
</tr>
<tr>
<td><div align="center">Oeufs</div></td>
<td><div align="center" class="Style45">ESCAMEZ Alain<br>
11200 ROUBIA</div></td>
<td><div align="center">Oeufs Coque </div>
<td><div align="center">Les 6</div></td>
<td><div align="center"><img src="Photos Poules/Sans titre-1 copie.jpg" width="202" height="236"></div></td>
<td><div align="center">1 € 20</div></td>
<td> </td>
</tr>
<tr>
<td colspan="7"><div align="center"><img src="Photos Poules/IMGP2871.JPG" width="253" height="166"><img src="Photos Poules/IMGP2873.JPG" width="253" height="167"><img src="Photos Poules/IMGP2881.JPG" width="255" height="169"></div></td>
</tr>
</table>
<p class="Style14"></p>
<p class="Style14"></p>
<p> </p></td>
</tr>
<tr>
<td height="39">
<img src="images/baseleft.jpg" width=223 height=39 alt=""></td>
<td width=846 height=39 nowrap style="padding-left:25px; ">© Copyright Le Jardin de la Clairette. 2007.</td>
</tr>
</table>
</body>
</html>
A voir également:

4 réponses

Réponse 1 / 4
jlb59 Messages postés 343 Date d'inscription mercredi 25 août 2004 Statut Membre Dernière intervention 8 mars 2024 4
17 août 2007 à 18:05
Bonjour,

Est-ce que tu veux afficher le popup ou simplement agrandir l'img quand le curseur est dessus ?
0
lelo4 Messages postés 8 Date d'inscription vendredi 17 août 2007 Statut Membre Dernière intervention 18 août 2007
17 août 2007 à 18:08
Je voudrais afficher le popup comme sur le site
0
Réponse 2 / 4
Barracuda8 Messages postés 107 Date d'inscription vendredi 4 mai 2007 Statut Membre Dernière intervention 19 décembre 2011 65
17 août 2007 à 18:09
Salut,

La fonction de popup que tu veux rajouter sur ta page est faite en javascript. Si tu veux un exemple qui correspond exactement à ce que tu veux faire, vas sur à l'adresse du site en question et fait "afficher la source" dans l'onglet affichage de ton navigateur. Là s'affichera le code de la page avec les fonctions javascript utilisées et comment elles sont appelées.

A+
0
Réponse 3 / 4
sfley Messages postés 191 Date d'inscription vendredi 3 mai 2002 Statut Membre Dernière intervention 19 mars 2009 27
17 août 2007 à 18:16
effectivement c'est du javascript !

pour faire plus simple et en HTML, tu peux ouvrir une nouvelle page lorsque que l'on clique sur ton image :


par exemple pour le concombre : 


<td><div align="center">La Pièce </div></td> 
<td><div align="center"> <a href="http:\\www.google.fr" target="blank"> <img src="Photos pour cote jardin/concombresite.jpg" width="114" height="114"> </a> </div></td> 
<td><div align="center">0 € 80</div></td>


et tu remplaces http:\\www.google.fr par une page du genre concombredescriptif.html

A+
0
Réponse 4 / 4
lelo4 Messages postés 8 Date d'inscription vendredi 17 août 2007 Statut Membre Dernière intervention 18 août 2007
17 août 2007 à 18:24
Oui j'avais penser à faire ce moyen mais je préfère comme sur le site que j'ai indiqué
0

Discussions similaires

créer une adresse gmail pour une autre personne
Emma33000 -
Emma33000 -

2 réponses