rss
Ils ont besoin de votre aide Tous les messages sans réponse
Les règles à respecter
 Réserver un accueil cordial aux nouveaux utilisateurs.
 Poster son message dans le thème le plus approprié.
 Respecter la législation en vigueur.
 Faire usage de formule de politesse et échanger avec courtoisie.
 Ne pas poster de message à vocation commerciale.
 Rédiger les messages dans un langage clair sans abréviations, style télégraphique ou mode SMS
Le cas échéant, expliquer de manière pédagogique les règles du forum
Lire le texte complet de la charte
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Ouvrir une popup en cliquant sur une image

Posté par 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

1


  • 1    Ce 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

2


  • 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

3


  • 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=3­00,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


  • 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
Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Spyware Blaster 4.1Spyware Blaster - SpywareBlaster permet de conserver un système sain sans spyware , sans avoir besoin de fonctionner constamment en arrière...Catégorie: Anti-Spyware
Licence: Freeware/gratuit
Télécharger Ultraiso 9.2.0.2536Ultraiso - UltraISO est un outil de conversion, d'édition et de création de fichiers images ISO CD/DVD et de création de CD/DVD...Catégorie: Gravure
Licence: Open Source
Télécharger ImageWell 3.5.3ImageWell - ImageWell n'est pas à proprement parler un logiciel de Retouche photo. Il permet plutôt de préparer des images pour le...Catégorie: Retouche photo
Licence: Freeware/gratuit
Télécharger Image Resizer 1Image Resizer - Petit utilitaire (PowerToy) basique, très simple, permettant de réduire la taille d'une image, dans le but, notamment, de...Catégorie: Graphisme
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « Ouvrir une popup en cliquant sur une image »