Créer pop up.

Résolu
axbri Messages postés 30 Date d'inscription   Statut Membre Dernière intervention   -  
axbri Messages postés 30 Date d'inscription   Statut Membre Dernière intervention   -
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.
A voir également:

10 réponses

Réponse 1 / 10
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
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   Statut Membre Dernière intervention  
 
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 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention  
 
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   Statut Membre Dernière intervention  
 
Désolé pour la source...
0
Réponse 7 / 10
avion-f16 Messages postés 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
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   Statut Membre Dernière intervention  
 
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 19252 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
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   Statut Membre Dernière intervention  
 
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

Notifications pop UP sous Android 14
Mich -
Panth33ra -

5 réponses