Ouvrir une image dans une pop-up

Résolu
jejeremiet Messages postés 30 Date d'inscription   Statut Membre Dernière intervention   -  
jejeremiet Messages postés 30 Date d'inscription   Statut Membre Dernière intervention   -
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   Statut Contributeur Dernière intervention   1 360
 
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   Statut Membre Dernière intervention   514
 
Pourquoi dans une popup et pas dans un div simple?
0
Réponse 3 / 22
jejeremiet Messages postés 30 Date d'inscription   Statut Membre Dernière intervention   1
 
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   Statut Membre Dernière intervention   514
 
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   Statut Membre Dernière intervention   1
 
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   Statut Membre Dernière intervention   514
 
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   Statut Membre Dernière intervention   1
 
ok je jette un œil merci pour la reponse
0
Réponse 6 / 22
jejeremiet Messages postés 30 Date d'inscription   Statut Membre Dernière intervention   1
 
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   Statut Membre Dernière intervention   514
 
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   Statut Membre Dernière intervention   1
 
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   Statut Membre Dernière intervention   514
 
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   Statut Membre Dernière intervention   1
 
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   Statut Membre Dernière intervention   1
 
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   Statut Membre Dernière intervention   514
 
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   Statut Membre Dernière intervention   1
 
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   Statut Membre Dernière intervention   199
 
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   Statut Membre Dernière intervention   1
 
ok je teste ca... je te dis ca dans quelques minutes ^^
0
Réponse 13 / 22
zoby44 Messages postés 818 Date d'inscription   Statut Membre Dernière intervention   199
 
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   Statut Membre Dernière intervention   1
 
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   Statut Membre Dernière intervention   199
 
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   Statut Membre Dernière intervention   1
 
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   Statut Membre Dernière intervention   1
 
je teste ca je te redit merci
0
Réponse 18 / 22
jejeremiet Messages postés 30 Date d'inscription   Statut Membre Dernière intervention   1
 
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   Statut Contributeur Dernière intervention   1 360
 
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   Statut Membre Dernière intervention   1
 
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

PIX
plart -
jordane45 -

1 réponse
Notifications pop UP sous Android 14
Mich -
Panth33ra -

5 réponses