High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

Ouvrir une popup en cliquant sur une image

Dernière réponse le 13 nov 2003 à 18:23:07 Thomas, le 3 nov 2003 à 22:37:59 
 Signaler ce message aux modérateurs

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.

Meilleures réponses pour « Ouvrir une popup en cliquant sur une image » dans :
Une popup d'information au survol sans Javascript ni CSS VoirParfois, il peut être utile d'afficher des informations supplémentaire au survol du curseur sur une zone de l'écran, par exemple "Cliquez pour agrandir" sur une image, un descriptif sur une abbréviation ou des détails sur un lien. On trouve...
[Windows] Affichage de l'aperçu des images en miniatures Voir
[SVG] Comment lire une image SVG ? VoirSVG est un format d'image vectorielle, un peu comme Postscript, CorelDraw, XaraX ou Illustrator (.ai ou .eps). Solution 1 Inkscape sait très bien lire les documents .SVG Je vous recommande cette solution. Solution 2 Opera peut également les lire,...
Fichier ISO (Image ISO) VoirFormat ISO Un fichier possédant l'extension .ISO est une image ISO, c'est-à-dire une image d'un disque (CD, DVD ou disque dur) sous forme de fichier, créer avec un logiciel de gravure. Comment lire un fichier ISO ? En l'absence de graveur, il...
Posez votre question Répondre

1

tomz, le 4 nov 2003 à 15:00:53
  • +5

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

2

Thomas, le 4 nov 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

3

PhP, le 4 nov 2003 à 21:12:52
  • +1

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

4

 Thomas, le 13 nov 2003 à 18:23:07
  • +1

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

   
Répondre à Thomas
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net