Ouvrir une popup en cliquant sur une image
Thomas
-
Jocker -
Jocker -
Bonjour tout le monde,
je suis un petit nouveau et je connais un peu la programmation mais pas du tout le javascript et j'ai un probleme.
voilà, j'ai des images qui défilent sur un bandeau, et ces images sont de taille réduite. Je veux que, en cliquant dessus une popup s'ouvre et contienne la grande image. J'aimerais de plus que l'on ne voit pas l'url mais un titre dans la barre de la popup
Je ne sais pas comment faire, et bien qu'ayant cherché je ne trouve pas. Je suppose qu'il faut utilisé la fonction window.open mais je n'en suis pas sur.
Ou peut etre qu'il faut le faire dans un autre langage.
Merci d'avance pour votre aide.
je suis un petit nouveau et je connais un peu la programmation mais pas du tout le javascript et j'ai un probleme.
voilà, j'ai des images qui défilent sur un bandeau, et ces images sont de taille réduite. Je veux que, en cliquant dessus une popup s'ouvre et contienne la grande image. J'aimerais de plus que l'on ne voit pas l'url mais un titre dans la barre de la popup
Je ne sais pas comment faire, et bien qu'ayant cherché je ne trouve pas. Je suppose qu'il faut utilisé la fonction window.open mais je n'en suis pas sur.
Ou peut etre qu'il faut le faire dans un autre langage.
Merci d'avance pour votre aide.
A voir également:
- Html popup image on button click
- Editeur html - Télécharger - HTML
- Fake mcafee popup - Accueil - Piratage
- Image iso - Guide
- Reduire taille image - Guide
- Légender une image - Guide
5 réponses
Solution 1 :
=> Dans ce cas, l'image est cliquable mais le curseur ne se transforme pas en main lorsqu'on la survole. Pour remédier à ca il faut écrire :
Solution 2 :
Dans les deux cas, tu dois creer une page 'popup.htm'. C'est dans cette page que tu préciseras le titre qui doit apparaitre dans la barre de titre.
<IMG SRC="./images/mon_image.gif" WIDTH="20" HEIGHT="50" BORDER=0 ALT="description" onClick="window.open('./popup.htm', 'NOM', 'scrollbars=yes,width=550,height=600')">
=> Dans ce cas, l'image est cliquable mais le curseur ne se transforme pas en main lorsqu'on la survole. Pour remédier à ca il faut écrire :
Solution 2 :
<A HREF="#" onClick="window.open('./popup.htm', 'NOM', 'scrollbars=yes,width=550,height=600')"><IMG SRC="./images/mon_image.gif" WIDTH="596" HEIGHT="46" BORDER=0 ALT="description"></A>
Dans les deux cas, tu dois creer une page 'popup.htm'. C'est dans cette page que tu préciseras le titre qui doit apparaitre dans la barre de titre.
Bsr Thomas,
Voici un ex de code :
La page qui contient les images en miniatures
vignette.htm
La même page qui affiche chaque image en grand :
popup.htm
Par défaut lorsque la page popup s'ouvre elle précharge l'image dans l'objet Im1 de type Image puis affiche l'image transparente : vide.gif
Ensuite l'image est aussitôt remplacée par celle préchargée au départ.
Enfin la fenêtre est redimensionnée.
Et voilà
PhP [Push the button,Don't push the
. button,Trip the station,Change the channel]
Voici un ex de code :
La page qui contient les images en miniatures
vignette.htm
<html><head><title>Test photo</title>
<script language="JavaScript">
<!--
var photographie=0;
var wind=null;
function Photo(fichier, titre)
{
this.fichier = fichier;
this.titre = titre;
}
var photos=new Array();
photos[0]=new Photo('images/test.jpg','Mon image nr 1');
photos[1]=new Photo('images/toto.jpg','Mon image favorite');
// ajoute ici tes autres images ...
function charger_image(idx)
{
photographie=photos[idx];
wind=open("popup.htm",'popup','width=400,height=300,toolbar=no,scrollbars=no,resizable=yes');
return false;
}
// -->
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="return charger_image(0);"><img src="images/test_small.jpg"></a><br>
<a href="javascript:void(0)" onclick="return charger_image(1);"><img src="images/toto_small.jpg"></a><br>
</body>
</html>
La même page qui affiche chaque image en grand :
popup.htm
<html><head><title></title>
<style>
.abs {position:absolute; left:0px; top:0px;}
</style>
<script language="JavaScript">
<!--
// Donne le titre de l'image à la fenêtre
document.title=window.opener.photographie.titre;
// Précharge l'image en mémoire mais ne l'affiche pas
im1=new Image()
im1.src=window.opener.photographie.fichier;
var obj=null;
// Affiche l'image précharger
function afficher()
{
if (document.layers)
{
obj=document.layers["div_photo"].document.images["photo"];
}
else
{
obj=document.images["photo"];
}
obj.src=im1.src;
}
// Redimensionne la fenêtre
function redimensionner()
{
window.resizeTo(obj.width,obj.height);
self.focus();
}
// -->
</script>
</head>
<body onload="redimensionner()">
<div class="abs" name="div_photo">
<img src="images/vide.gif" id="photo" name="photo">
</div>
<script>
<!--
afficher();
// -->
</script>
</body>
</html>
Par défaut lorsque la page popup s'ouvre elle précharge l'image dans l'objet Im1 de type Image puis affiche l'image transparente : vide.gif
Ensuite l'image est aussitôt remplacée par celle préchargée au départ.
Enfin la fenêtre est redimensionnée.
Et voilà
PhP [Push the button,Don't push the
. button,Trip the station,Change the channel]
Les Codes évolue Comme tout le reste pour évité deux pages ou 14 pages comme le précédents post le montre je propose un petit code JAVA Mais bien plus clair compact et performent il s'adapte BIEN ;) Enjoy ***
<!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>Document sans nom</title>
</head>
<a href="javascript:;" onclick="afficheMaxi('photo en grand . terminaison')">
<img src="adresse Photo .terminaison photoAffichage mini" border=1 alt="Cliquer pour agrandir" width="169" height="169">
ces deux partie neuves être déplacé dans le code <ital>
<script language="JavaScript">
function afficheMaxi(chemin)
{
i1 = new Image();
i1.src = chemin;
html = '<HTML><HEAD><TITLE>Ton Titre de page</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>
<body>
</body>
</html></ital>
Merci pour ta réponse mais avec ton script j'ai un souci : ma grande image je ne l'ai pas dans popup.html. C'est normal car je ne lui dis pas qu'elle doit y etre. Mais comme j'ai 14 images je ne vais pas créer 14 pages popup.html. De plus j'aimerais qu'il ny ai pas de marges or avec cette manière il y en a.
HELP PLEASE !!!
Merci d'avance :)
HELP PLEASE !!!
Merci d'avance :)
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
