Créer pop up.

Résolu

axbri Messages postés 30 Statut Membre -
axbri Messages postés 30 Statut Membre - 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.

Configuration: Mac OS X
Firefox 3.5.5

Afficher la suite

10 réponses

Réponse 1 / 10
avion-f16 Messages postés 19182 Date d'inscription Statut Contributeur Dernière intervention 4 511

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 Statut Membre

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 19182 Date d'inscription Statut Contributeur Dernière intervention 4 511

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 Statut Membre

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

axbri Messages postés 30 Statut Membre

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.

Réponse 6 / 10
axbri Messages postés 30 Statut Membre

Désolé pour la source...
0
Réponse 7 / 10
avion-f16 Messages postés 19182 Date d'inscription Statut Contributeur Dernière intervention 4 511

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 Statut Membre

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 19182 Date d'inscription Statut Contributeur Dernière intervention 4 511
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 Statut Membre

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

Créer pop up.

10 réponses

Discussions similaires

Newsletters