Ouvrir une image dans une pop-up
Résolu/Fermé
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
-
14 avril 2009 à 12:00
jejeremiet Messages postés 30 Date d'inscription jeudi 26 mars 2009 Statut Membre Dernière intervention 5 avril 2011 - 15 avril 2009 à 12:14
jejeremiet Messages postés 30 Date d'inscription jeudi 26 mars 2009 Statut Membre Dernière intervention 5 avril 2011 - 15 avril 2009 à 12:14
A voir également:
- Ouvrir une image dans une pop-up
- Ouvrir fichier .bin - Guide
- Comment ouvrir un fichier epub ? - Guide
- Ouvrir fichier rar - Guide
- Comment agrandir une image - Guide
- Comment ouvrir un fichier docx ? - Guide
22 réponses
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
15 avril 2009 à 11:04
15 avril 2009 à 11:04
SALUT
fais le en CSS !
voila un exemple avec trois infobulle sur un lien , un texte , une image ! ca s adapte et ce modifis tres
facilement
fais le en CSS !
voila un exemple avec trois infobulle sur un lien , un texte , une image ! ca s adapte et ce modifis tres
facilement
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
RAD ZONE Webcreation
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<style type="text/css">
/*<![CDATA[*/
body {
background-color: #464646;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color:#564b47;
text-align: center;
}
#content {
position:absolute;
height:400px;
width:800px;
margin:-200px 0px 0px -400px;
top: 50%;
left: 50%;
text-align: left;
background-color: #fff;
}
p{
text-indent: 5px;
margin: 5px;}
/* DEBUT DU CSS POUR L infobulle */
em.infobulle {
color: #c00;
}
em.infobulle b {
display: none;
}
em.infobulle:hover {
border: 0;
position: relative;
z-index: 500;
}
em.infobulle:hover b {
display: block;
position: absolute;
top: 20px;
left: 30px;
filter: alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
}
a.infobulle b {
display: none;
}
a.infobulle:hover {
border: 0;
position: relative;
z-index: 500;
}
a.infobulle:hover b {
display: block;
position: absolute;
top: 20px;
left: 30px;
}
img {
border: none ;
}
/*]]>*/
</style>
</head>
<body>
<div id="content">
<p>
Eu faucibus mauris.
<a class="infobulle" href="#">LIEN AVEC infobulle CSS <b><img src=
"img32.jpg" width="240" height="180" alt="img" /></b></a> .
Lorem ipsum dolor sit amet
consectetuer pede lacinia Duis Cum laoreet. Interdum Fusce Curabitur pede aliquet Nulla ut
eros condimentum orci porttitor. Nunc.
</p>
<p>
Lorem venenatis id et elit at augue quis vitae Curabitur fringilla. Elit et Curabitur Morbi
Quisque Morbi vel Nam sodales ullamcorper sit. Eu faucibus mauris amet et tristique.
</p>
<p>
SUR UNE IMAGE.
<a class="infobulle" href="#"><img src="img32.jpg" width="48" height="36"
alt="" /><b><img src="img32.jpg" alt="img" /></b></a>
at augue quis vitae Curabitur
fringilla. Elit et Curabitur Morbi Quisque Morbi vel Nam sodales ullamcorper sit. Eu
faucibus mauris amet et tristique.
</p>
<p>
Lorem venenatis id et elit .
<em class="infobulle">SUR UN TEXTE <b><img src="img32.jpg"
width="240" height="180" alt="img" /></b></em>
consectetuer pede lacinia Duis Cum laoreet.
Interdum Fusce Curabitur pede aliquet Nulla ut eros condimentum orci porttitor. Nunc.
</p>
<p>
Lorem venenatis id et elit at augue quis vitae Curabitur fringilla. Elit et Curabitur Morbi
Quisque Morbi vel Nam sodales ullamcorper sit. Eu faucibus mauris amet et tristique.
</p>
</div>
</body>
</html>
NookZ
Messages postés
2138
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
7 mars 2013
513
14 avril 2009 à 12:02
14 avril 2009 à 12:02
Pourquoi dans une popup et pas dans un div simple?
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
14 avril 2009 à 12:07
14 avril 2009 à 12:07
a vrai dire je n'en sait rien : je débute^^
je pensait que le pop était le plus simple, comment faire avec div, div sert a "selectionner" un texte ou une ligne?
as tu un exemple sur une page ou un morceau de code a essayer
merci
je pensait que le pop était le plus simple, comment faire avec div, div sert a "selectionner" un texte ou une ligne?
as tu un exemple sur une page ou un morceau de code a essayer
merci
NookZ
Messages postés
2138
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
7 mars 2013
513
14 avril 2009 à 12:18
14 avril 2009 à 12:18
Un div c'est un conteneur. Disons que tu mets ton image dedans, tu peux alors la placée où tu veux dans ta page, la faire apparaître ou disparaître à ta convenance. Et ça permet d'éviter les systèmes anti-popup des navigateurs!
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
14 avril 2009 à 12:32
14 avril 2009 à 12:32
je ne m'en sort pas...
peux tu me donner un bout de code parce que la...
tiens je te donne un exemple sur un site : http://www.creationsylvie.net/psp/traduction/mes_traductions_tutoriels_adriana.html (dans le tableau vers le milieu)
j'ai essayé de reprendre le code source mais ca ne fonctionne pas sur mon site (c'est un site gratuit sur e-monsite, c'est peut etre pour ca)
peux tu me donner un bout de code parce que la...
tiens je te donne un exemple sur un site : http://www.creationsylvie.net/psp/traduction/mes_traductions_tutoriels_adriana.html (dans le tableau vers le milieu)
j'ai essayé de reprendre le code source mais ca ne fonctionne pas sur mon site (c'est un site gratuit sur e-monsite, c'est peut etre pour ca)
NookZ
Messages postés
2138
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
7 mars 2013
513
14 avril 2009 à 14:14
14 avril 2009 à 14:14
http://www.dynamicdrive.com/dynamicindex15/index.html
Voilà le site de la personne qui l'a fait, il y a différents code
Voilà le site de la personne qui l'a fait, il y a différents code
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
14 avril 2009 à 19:40
14 avril 2009 à 19:40
ok je jette un œil merci pour la reponse
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
14 avril 2009 à 21:12
14 avril 2009 à 21:12
bon, ca continue a m'enerver...
en effet la source est ici http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm#
le probleme est que je ne sait quoi remplacer pour utiliser mes images; j'ai essayé pas mal de trucs mais rien n'y fait
faut il un format special pour les images? aparemment eux utilisent du "gif" mais j'ai testé aussi
merci de m'indiquer les lignes a modifier
merci beaucoup
en effet la source est ici http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm#
le probleme est que je ne sait quoi remplacer pour utiliser mes images; j'ai essayé pas mal de trucs mais rien n'y fait
faut il un format special pour les images? aparemment eux utilisent du "gif" mais j'ai testé aussi
merci de m'indiquer les lignes a modifier
merci beaucoup
NookZ
Messages postés
2138
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
7 mars 2013
513
14 avril 2009 à 22:58
14 avril 2009 à 22:58
normalement il faut uniquement modifier ces trois lignes :
messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
messages[2] = new Array('test.gif','Test description','black','white');
et ne pas oublier ça :
<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a><br>
<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">Link 2</a>
messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
messages[2] = new Array('test.gif','Test description','black','white');
et ne pas oublier ça :
<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a><br>
<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">Link 2</a>
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
14 avril 2009 à 23:01
14 avril 2009 à 23:01
ok j'ai mis a la place de "red_balloon.gif" le chemin de mon image c'est bien ca ??? le reste c'est une couleur et un texte...
les lignes suivantes peuvent etre mis a la suite du reste non?
"<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a><br>
<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">Link 2</a>"
les lignes suivantes peuvent etre mis a la suite du reste non?
"<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a><br>
<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">Link 2</a>"
NookZ
Messages postés
2138
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
7 mars 2013
513
15 avril 2009 à 08:03
15 avril 2009 à 08:03
Oui c'est bien ça. La couleur c'est la couleur de fond de la fenêtre et le texte je pense que tu peux mettre juste '' afin qu'il n'y ait rien d'écrit.
Quant à ce bout de code, il est à mettre à la place des liens dans le <body> de ta page sur lesquels tu veux que l'image s'applique:
<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a><br>
<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">Link 2</a>
Tu changes ensuite Link 1 et Link 2 par les noms de tes liens
Quant à ce bout de code, il est à mettre à la place des liens dans le <body> de ta page sur lesquels tu veux que l'image s'applique:
<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a><br>
<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()">Link 2</a>
Tu changes ensuite Link 1 et Link 2 par les noms de tes liens
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
15 avril 2009 à 10:15
15 avril 2009 à 10:15
ouais c'est ce que je fais...
je vais réessayer!!!
c'est possible qu'il soit impossible de faire cela sur e-monsite???
je vais réessayer!!!
c'est possible qu'il soit impossible de faire cela sur e-monsite???
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
15 avril 2009 à 10:36
15 avril 2009 à 10:36
ha oui voila en fait dans les lignes suivantes on appelle des images mais ou doit on mettre les chemins???
messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
messages[2] = new Array('test.gif','Test description','black','white');
messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");
messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");
messages[2] = new Array('test.gif','Test description','black','white');
NookZ
Messages postés
2138
Date d'inscription
jeudi 29 janvier 2009
Statut
Membre
Dernière intervention
7 mars 2013
513
15 avril 2009 à 10:40
15 avril 2009 à 10:40
Ben là : 'red_balloon.gif'
Si l'image n'est pas au même endroit tu mets par exemple
'../images/red_balloon.gif'
Si l'image n'est pas au même endroit tu mets par exemple
'../images/red_balloon.gif'
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
15 avril 2009 à 10:41
15 avril 2009 à 10:41
ouais ca ne marche pas c'est pas qu'il faut précharger les images et les rappeler ensuite par hasard ???
zoby44
Messages postés
818
Date d'inscription
vendredi 3 novembre 2006
Statut
Membre
Dernière intervention
7 avril 2010
199
15 avril 2009 à 10:43
15 avril 2009 à 10:43
Salut, aller je vais faire un peu de pub pour une de mes source.
Tu copie-colle le code qui est sur cette page : http://www.javascriptfr.com
Dans un fichier lightbox.js par exemple.
Dans ton index.html, tu appel le js :
Pour activer le lightbox, il suffit d'appeler tes images comme ça :
Attention, il faut que l'url du lien et de l'image soit la même, sinon, ça ne fonctionne pas.
Tu copie-colle le code qui est sur cette page : http://www.javascriptfr.com
Dans un fichier lightbox.js par exemple.
Dans ton index.html, tu appel le js :
<script type="text/javascript" src="lightbox.js">
Pour activer le lightbox, il suffit d'appeler tes images comme ça :
<a href="url_image"><img src="url_image"/></a>
Attention, il faut que l'url du lien et de l'image soit la même, sinon, ça ne fonctionne pas.
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
15 avril 2009 à 10:44
15 avril 2009 à 10:44
ok je teste ca... je te dis ca dans quelques minutes ^^
zoby44
Messages postés
818
Date d'inscription
vendredi 3 novembre 2006
Statut
Membre
Dernière intervention
7 avril 2010
199
15 avril 2009 à 10:48
15 avril 2009 à 10:48
Euh, excuse moi, j'avais mal lu ta question, ça n'affiche pas l'image au passage de la souris, mais quand tu clic dessus. Désolé. J'ai répondu trop vite.
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
15 avril 2009 à 10:51
15 avril 2009 à 10:51
ouais je viens de voir ca ... en plus c'est pour agrandir une image par exemple alors que moi c'est a partir d'un texte que je veux afficher l'image en complement...
zoby44
Messages postés
818
Date d'inscription
vendredi 3 novembre 2006
Statut
Membre
Dernière intervention
7 avril 2010
199
15 avril 2009 à 10:53
15 avril 2009 à 10:53
C'est ce que j'ai vu quand j'ai relus ton post. Je vais essayer de voir ça avec jquery.
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
15 avril 2009 à 10:54
15 avril 2009 à 10:54
ok merci beaucoup moi je continue a chercher de mon coté : j'ai la source mais ca ne marche pas si tu arrives a tester et a comprendre comment faire ^^
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
15 avril 2009 à 11:06
15 avril 2009 à 11:06
je teste ca je te redit merci
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
15 avril 2009 à 11:29
15 avril 2009 à 11:29
c'est pas mal mais ca me fait une bande de environ 1cm avec le texte dedans et je n'arrives pas a l'agrandir
c'est quoi qu'il faut modifier?
c'est quoi qu'il faut modifier?
RAD ZONE
Messages postés
5224
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
22 mars 2024
1 353
15 avril 2009 à 11:33
15 avril 2009 à 11:33
C'est pas mal mais ca me fait une bande de environ 1cm avec le texte dedans et je n'arrives pas a l'agrandir ????
comment ca !!!!
voila ce que ca donne
http://radservebeer.free.fr/demorad/tooltipCSS/
comment ca !!!!
voila ce que ca donne
http://radservebeer.free.fr/demorad/tooltipCSS/
jejeremiet
Messages postés
30
Date d'inscription
jeudi 26 mars 2009
Statut
Membre
Dernière intervention
5 avril 2011
1
15 avril 2009 à 11:35
15 avril 2009 à 11:35
ouais en gros c'est ca mais moi j'ai uniquement une bande en haut de 1 cm
je pense que c'est du a "e-monsite mais je suis sur la bonne voie deja
merci beaucoup je te tiens au courant
je pense que c'est du a "e-monsite mais je suis sur la bonne voie deja
merci beaucoup je te tiens au courant
