begin process at 2010 03 21 06:58:10
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Fenêtre & Pop-up

 > OUVRIR UNE POPUP AGRANDISSANT UNE IMAGE ET SE FERME AUTOMATIQUEMENT

OUVRIR UNE POPUP AGRANDISSANT UNE IMAGE ET SE FERME AUTOMATIQUEMENT


 Information sur la source

Note :
9 / 10 - par 6 personnes
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Fenêtre & Pop-up Niveau :Débutant Date de création :24/01/2003 Date de mise à jour :24/01/2003 11:58:30 Vu :33 992
Auteur : Aurelyyy

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

 Description

Permet d'ouvrir une popup avec l'agrandissement d'une image et se ferme s'il y a un click sur une autre fenêtre

Source

  • <SCRIPT LANGUAGE="JavaScript">
  • function PopupImage(img) {
  • w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');
  • w.document.write("<HTML><BODY onblur=\"window.close();\"><IMG src='"+img+"'>");
  • w.document.write("</BODY></HTML>");
  • w.document.close();
  • }
  • </script>
  • sur votre body :
  • <a href="javascript:PopupImage('Ici le chemin de votre image)">
  • <img src="chemin de votre image" width="60" height="30" border="0" alt=""></a>
  • whidth et height sont à ajuster pour votre convenance. 
<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
	w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');	
	w.document.write("<HTML><BODY onblur=\"window.close();\"><IMG src='"+img+"'>");
	w.document.write("</BODY></HTML>");
	w.document.close();
}
</script>

sur votre body : 

<a href="javascript:PopupImage('Ici le chemin de votre image)">
<img src="chemin de votre image" width="60" height="30" border="0" alt=""></a>

whidth et height sont à ajuster pour votre convenance.



 Sources de la même categorie

Source avec Zip Source avec une capture FENETRE D'ACTUALITE par kazma
Source avec Zip Source avec une capture CLASS POP-IN AVEC EFFET SOUS JQUERY DE "CONNEXION" STYLE CS ... par Nementon
Source avec Zip Source avec une capture FENETRE DE LOGIN par kazma
Source avec Zip Source avec une capture MESSAGES VIRTUELS par grarestephane
Source avec Zip Source avec une capture ENVOIE DE MESSAGE AUTOMATIQUE par grarestephane
Toutes les sources de la catégorie Fenêtre & Pop-up

Commentaires et avis

Commentaire de zzzzzz le 03/08/2004 21:19:19

Source utile, merci :)

Commentaire de zzzzzz le 03/08/2004 21:24:15

10/10

Commentaire de kikong le 26/12/2005 11:37:39

Et les gars j'ai rien compris comment on mets votre script!!

En gros j'ai des images et je voudrais que quant on clique dessus, un agrandissement en popup se fasse
J'ai essayer de choper des codes mais j'ai toujours pa réussi help!!!!

Merci!

Commentaire de dandvp le 28/04/2006 14:55:57

Salut kikong!
Ca fonctionne bien mais y'a une petite erreur oubli de cote '
voici le bon:
entre <head> :

<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
    w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');    
    w.document.write("<HTML><BODY onblur=\"window.close();\"><IMG src='"+img+"'>");
    w.document.write("</BODY></HTML>");
    w.document.close();
}
</script>
  
sur votre body :
  
<a href="javascript:PopupImage('Ici le chemin de votre image')">
<img src="chemin de votre image" width="60" height="30" border="0" alt=""></a>
  
whidth et height sont à ajuster pour votre convenance.

Mylo ++

Commentaire de kikong le 29/04/2006 09:48:31

Body??

donc je mets ça dans ma page web :
<head> :

<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
    w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');    
    w.document.write("<HTML><BODY onblur=\"window.close();\"><IMG src='"+img+"'>");
    w.document.write("</BODY></HTML>");
    w.document.close();
}
</script>

et ça où?

<a href="javascript:PopupImage('Ici le chemin de votre image')">
<img src="chemin de votre image" width="60" height="30" border="0" alt=""></a>

Commentaire de kikong le 29/04/2006 09:48:44

Body??

donc je mets ça dans ma page web :
<head> :

<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
    w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');    
    w.document.write("<HTML><BODY onblur=\"window.close();\"><IMG src='"+img+"'>");
    w.document.write("</BODY></HTML>");
    w.document.close();
}
</script>

et ça où?

<a href="javascript:PopupImage('Ici le chemin de votre image')">
<img src="chemin de votre image" width="60" height="30" border="0" alt=""></a>

Commentaire de dandvp le 29/04/2006 12:38:09

ben ta page html doit se présenter comme ca en principe:
<html>
<head>
  <title></title>
</head>
<body>

<a href="javascript:PopupImage('Ici le chemin de votre image')">
<img src="chemin de votre image" width="60" height="30" border="0" alt=""></a>

</body>
</html>

En fait <a href...></a> tu le place là où tu souhaites faire ton lien (là où il y a ton image) et tout ca entre les balise <body>   </body>

Bon courage...

Mylo ++

Commentaire de bigdoudouille le 25/05/2006 19:59:33

Comment faire si on veut que le pop up soit une autre image que celle en petit?

Commentaire de feloute le 29/05/2006 18:12:55

Salut

j'utilise un onmouseover pour pour mes images, et l'ajout de ce script fonctionne mais annule completement la fonction onmouse.

Est que quelqu'un pourrait m'aider?? merci par avance.
Feloute

Voila le code avant modif .
<a href="/lamosaique/photos/toit du palais guell mosaique art nouveau gaudi.jpg"
onmouseover="changeImages('artnouvo_31', '/images/artnouvo_31-over.gif'); return true;"
onmouseout="changeImages('artnouvo_31', '/images/artnouvo_31.gif'); return true;"
onmousedown="changeImages('artnouvo_31', '/images/artnouvo_31-over.gif'); return true;"
onmouseup="changeImages('artnouvo_31', '/images/artnouvo_31-over.gif'); return true;">
<img name="artnouvo_31" src="/images/artnouvo_31.gif" width="256" height="257" border="0" alt=""></a></td>

Commentaire de dandvp le 29/05/2006 19:24:10

Salut bigdoudouille !
pour que le pop up soit une autre image que celle en petit, il suffit de changer le lien de la balise <img src="lien d'une autre image que celle petite">.
Voilà!

concernant Feloute,
il faudrait que je test ton code mais là jsuis en plein période de partiels donc désolé... essaye de faire avec le code que j'ai donné...
Bone continuation ++

Commentaire de bigdoudouille le 29/05/2006 19:39:55

merci bcp ca marche
merci

Commentaire de bigdoudouille le 22/07/2006 14:40:44

Rebonjour

bon moi mon code en fait me permet d'ouvrir une image en dans un popup.
Ok très bine mais

1. Je voudrais que dès que l'on clique sur une autre image. le premier popu se ferme automatiquement

2. Je voudrais aussi mettre du texte au-dessus de l'image dans le popup.

Comment faire
merci

Commentaire de dandvp le 24/07/2006 20:14:12

re bigdoudouille:

regarde un peu plus haut, on a déjà donné la réponse a ta 1ère question. bon aller jte l'indique quand même ci dessous:

Balise script a inclure dans le code entre les balises <head>:

<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
    w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');    
    w.document.write("<HTML><BODY onblur=\"window.close();\"><IMG src='"+img+"'>");
    w.document.write("</BODY></HTML>");
    w.document.close();
}
</script>


Concernant ta 2ème question je pense que tu dois vraiment être débutant pour poser ce genre de question. Un conseil, vas sur google et recherche "apprendre html" ou encore "débuter en html", ces cours te seront vraiment profitable pour la suite de tes travaux.

Je te donne quand même la solution dans le cas où tu n'as vraiment pas le temps de lire quelques cours html...

Donc pour mettre du texte au dessus de l'image pop up, il suffit simplement que tu ecrives ton texte entre les balises <body> dans le <script>. Voilà ce que ca donnerai :

<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
    w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=510, height=210');    
    w.document.write("<HTML>TAPEZ ICI LE TEXTE QUE TU VEUX AU DESSUS DE L'IMAGE<BODY onblur=\"window.close();\"><IMG src='"+img+"'>");
    w.document.write("</BODY></HTML>");
    w.document.close();
}
</script>

Voilà j'espère tout de meme que tu prendras le temps pour apprendre l'html qui est la base essentiel pour un jeune webmaster ;)

PS: envoi d'autres questions s'il y en a avant le 29 juillet, car ensuite je serais en vacance :D
++

Commentaire de ttropnull le 03/09/2006 21:14:28

bonjour,
bon alors moi c'est un peu particulier car mon image vient d'un chemin enregistré dans ma base mysql donc d'une variable donc d'une page en php (et je debute en php).
quand je click sur mon image, rien ne se passe...
Ce doit etre un probleme de code car j'ai un beau "erreur sur la page" dans la barre d'état (meme en metant le chemin en 'dur' dans le code).
ps:
1) tu mets directement w=open, java sait que w est un popup?
2) si un internaute a un bloquage publicitaire sur son fire wall, le popup va t'il s'ouvrir quand meme?
Merci d'avance....

Commentaire de bigdoudouille le 10/09/2006 21:45:24

Ok tu me donnes des code smais est-ce que le texte ets modifiable si j'ai une possbilité d'avoir 5 pop up sur une même page. Ici le cas que tu me présentes c'est pour juste un seul popup possible non??

Commentaire de Ego4 le 18/10/2006 00:37:57

Alors moi je souhaiterais pouvoir paramétrer la pop-up qui s'ouvrira (image de fond, ou couleurs...)

Est-ce possible ? Comment ?

Commentaire de brw le 11/08/2007 18:45:34

bonjour,
merci pour ce script. Il marche très bien sur mozilla, sur safari mais sur internet explorer le pop-up reste à l'arrière-plan, comment fiare pour éviter ça ?
merci de votre aide.

Commentaire de dandvp le 10/09/2007 03:43:27

Bonjour à tous !!
Même question que BRW (post précédant)
MErci d'avance...

Cdt

Commentaire de vlxsources le 20/09/2007 11:13:11

Salut à tous,
J'ai pour ma part résolu le problème sous IE et incluant un focus sur la fenêtre lors de l'ouverture :
<SCRIPT LANGUAGE="JavaScript">
function PopupImage(img) {
    w=open("",'image','weigth=toolbar=no,scrollbars=no,resizable=yes, width=520, height=354');
    w.focus();    
    w.document.write("<HTML><BODY onblur=\"window.close();\"><IMG src='"+img+"'>");
    w.document.write("</BODY></HTML>");
    w.document.close();
}
</script>

Commentaire de phpajax le 24/10/2007 04:26:45

function PopupImage(img) {
titre="Agrandissement";
w=open("",'image','width=400,height=400,toolbar=no,scrollbars=no,resizable=no');
w.document.write("<HTML><HEAD><TITLE>"+titre+"</TITLE></HEAD>");
w.document.write("<SCRIPT language=javascript>function checksize() { if (document.images[0].complete) { window.resizeTo(document.images[0].width+10,document.images[0].height+30); window.focus();} else { setTimeout('checksize()',250) } }</"+"SCRIPT>");
w.document.write("<BODY onload='checksize()' onblur='window.close()' onclick='window.close()' leftMargin=0 topMargin=0 marginwidth=0 marginheight=0>");
w.document.write("<TABLE width='100%' border='0' cellspacing='0' cellpadding='0' height='100%'><TR>");
w.document.write("<TD valign='middle' align='center'><IMG src='"+img+"' border=0 alt='Mon image'>");
w.document.write("</TD></TR></TABLE>");
w.document.write("</BODY></HTML>");
w.document.close();
}



-----> le popup se ferme si on clique sur limage, la taille du popup=la taille réelle de l'image

Commentaire de lassad_haddaji le 21/02/2008 17:42:20

merci pour le script tres utiles

Commentaire de karine2903 le 17/12/2008 09:00:37

Bonjour, est-ce que ce code ressemble aux popup lightbox avec texte, fond flou sombre et bouton fermer ? j'ai déjà essayer plusieurs codes (pas encore celui-ci) mais je ne trouve pas encore mon bonheur. Ya t-il une démo ? Merci.

Commentaire de agreph2009 le 20/01/2010 11:07:29 9/10

Merci phpajax pour ce script qui fonctionne parfaitement et sous tous les navigateurs. Cependant j'aurai une petite question : Comment peut on faire pour la Popup s'ouvre à l'endroit désirer et non pas en haut à gauche du navigateur.
Merci pour votre réponse

Commentaire de phpajax le 20/01/2010 11:12:16

ajouter sa avant :
if (document.images[0].complete) {....
----------

var x=150, y=150; // x et y défini la position de la popup
top.moveTo(x,y);

Commentaire de agreph2009 le 20/01/2010 12:01:58

Merci pour votre réponse rapide mais si on voulait que la popup reste placée à l'intérieur du navigateur et non défini sur l'écran étant donné que l'on ne sait pas les dimensions de l'écran de l'internaute.
Merci de votre infos

Commentaire de phpajax le 20/01/2010 14:05:43

les dimensions de l'écran du visiteur :
<script>

var larg= screen.width,
height = screen.height;
</script>

si tu veux que ta popup soit centré, tu la place là ou il faut : x = (screen.width-largeur de ta popup)/2 et y = (screen.height-hauteur de ta popup)/2
.....

Commentaire de agreph2009 le 20/01/2010 14:11:24

Merci c'est super sympa PHPAJAX

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


HTC Tattoo
Entre 9€ et 329€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode
 
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 : 0,406 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)