Sujet Précédent Sujet Suivant

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
Bonjour, j'ai un petit probleme, je souhaite faire apparaitre une image lors du passge du pointeur sur un texte, ce probleme a déja été soulevé de nombreuses fois mais je ne trouve ma reponse dans aucun forum; j'ai essayé pas mal de trucs mais rien ne fonctionne comme je souhaite!

si vous avez des propositions...

merci d'avance.
A voir également:

22 réponses

  • 1
  • 2
Réponse 1 / 22
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
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 
<!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>
1
Réponse 2 / 22
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 514
14 avril 2009 à 12:02
Pourquoi dans une popup et pas dans un div simple?
0
Réponse 3 / 22
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
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
0
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 514
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!
0
Réponse 4 / 22
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
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)
0
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 514
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
0

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

Posez votre question
Réponse 5 / 22
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
ok je jette un œil merci pour la reponse
0
Réponse 6 / 22
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
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
0
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 514
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>
0
Réponse 7 / 22
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
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>"
0
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 514
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
0
Réponse 8 / 22
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
ouais c'est ce que je fais...
je vais réessayer!!!

c'est possible qu'il soit impossible de faire cela sur e-monsite???
0
Réponse 9 / 22
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
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');
0
NookZ Messages postés 2138 Date d'inscription jeudi 29 janvier 2009 Statut Membre Dernière intervention 7 mars 2013 514
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'
0
Réponse 10 / 22
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
ouais ca ne marche pas c'est pas qu'il faut précharger les images et les rappeler ensuite par hasard ???
0
Réponse 11 / 22
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
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 : 
<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.
0
Réponse 12 / 22
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
ok je teste ca... je te dis ca dans quelques minutes ^^
0
Réponse 13 / 22
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
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.
0
Réponse 14 / 22
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
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...
0
Réponse 15 / 22
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
C'est ce que j'ai vu quand j'ai relus ton post. Je vais essayer de voir ça avec jquery.
0
Réponse 16 / 22
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
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 ^^
0
Réponse 17 / 22
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
je teste ca je te redit merci
0
Réponse 18 / 22
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
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?
0
Réponse 19 / 22
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
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/
0
Réponse 20 / 22
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
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
0

Discussions similaires

"Aucune application permettant d'ouvrir cette URL"
sidojaice -
JIP -

24 réponses
[Photoshop] Fichier en PNG qui ne s'ouvre pas
Naddya -
porios -

7 réponses