Affichage photo

Fermé
phot - 28 juin 2017 à 11:33
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 30 juin 2017 à 11:23
Bonjour,

moi c'est l'inverse que je veux, afficher une photo au passage de la souris sur un texte et je ne veux voir la photo que quand la souris est sur le texte


A voir également:

3 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
28 juin 2017 à 12:16
Salut,

L'inverse par rapport à quoi ?

Qu'est-ce qui te bloque ? Qu'as tu essayé ?

Bonne journée,
0
Merci pour ta réponse je vais essayer ce soir mais cela me semble bien long comme script, je savais faire cela autrefois mais j'ai complètement oublié. Alors voila ce que je veux j'ai une liste de livre et au passage de chaque titre de livre (avec la souris) la photo du livre apparaisse je travaille sur dream cs6
A+
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
28 juin 2017 à 13:53
Salut
pas bien compris ce que tu veux ? mais voila un exemple simple en css

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta charset="utf-8">
    <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;
    }
/* css infobulle depart */
    em.infobulle {
      color: #c00;
    }
    em.infobulle span {
      display: none;
    }

    em.infobulle:hover {
      border: 0;
      position: relative;
      z-index: 500;
    }

    em.infobulle:hover span {
      display: block;
      position: absolute;
      top: 20px;
      left: 30px;
      }

    a.infobulle span {
      display: none;
    }

    a.infobulle:hover {
      border: 0;
      position: relative;
      z-index: 500;
    }

    a.infobulle:hover span {
      display: block;
      position: absolute;
      top: 20px;
      left: 30px;
      filter: alpha(opacity=70);
      -moz-opacity: 0.70;
      opacity: 0.70;

    }
/* css infobulle fin */
    img {
      border: none;
    }
    /*]]>*/
    </style>
  </head>
  <body>
    <div id="content">
      <p>
        Eu faucibus mauris. <a class="infobulle" href="#" rel="nofollow noopener noreferrer" target="_blank">Sur un LIEN avec opacity a 70% <span><img src="data:image/png;base64,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"
        width="225" height="225" alt="img"></span></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>
        Lorem venenatis id et elit .<em class="infobulle">SUR UN TEXTE<span><img src="data:image/png;base64,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"
        width="225" height="225" alt="img"></span></em> consectetuer pede lacinia Duis Cum laoreet. Interdum Fusce
        Curabitur pede aliquet Nulla ut eros condimentum orci porttitor. Nunc.
      </p>
    </div>
  </body>
</html>


a+
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
30 juin 2017 à 11:23
Salut
mais cela me semble bien long comme script
c est parce que j ai mis les images en base64 !!!

voila un exemple avec des images en ligne sur google image

<!DOCTYPE html>
<html>
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <meta charset="utf-8">
    <style type="text/css">
/*<![CDATA[*/
    /* css infobulle depart */
    li.infobulle {
      color: #000;
      width: 50px;
      margin-bottom: 20px;
      cursor: pointer;
    }

    li.infobulle span {
      display: none;
    }

    li.infobulle:hover {
      border: 0;
      position: relative;
      z-index: 500;
    }

    li.infobulle:hover span {
      display: block;
      position: absolute;
      top: 20px;
      left: 60px;
    }
    /* css infobulle fin */

    img {
      border: ridge;
      width: 225px;
      height: 225px;
    }
    /*]]>*/
    </style>
  </head>
  <body>
    <ul>
      <li class="infobulle">livre 1<span><img src=
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQHER2lbhBa2KzHA7O8ormPoKomxqUYSt81WQRej8cRtujUWvNw" alt=
      "img livre 1"></span>
      </li>
      <li class="infobulle">livre 2<span><img src=
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTU-dv0UlHI_qE_dBG2tl6xmx8yXyGgw-TQfWmZ6vJNm2gnlt53" alt=
      "img livre 2"></span>
      </li>
      <li class="infobulle">livre 3<span><img src=
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbsVmK18I6bf-HdVpqX-UnFfjQRf9sok_CDa3Xo_8upB9IwHJ9" alt=
      "img livre 3"></span>
      </li>
      <li class="infobulle">livre 4<span><img src=
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6I4whJNHKTJj9y1OiFnTT_F__5w8hUazb0IAsoB7ss-vw2pHg" alt=
      "img livre 4"></span>
      </li>
    </ul>
  </body>
</html>


a+
0