Ouvrir une popup en cliquant sur une image

Fermé

Thomas - 3 nov. 2003 à 22:37
Jocker - 27 sept. 2010 à 14:59

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.

A voir également:

Html popup image on button click
Visual click avis ✓ - Forum Consommation & Internet
Image iso - Guide
Editeur html - Télécharger - HTML
Acronis true image - Télécharger - Sauvegarde
Supprimez les composantes rouge et verte de cette image. quel mot apparaît ? - Forum Word

5 réponses

Réponse 1 / 5

tomz Messages postés 2 Date d'inscription mardi 4 novembre 2003 Statut Membre Dernière intervention 4 novembre 2003 17
4 nov. 2003 à 15:00

Solution 1 :

<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.

Réponse 2 / 5

PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
4 nov. 2003 à 21:12

Bsr Thomas,

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]

Réponse 3 / 5

micking
31 mars 2010 à 09:21

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>

Jocker
27 sept. 2010 à 14:59

Ce n'est pas du JAVA mais bien du JavaScript

Discussions similaires

Ma souris double-clik toute seule :(

Ctrl+clic

Touche ctrl + clic ?

Site de confiance ou non ?

Info visual-click.com

Comment supprimer Office 15 Click-to-Run Extensibility Component