begin process at 2012 05 28 14:28:14
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > POP UP ZOOM D'UNE IMAGE PRESQUE PARFAIT

POP UP ZOOM D'UNE IMAGE PRESQUE PARFAIT


 Information sur la source

Note :
7 / 10 - par 4 personnes
7,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Classé sous :popup, zoom, image, affichage, photo Niveau :Débutant Date de création :03/02/2004 Vu :24 998
Auteur : bouillou32

Ecrire un message privé
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 Description

Ce code vous affiche votre image miniature, et permet de zoomer sur celle-ci. Le zoom s'effectue par une pop up dont la taille et déterminée automatiquement par celle de votre photo encadrée d'une bordure de couleur que vous pouvez avec votre site.

Je n'ai pas réussi à centrer automatiquement la fenêtre. Si quelqu'un peut m'aider?

Source

  • Dans le Head
  • <script language="JavaScript">
  • function afficheMaxi(chemin)
  • {
  • i1 = new Image();
  • i1.src = chemin;
  • html = '<HTML><HEAD><TITLE>Nom de la fenêtre</TITLE></HEAD><BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=5 MARGINHEIGHT=0 body bgcolor="#4D5B88"><CENTER><IMG SRC="'+chemin+'" BORDER=0 NAME=imageTest onLoad="window.resizeTo(document.imageTest.width+24,document.imageTest.height+40)"></CENTER></BODY></HTML>';
  • popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=0, width=500, height=375, left=250, top=125');
  • popupImage.document.open();
  • popupImage.document.write(html);
  • popupImage.document.close()
  • }
  • </script>
  • Dans le Body (pour 1 image)
  • <a href="javascript:;" onclick="afficheMaxi('images/image_zoom.JPG')">
  • <img src="images/image_small.JPG" border=1 alt="Cliquer pour agrandir" width="150" height="112"></a>; 
Dans le Head

<script language="JavaScript">
function afficheMaxi(chemin)
	{

	i1 = new Image();
	i1.src = chemin;

	html = '<HTML><HEAD><TITLE>Nom de la fenêtre</TITLE></HEAD><BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=5 MARGINHEIGHT=0 body bgcolor="#4D5B88"><CENTER><IMG SRC="'+chemin+'" BORDER=0 NAME=imageTest onLoad="window.resizeTo(document.imageTest.width+24,document.imageTest.height+40)"></CENTER></BODY></HTML>';
	popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=0, width=500, height=375, left=250, top=125');
	popupImage.document.open();
	popupImage.document.write(html);
	popupImage.document.close()
	}
</script>


Dans le Body (pour 1 image)


<a href="javascript:;" onclick="afficheMaxi('images/image_zoom.JPG')">
<img src="images/image_small.JPG" border=1  alt="Cliquer pour agrandir" width="150" height="112"></a>;

 Conclusion

Je n'ai pas réussi à centrer automatiquement la fenêtre. Si quelqu'un peut m'aider?


 Sources de la même categorie

Source avec Zip Source avec une capture FORMULAIRE TABLEAU par vic511
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec Zip Source avec une capture CONTRAINTE DE SAISIE SUR CHAMPS INPUT par ryosama
SELECTS DÉPENDANTS PRÉ-CHARGÉS D'UNE SEULE OPTION par phm
Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Toutes les sources de la catégorie Formulaire

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture CENTRAGE D'IMAGE AVEC PETIT EFFET par kazma
Source avec Zip Source avec une capture LIGHTBOX DIAPORAMA par kazma
Source avec Zip Source avec une capture CAROUSELLE 3D par kazma
Source avec Zip Source avec une capture LOUPE SUR IMAGE AU PASSAGE DE LA SOURIS ! par adelami
Source avec Zip ZOOM SUR UNE IMAGE par neolien

Commentaires et avis

Commentaire de jlbrenas le 04/02/2004 08:59:00

Ce script est très intéressant. Etant débutant je serais incapable de donner la solution pour le centrage. Je suppose qu'il faut déterminer la résolution de l'écran dans laquelle le popup s'ouvre et la taille de l'image zoomée pour calculer la position initiale qu'elle doit prendre pour être centrée.
Une autre amélioration que je vois, serait d'empêcher l'ouverture de plusieurs popup.
Merci et je vais chercher de mon côté.

Commentaire de Kirua le 04/02/2004 14:10:51

en javascript tu as un objet qui s'appelle Screen (ou screen), et qui possède entre autres les propriétés width et height (joue un peu avec les majuscules, ça fait lgtps que j'en fais plus). à partir de là tu fais

posx = largeur de l'écran - largeur de la fenetre / 2;

et pareil pr posy, ça donnera les coord de la fenetre

j'espère que c t intelligible ;-)

Commentaire de bouillou32 le 05/02/2004 13:10:32

Hello,

Alors ça, j'y avais pensé mais je devais mal initialiser mes variables ou je ne sais quoi parceque l'image ce centrait juste uniquement la deuxième fois que je l'ouvrais?!

Je m'y étais pris comme suis:

Si qqn voit une erreur dans ce script?

&lt;script language="JavaScript"&gt;
function afficheMaxi(chemin)
{
//Déclaration des variables
var largeur = 0;
var hauteur = 0;
var Left = 0;
var Top = 0;

//Main
i1 = new Image();
i1.src = chemin;
largeur = i1.width;
hauteur = i1.height;
Left=(screen.width-largeur)/2;
Top=(screen.height-hauteur)/2;

html = '&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt;Image jeunesse de Bottens&lt;/TITLE&gt;&lt;/HEAD&gt;&lt;BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=5 MARGINHEIGHT=0 body background="images/fond_zoom.jpg"&gt;&lt;CENTER&gt;&lt;IMG SRC="'+chemin+'" BORDER=0 NAME=imageTest onLoad="window.resizeTo(document.imageTest.width+24,document.imageTest.height+40)"&gt;&lt;/CENTER&gt;&lt;/BODY&gt;&lt;/HTML&gt;';
popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=0, width=500, height=375, left=" + Left + ", top=" + Top + "');
popupImage.document.open();
popupImage.document.write(html);
popupImage.document.close()
}
&lt;/script&gt;

Commentaire de leris le 13/02/2004 09:04:16

tu as juste oublié un truc dans TON script :

/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
Ne copiez ce code qu'une fois dans votre page
*/

Commentaire de LazarusLand le 04/05/2006 03:10:29

MDR ça casse ! lol.
En tout cas c'est très utile quand même comme code.

Commentaire de aqwzsxk le 19/08/2009 11:31:13

il y a une petite erreur de syntaxe dans le dernier code de BOUILLOU32 :

il faut remplacer :
left=" + Left + ", top=" + Top + "

par :
left='+Left+', top='+Top+'

et ça marche parfaitement !

Merci de votre aide.

Commentaire de Vyse69 le 06/08/2010 19:12:51

Essayez avec mes quelques modifications...

<script language="JavaScript">
function afficheMaxi(chemin)
{

var scroll;
scroll='scrollbars=0';

i1 = new Image();
i1.src = chemin;

largeur = i1.width+22;
hauteur = i1.height+60;

var slargeur;
var shauteur;
slargeur=screen.width;
shauteur=screen.height;

if(largeur>slargeur) { largeur=screen.width*0.9;scroll='scrollbars=1'; }
if(hauteur>shauteur) { hauteur=screen.height*0.9;scroll='scrollbars=1'; }


html = '<HTML><HEAD><TITLE>Zoom</TITLE></HEAD><BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=5 MARGINHEIGHT=0 body bgcolor="ffffff" onClick="javascript:self.close()"><CENTER><a href="javascript:self.close()"><IMG SRC="'+chemin+'" BORDER=0 NAME=imageZoom onLoad="window.resizeTo('+largeur+','+hauteur+')"></a></CENTER></BODY></HTML>';
popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,'+scroll+',resizable=0, width='+largeur+', height='+hauteur+', left=0, top=0');
popupImage.document.open();
popupImage.document.write(html);
popupImage.document.close()
}
</script>

Petite image :<br>
<a href="javascript:;" onclick="afficheMaxi('http://www.memoclic.com/0-50-600x450/fond-ecran-paysage-fantastique.jpg')">
<img src="http://t1.gstatic.com/images?q=tbn:umB1K56sPcVtIM:http://www.memoclic.com/0-50-600x450/fond-ecran-paysage-fantastique.jpg" border=1 alt="Cliquer pour agrandir" width="150" height="112"></a>
<br><br>
Grande image :<br>
<a href="javascript:;" onclick="afficheMaxi('http://www.papermust.com/galleries/paysages/paysage_17_1920x1440.jpg')">
<img src="http://t0.gstatic.com/images?q=tbn:XOEcbzrHgPr7sM:http://www.papermust.com/galleries/paysages/paysage_17_1920x1440.jpg" border=1 alt="Cliquer pour agrandir" width="150" height="112"></a>

Commentaire de Vyse69 le 06/08/2010 20:04:56

J'ai encore amélioré le code :

1- Pour résumer, les fenêtres s'adaptent à la dimension de l'image sans dépasser la taille de l'écran et s'ajustent pour bien voir les barres de scroll.
2- Les barres de scroll disparaissent pour les images qui s'affichent en entier à l'écran.
3- La fenêtre se centre sur l'écran. Si l'image est plus grande que l'écran, la fenêtre s'ajuste dans le coin supérieur gauche.
4- Il est possible de fermer la fenêtre en cliquant sur l'image.

Et maintenant, le code presque parfait encore un peu plus parfait :

----

<script language="JavaScript">
function afficheMaxi(chemin)
{

var largeur;
var hauteur;
var left;
var top;
var scroll;

image = new Image();
image.src = chemin;

ilargeur = image.width+22;
ihauteur = image.height+60;

slargeur=screen.width;
shauteur=screen.height;

left=(slargeur-ilargeur)/2;
top=(shauteur-ihauteur)/2;

scroll='scrollbars=0';

if(ilargeur>slargeur) { largeur=screen.width*0.9;scroll='scrollbars=1';left=0; } else { largeur=ilargeur; }
if(ihauteur>shauteur) { hauteur=screen.height*0.9;scroll='scrollbars=1';top=0; } else { hauteur=ihauteur; }


html = '<HTML><HEAD><TITLE>Zoom</TITLE></HEAD><BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=5 MARGINHEIGHT=0 body bgcolor="ffffff" onClick="javascript:self.close()"><CENTER><a href="javascript:self.close()"><IMG SRC="'+chemin+'" BORDER=0 NAME=imageZoom onLoad="window.resizeTo('+largeur+','+hauteur+')"></a></CENTER></BODY></HTML>';
popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,'+scroll+',resizable=0, width='+largeur+', height='+hauteur+', left='+left+', top='+top+'');
popupImage.document.open();
popupImage.document.write(html);
popupImage.document.close()
}
</script>

Petite image :<br>
<a href="javascript:;" onclick="afficheMaxi('http://www.memoclic.com/0-50-600x450/fond-ecran-paysage-fantastique.jpg')">
<img src="http://t1.gstatic.com/images?q=tbn:umB1K56sPcVtIM:http://www.memoclic.com/0-50-600x450/fond-ecran-paysage-fantastique.jpg" border=1 alt="Cliquer pour agrandir" width="150" height="112"></a>
<br><br>
Grande image :<br>
<a href="javascript:;" onclick="afficheMaxi('http://www.papermust.com/galleries/paysages/paysage_17_1920x1440.jpg')">
<img src="http://t0.gstatic.com/images?q=tbn:XOEcbzrHgPr7sM:http://www.papermust.com/galleries/paysages/paysage_17_1920x1440.jpg" border=1 alt="Cliquer pour agrandir" width="150" height="112"></a>

----

Commentaire de Vyse69 le 06/08/2010 22:30:33

Petit problème corrigé...

Effectivement, la première ouverture du "zoom" ne se faisait pas correctement.
J'ai donc procédé autrement, ce qui oblige à renseigner, pour chaque image, la taille de celle-ci dans le lien à cet endroit : onclick="Zoom(...);

Je pense que cette fois-ci, nous sommes proches du code parfait ;)

-----

<script language="JavaScript">
function Zoom(url,ilargeur,ihauteur)
{
var largeur;
var hauteur;
var left;
var top;
var scroll;

image = new Image();
image.src = url;

slargeur=screen.width;
shauteur=screen.height;

left=(slargeur-ilargeur)/2;
top=(shauteur-ihauteur)/2;

scroll='scrollbars=0';

if(ilargeur>slargeur) { largeur=screen.width*0.9;scroll='scrollbars=1';left=0; } else { largeur=ilargeur; }
if(ihauteur>shauteur) { hauteur=screen.height*0.9;scroll='scrollbars=1';top=0; } else { hauteur=ihauteur; }


html = '<HTML><HEAD><TITLE>Zoom</TITLE></HEAD><BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=5 MARGINHEIGHT=0 body bgcolor="ffffff" onClick="javascript:self.close()"><CENTER><a href="javascript:self.close()"><IMG SRC="'+url+'" BORDER=0 NAME=imageZoom></a></CENTER></BODY></HTML>';
popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,'+scroll+',resizable=0, width='+largeur+', height='+hauteur+', left='+left+', top='+top+'');
popupImage.document.open();
popupImage.document.write(html);
popupImage.document.close();
}
</script>

Petite image :<br>
<a href="javascript:;" onclick="Zoom('http://www.memoclic.com/14-3683-600x450/fond-ecran-paysage-paradisiaque.jpg','600','450')" title="Cliquer pour agrandir">
<img src="http://www.memoclic.com/14-3683-600x450/fond-ecran-paysage-paradisiaque.jpg" border=1 alt="Cliquer pour agrandir" width="150" height="112"></a>
<br><br>
Grande image :<br>
<a href="javascript:;" onclick="Zoom('http://www.papermust.com/galleries/paysages/paysage_17_1920x1440.jpg','1920','1440')" title="Cliquer pour agrandir">
<img src="http://t0.gstatic.com/images?q=tbn:XOEcbzrHgPr7sM:http://www.papermust.com/galleries/paysages/paysage_17_1920x1440.jpg" border=1 alt="Cliquer pour agrandir" width="150" height="112"></a>

-----

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Zoom sur image au passage dur curseur et affichage dans une même fenêtre [ par amewole ] Voici mon problème :Je dois mettre en place un système d'affichage d'un ensemble de photos (vignettes) rangé dans un tableau html et qui s'affiche une aide fermeture popup image [ par the red power 65 ] bonjour a tousj'utilise ce script pour faire afficher mes images dans une popup :'&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt;Image&lt;/TITLE&gt;&lt;/HEAD&gt pb avec un popup [ par kun00538 ] bonjour a tousVoila j'ai une page html avec un avatar par default quand l'utilisateur clic sur le bouton pour change d'image j'ouvre une popup pour ac Découpage d'une image [ par ecoll_manu ] bonjour &#224; tousvoil&#224; ce n'est pas ais&#233; ce que je souhaite faire, mais je ne vois pas d'autre solution pour le faire.Je vous explique ce appel de fct javascript [ par ksaillard ] je souhaite faire un diaporama dans ma page html je fais appel à une focntion javacript qui est dans 'ejs_visionneuse_image.js' : exec_vignette(chemi Remplir un champ du formulaire via popup (URGENT) [ par jmobylette ] Bonjour,Je suis en train de faire un formulaire et j'ai un champ image :Image : &lt;input type="hidden" name="image"</F Affichage d'un popup sans intervention humaine au préalable [ par phicarre ] La plupart des exemples d'affichage de popup sont bas&#233;s sur une action au pr&#233;alable du client: formulaire-envoi-popup.J'ai une application e Javascript PHP et images popup [ par amewole ] Voici mon probl&#232;me : J'affiche dans une page html/php une dizaine de photos dans un tableau HTML et je veux que quand on clique sur&nbsp; une ima popup image ie6 firefox [ par alligo ] Bonjour à tous,je ne connais quasi rien de javascript j'ai juste pris un script sur un site qui le proposait et je l'ai recopié.j'ai un petit probleme redimensionner une popup en fonction de l'image contenu [ par atomik29 ] Bonjour a tous.Voila mon probleme, j'ai une popup contenant une image, et je voudrais que cette popup s'adapte automatiquement a la taille de l'image.


Nos sponsors


Sondage...

Comparez les prix


Archos 7 home tablet - 2 Go
Entre 149€ et 159€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,248 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)