Ouvrir une popup en cliquant sur une image

Thomas, le lundi 3 novembre 2003 à 22:37: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.

Répondre à Thomas Signaler ce message aux modérateurs Aller au dernier message

4Ce message vous semble utile, votez !
Ce message ne vous semble pas utile, votez !
Signaler ce message aux modérateurs

tomz, le mardi 4 novembre 2003 à 15:00:53

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épondre à tomz

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Thomas, le mardi 4 novembre 2003 à 19:27:55

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 :)

Répondre à Thomas

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

PhP, le mardi 4 novembre 2003 à 21:12:52

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épondre à PhP

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Thomas, le jeudi 13 novembre 2003 à 18:23:07

Merci pour ce réponses j'ai déjà quelques résultats.

Répondre à Thomas

Posez votre question Répondre

Résultats pour Ouvrir une popup en cliquant sur une image

Images impossible a ouvri sur le bureau (Résolu) Bonjour, J'ai un soucis depuis quelques jours : je n'arrive plus a ouvrir de fichier images (jpeg, gif, bmp..) avec ''apperçu des images..'' lorsque que ceux-ci sont sur le bureau. En clair, lorsque je double-clique sur... www.commentcamarche.net/forum/affich-3032666-images-impossible-a-ouvri-sur-le-bureau

[Windows] Affichage de l'aperçu des images en miniatures Si jamais Microsoft Windows n'affiche plus les images en miniatures, il suffit de suivre la procédure ci-dessous : Faire un clic droit sur une image, puis, dans le menu choisir "Ouvrir avec". Cliquez sur "Choisir le programme" et choisissez "Aperçu... www.commentcamarche.net/faq/sujet-2442-windows-affichage-de-l-apercu-des-images-en-miniatures

[ ouvrir ] mes photos (Résolu) Bonjour Depuis l'installation de NERO 7 prenium je ne peus plus ouvrir directement mes images qu'elles soient chargées à partir de mon appareil numérique (NIKON Coopix L3) ou de mon scanner (LEXMARK tout en un P4350) en cliquant sur OUVRIR.... www.commentcamarche.net/forum/affich-2899416-ouvrir-mes-photos

1 2 3 Suivant

Résultats pour Ouvrir une popup en cliquant sur une image

Animer une séquence d'images avec GimpGimp permet, entre autres, de créer une animation en superposant plusieurs images. Cette animation peut alors être sauvée au format gif. Sommaire I. Images utilisées pour notre exemple II. Ouvrir la première image puis les autres en tant... www.commentcamarche.net/faq/sujet-11696-animer-une-sequence-d-images-avec-gimp

[Gravure] Graver ou lire un fichier .IMG / .CCD / .SUBLes fichiers portant une extension .img, .ccd et .sub sont respectivement : .IMG : une image de CD, c'est-à-dire une copie binaire d'un CD ou d'un DVD sous forme d'un fichier .CCD et .SUB : informations sur les pistes du disque. Les... www.commentcamarche.net/faq/sujet-3349-gravure-graver-ou-lire-un-fichier-img-ccd-sub

Créer une photo avec globe animé avec GimpSi ce n'est pas déjà fait, téléchargez GIMP, installez le et lancez le. Création de l'image Tester l'animation Enregistrer l'animation Création de l'image Une fois le logiciel lancé, ouvrez le menu fichier puis cliquez sur "ouvrir" et... www.commentcamarche.net/faq/sujet-9394-creer-une-photo-avec-globe-anime-avec-gimp

1 2 3 Suivant

Résultats pour Ouvrir une popup en cliquant sur une image

Ouverture de fichiers (Résolu)Bonjour svp aidez-moi, merci je n'arrive plus a ouvrir les fichiers image jpeg en double cliquant avec le bouton gauche de la souris un message me marque:AUCUN PROGRAMME N'EST ASSOCIE A CE FICHIER POUR EXECUTER CETTE ACTION.CREEZ UNE... www.commentcamarche.net/forum/affich-1943345-ouverture-de-fichiers

Pour ouvrir Hp image zone plus (Résolu)Aprés chargement de "pack 2 windows Xp" à l'ouverture de Hp image zone+ un message s'affiche: "impossible de trouver le programme, file:///c//program%20file/hp/digital%20imaging/bin/loading...hp%20zone.htm?.Vérifier que l'accésinternet... www.commentcamarche.net/forum/affich-1317487-pour-ouvrir-hp-image-zone-plus

Jpg sur nokia 6600 (Résolu)Bonjour, j'ai un probleme dans mon nokia 6600 qui se manifeste dans la non permission d'ouverture des fichier image jpg ou autre,quand je clique pour afficher une images un message disant "fonction non supporté" s'affiche. est ce... www.commentcamarche.net/forum/affich-3945811-jpg-sur-nokia-6600

1 2 3 Suivant

Résultats pour Ouvrir une popup en cliquant sur une image

Télécharger TypesIl est si facile d'installer des applications de même catégorie sur votre machine. Par exemple vous avez Gimp, Photoshop, Photobie et autres gestionnaires de traitement d'images sur votre ordinateur. Alors pour ouvrir un fichier image, le problème se... www.commentcamarche.net/telecharger/telecharger-34056087-types

Télécharger PicPerkPicPerk est un éditeur et une visionneuse d'image très populaire. Il supporte la plupart des formats graphiques tels que JPEG, GIF, TIFF, BMP, PCX, WMF et TGA. L'application permet d'ouvrir des fichiers images spécifiques, mais aussi de visionner et... www.commentcamarche.net/telecharger/telecharger-34056500-picperk

1 2 3 Suivant