Pop up sur zone réactive

**ludopene** · 03/02/2009, 01h38

Bonsoir,

je reviens encore vers vous pour un problème de zone réactive.
Cette fois je souhaiterais que ma zone reactive ouvre un agrandissement d'un tableau mais dans une fenêtre popup et non pas une nouvelle page.
J'ai cherché un peu partout mais je ne comprends pas, si vous aviez une explication simple....

bonne soirée !

**SpaceFrog** · 03/02/2009, 09h09

tu peux par exemple faire dans la balise area

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

href="autrepage.htm" onclick="window.open('autrepage.htm');return false;"

**ludopene** · 04/02/2009, 00h57

bonsoir spacefrog, le forum,

je ne comprends pas très bien, je dois refaire une feuille html pour pouvoir mettre cette photo ? pour l'instant j'en ai pas eu besoin, la zone réactive prend directement la photo dans mon dossier image. La seule chose c'est qu'elle l'ouvre dans un nouvel onglet alors que je souhaiterais dans un popup.
un exemple s'impose, je n'arrive pas à m'expliquer : http://www.jejavascript.net/protimage.php

c'est à ça que j'aimerais arriver avec protection du clic droit etc.., pareil mais sur ma zone réactive, pas à partir d'une vignette.

merci, bonne soirée

**SpaceFrog** · 04/02/2009, 08h45

ouvrir directement une image en pointant dessus est plus qu'hasardeux, tu ne maitrise pas du tout l'affichage.
au moins avec une page html tu gères ce que tu veux ...
à toi de voir ...

**Bovino** · 04/02/2009, 08h51

+1 Spaffy.
D'autant que dans l'exemple sur ton lien, même si le code n'appelle pas directement une page HTML, il la construit à grands coups de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
html = '<HTML><HEAD><TITLE>Image</TITLE><meta http-equiv="Pragma" content="no-cache"></HEAD><BODY leftmargin=0 marginwidth=0 topmargin=0 marginheigth=0 oncontextmenu="return false"><CENTER>'+
'<a href="#" onClick="window.close()"><IMG SRC="'+cheminImage+'" BORDER=0 NAME=monImage alt="'+texte+'"border="0" onLoad="window.resizeTo(document.monImage.width+20,document.monImage.height+80); window.moveTo((screen.width-document.monImage.width)/2,5)"> </a></CENTER></BODY></HTML>';
if (fois == 1 ) ouvrirImage.close();
ouvrirImage = window.open('','_blank','toolbar=0,location=0,menuBar=0,scrollbars=0,resizable=0');
ouvrirImage.document.write(html);

Ce qui est du code à faire

**SpaceFrog** · 04/02/2009, 08h52

De mémoire (il va encore me dire que non ) Javatwister à posté une contribution sur la gestion d'affichage d'une image en popup ...

**ludopene** · 05/02/2009, 01h59

bonsoir,

merci pour vos réponses mais je suis un débutant, un vrai de vrai !

je comprends rien je suis dépité !

je suis un peu effrayé par l'idée de créer de nouvelles pages , je dois avoir environ 60 pages à créer alors !lol

j'ai trouvé des exemples par rapport a des vignettes comme dans mon exemple mais je ne sais pas comment l'adapter à une zone réactive, si je poste le code de ma page , pourrez vous me faire un exemple ?

bonne soirée !

**ludopene** · 06/02/2009, 02h02

voici par exemple une de mes pages :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!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=utf-8" />
<title>Galerie 1</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	background-image: url(Images/galerie1.jpg);
	background-repeat: no-repeat;
	background-color: #000000;
}
.Style1 {
	color: #FFFFFF
}
a:link {
	color: #0000FF;
}
a:visited {
	color: #0000FF;
}
.Style2 {
	font-size: x-large
}
.Style3 {
	font-size: 24px
}
-->
</style>
 
</head>
<body>
<p><img src="Images/entete.jpg" width="1330" height="124" /></p>
<p><img src="Images/barredeliens.jpg" width="115" height="528" hspace="20" vspace="20" border="0" align="left" usemap="#Map" />
  <map name="Map" id="Map">
    <area shape="rect" coords="5,7,108,41" href="index.html" />
    <area shape="rect" coords="1,48,112,87" href="biographie.html" />
    <area shape="rect" coords="3,131,105,169" href="Galerie2.html" />
  <area shape="rect" coords="3,171,109,214" href="Galerie3.html" />
  <area shape="rect" coords="5,218,108,258" href="Galerie4.html" />
  <area shape="rect" coords="7,265,107,302" href="Galerie5.html" />
  <area shape="rect" coords="2,429,111,466" href="http://www.blog.martinepene-pastel.fr/" /><area shape="rect" coords="1,392,113,425" href="Divers.html" />
  </map>
</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center" class="Style3">Portraits Asiatiques</p>
<p align="center">&nbsp;</p>
<p align="center" class="Style2"><img src="Images/Galerie 1/menu tableau 1 copie.jpg" alt="" width="1050" height="353" hspace="50" border="0" align="middle" usemap="#tableau1" />
  <!--le petit garçon
50x50
Pastel -->
  <map name="tableau1" id="tableau1">
    <area shape="rect" coords="156,60,303,277" href="Images/Galerie 1/DSC02520.JPG" />
    <area shape="rect" coords="312,53,465,280" href="Images/Galerie 1/DSC02257.JPG" />
    <area shape="rect" coords="472,62,602,288" href="Images/Galerie 1/DSC026872.jpg" />
    <area shape="rect" coords="610,67,752,287" href="Images/Galerie 1/serenite.jpg" />
    <area shape="rect" coords="764,66,891,286" href="Images/Galerie 1/jeune tibetain.jpg" />
    <area shape="rect" coords="903,68,1040,284" href="Images/Galerie 1/DSC02284.JPG" />
    <area shape="rect" coords="15,47,152,290" href="Images/Galerie 1/banniere.jpg" />
    <area shape="rect" coords="8,58,152,278" href="Images/Galerie 1/banniere.jpg" />
  </map>
</p>
<p align="center"></map></p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<blockquote>
  <blockquote>
    <p align="center">&nbsp;</p>
    <blockquote>
      <p align="center"><em> Cliquez sur un tableau pour l'agrandir</em></p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </blockquote>
  </blockquote>
  <p align="center"><span class="Style1">:: Copyright©Martinepene-pastel.fr - Tous droits réservés - Toutes reproductions, même   partielles, interdites ::<br />
  :: Coded by<strong> Ludovic Pène</strong>-   Designed by <strong>Ludovic Pène </strong>::</span></p>
</blockquote>
</body>
 
 
</html>

**ludopene** · 07/02/2009, 18h04

personne n'a une petite idée ?

**ludopene** · 17/02/2009, 00h39

j'avais trouvé le code pour une vignette a agrandir mais pas à partir d'une zone reactive, c'est chose faite !

<area shape="rect" coords="15,47,152,290" href="Images/votre image.jpg" onclick="window.open('','popup','width=400,height=400,top=200,left=250,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0')" target="popup">

chemin défini par la zone reactive automatiquement
chemin de votre image
code a ajouter pour chaque zone reactive

Pop up sur zone réactive

JavaScript

Discussions similaires

Partager

Partager