Sujet Précédent Sujet Suivant

Créer pop up.

Résolu/Fermé
axbri Messages postés 30 Date d'inscription dimanche 22 novembre 2009 Statut Membre Dernière intervention 22 décembre 2009 - 28 nov. 2009 à 15:01
axbri Messages postés 30 Date d'inscription dimanche 22 novembre 2009 Statut Membre Dernière intervention 22 décembre 2009 - 3 déc. 2009 à 17:51
Bonjour, bonjour.

J'aimerai créer une pop up, qui s'ouvre quand on clique sur un lien image. L'idéale serait que cette pop up s'ouvre centrée.

Merci de votre aide.

bonne journée.

10 réponses

Réponse 1 / 10
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
28 nov. 2009 à 15:13
Tu veux un simpe pop-up, c'est à dire une nouvelle fenêtre ou un "popup" qui noirci le fond et affiche l'image ?
0
Réponse 2 / 10
axbri Messages postés 30 Date d'inscription dimanche 22 novembre 2009 Statut Membre Dernière intervention 22 décembre 2009
28 nov. 2009 à 16:02
Non je veux une popup simple qui s'ouvre au centre. C'est pour y insérer du texte.
0
Réponse 3 / 10
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
28 nov. 2009 à 17:37
Excuses-moi, j'ai parlais d'une image mais je voulais dire texte.
Donc tu préfères une fenêtre avec les bordures de l'OS ou une fausse fenêtre comme ça ?
0
Réponse 4 / 10
axbri Messages postés 30 Date d'inscription dimanche 22 novembre 2009 Statut Membre Dernière intervention 22 décembre 2009
29 nov. 2009 à 11:37
OU UN AUTRE FAUSSE COMME CA : c'est top!!!

Mais n'est ce pas trop complexe??

Merci avion!!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
axbri Messages postés 30 Date d'inscription dimanche 22 novembre 2009 Statut Membre Dernière intervention 22 décembre 2009
29 nov. 2009 à 12:08
En fait je voudrais insérer le lien pop up sur ce type d'image : 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<meta name="generator" content="Adobe GoLive">
		<title>Untitled Page</title>
	</head>
	
	<head><style> 
<!-- 
a{text-decoration:none}
//--> 


</style></head>

<style type="text/css">
<!--
a.type1 { color: 9B5928; }
a.type1:hover { color: #818181;}

a.type2 { color: 9B5928; }
a.type2:hover { color: green; }
-->
</style>





	<body bgcolor="#ffffff">
		<div align="center">
			<table width="717" border="0" cellspacing="0" cellpadding="0" cool gridx="16" gridy="16" height="517" showgridx showgridy usegridx usegridy>
				<tr height="176">
					<td width="716" height="176" colspan="7" valign="top" align="left" xpos="0"><img src="piano.jpg" alt="" height="176" width="716" border="0"></td>
					<td width="1" height="176"><spacer type="block" width="1" height="176"></td>
				</tr>
				<tr height="19">
					<td bgcolor="#7c8065" content csheight="340" width="8" height="340" rowspan="4" valign="top" xpos="0"></td>
					<td bgcolor="#7c8065" content csheight="19" width="148" height="19" colspan="2" valign="top" xpos="8"></td>
					<td width="552" height="19" colspan="3"></td>
					<td bgcolor="#7c8065" content csheight="340" width="8" height="340" rowspan="4" valign="top" xpos="708"></td>
					<td width="1" height="19"><spacer type="block" width="1" height="19"></td>
				</tr>
				<tr height="29">
					<td width="700" height="29" colspan="5"></td>
					<td width="1" height="29"><spacer type="block" width="1" height="29"></td>
				</tr>
				<tr height="273">
					<td width="16" height="273"></td>
					<td width="132" height="273" valign="top" align="left" xpos="24">
						<table width="132" cellspacing="2" cellpadding="0">
							<tr>
								<td><a href="accueil.html" class="type1">Accueil</a><br>
									<font color="white">a</font></td>
							</tr>
							<tr>
								<td><a href="lesartistes.html" class="type1">Les artistes</a><br>
									<font color="white">r</font></td>
							</tr>
							<tr>
								<td><a href="lespectacle.html" class="type1">Le spectacle<br>
										<font color="white">c</font></a></td>
							</tr>
							<tr>
								<td><a href="organisation.html" class="type1">Organisation<br>
										<font color="white">d</font></a></td>
							</tr>
							<tr>
								<td><a href="extraitvideo.html" class="type1">Extrait vid&eacute;o<br>
										<font color="white">e</font></a></td>
							</tr>
							<tr>
								<td><a href="dossierdepresse.html" class="type1">Dossier de presse<br>
										<br>
										<font color="white">h</font></a></td>
							</tr>
						</table>
					</td>
					<td width="276" height="273" colspan="2"></td>
					<td width="276" height="273" valign="top" align="left" xpos="432">
						<table width="64" cellspacing="2" cellpadding="0">
							<tr>
								<td>

									<head>
										<!-- DEBUT DU SCRIPT -->
										<script language="JavaScript">
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/

/* PRECHARGEMENT DE L IMAGE DANS LE CACHE DU NAVIGATEUR */
if(document.images)
{
i775541 = new Image;
i775541 = "http://www.whitejive.com/deden.jpg";
}
</script>
										<!-- FIN DU SCRIPT -->
									</head>

									<body>
										<!-- DEBUT DU SCRIPT --><!--
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
--><a href="db.html" onmouseover="i775541.src='http://www.whitejive.com/deden.jpg'" onmouseout="i775541.src='http://www.whitejive.com/denis.jpg'"><img src="http://www.whitejive.com/denis.jpg" border=0 name="i775541" alt="" hspace=0 vspace=0></a> <!-- FIN DU SCRIPT -->
										<noscript>
											<a href="http://www.editeurjavascript.com/mycircle/">echange de lien</a>
										</noscript>
									</body>

								</td>
							</tr>
						</table>
					</td>
					<td width="1" height="273"><spacer type="block" width="1" height="273"></td>
				</tr>
				<tr height="19">
					<td width="247" height="19" colspan="3"></td>
					<td bgcolor="#7c8065" content csheight="19" width="453" height="19" colspan="2" valign="top" xpos="255"></td>
					<td width="1" height="19"><spacer type="block" width="1" height="19"></td>
				</tr>
				<tr height="1" cntrlrow>
					<td width="8" height="1"><spacer type="block" width="8" height="1"></td>
					<td width="16" height="1"><spacer type="block" width="16" height="1"></td>
					<td width="132" height="1"><spacer type="block" width="132" height="1"></td>
					<td width="99" height="1"><spacer type="block" width="99" height="1"></td>
					<td width="177" height="1"><spacer type="block" width="177" height="1"></td>
					<td width="276" height="1"><spacer type="block" width="276" height="1"></td>
					<td width="8" height="1"><spacer type="block" width="8" height="1"></td>
					<td width="1" height="1"></td>
				</tr>
			</table>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>



Je me suis servis d'un éditeur de mouse over en ligne : les images utilisées son hébergées en ligne.
0
Réponse 6 / 10
axbri Messages postés 30 Date d'inscription dimanche 22 novembre 2009 Statut Membre Dernière intervention 22 décembre 2009
29 nov. 2009 à 12:10
Désolé pour la source...
0
Réponse 7 / 10
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
29 nov. 2009 à 14:17
Pour l'insérer, il suffit de suivre les instruction ici
Quand tu dois donner des sources assez longues, utiliser un service comme cijoint.fr ou mieux, ça
0
Réponse 8 / 10
axbri Messages postés 30 Date d'inscription dimanche 22 novembre 2009 Statut Membre Dernière intervention 22 décembre 2009
29 nov. 2009 à 16:36
Je ne comprends pas comment ca marche, c'est un peu trop technique pour moi...

Peut être existe il quelque chose de plus simple?

Merci.
0
Réponse 9 / 10
avion-f16 Messages postés 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 497
29 nov. 2009 à 17:56
1. Télécharger l'archive ici (laisse les options telles quelles)
2. Extrait le dossier de l'archive et renommes-le en "shadowbox"
3. Place le dossier dans le même que celui de ta page
4. Ajoute ce code entre la balise <head> et </head> :
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">Shadowbox.init({
	language:"fr"
});</script>
5. Utilise un lien pointant vers l'image comme ceci :
<a href="image.png" rel="shadowbox">Afficher l'image</a>
<a href="image_big.png" rel="shadowbox"><img src="image_small.png" alt="Image" /></a>
0
Réponse 10 / 10
axbri Messages postés 30 Date d'inscription dimanche 22 novembre 2009 Statut Membre Dernière intervention 22 décembre 2009
3 déc. 2009 à 17:51
Génial.

Merci, merci, merci.

J'ai réussi, c'est trop top!!

(avion, une foie le site en ligne, je t'enverrai le lien)

Bonne journée.
0

Discussions similaires

Comment désactiver le mode sécurisé de la Freebox POP.
Cycy -
munstef676 -

11 réponses
créer une adresse gmail pour une autre personne
Emma33000 -
Emma33000 -

2 réponses