CSS - Affichage de plusieurs images au passage de la souris

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par chamagne, 19 Novembre 2017.

  1. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    195
    J'aime reçus:
    0
    Bonjour
    Au passage de la souris sur une miniature (64px), j'affiche 2 images (256px) qui apparaissent l'une sous l'autre.
    Je souhaiterais les afficher côte à côte avec un espacement de 2px (avec mon code actuel les attributs hspace et vspace sont inopérants.
    En images ça donne :
    affichage normal
    [​IMG]
    au passage de la souris sur la petite miniature de gauche
    [​IMG]
    Mon code html pour la miniature de 64px :
    Code:
    <td><a class="tooltip" href="pancratium-maritimum/"><img src="pancratium-maritimum/p.jpg" border="1"><span><img src="pancratium-maritimum/1.jpg" width="256" /><img src="pancratium-maritimum/2.jpg" width="256" /></span></a></td>
    La feuille de style attachée :
    Code:
    .tooltip { position:relative; } 
    .tooltip span { display:none; } 
    .tooltip span img { margin:0; } 
    .tooltip:hover span
    {
      display:block; 
      position:absolute;
    	z-index:1000;
      width:auto;
      border:0px solid black;
      margin-top:-66px;
      margin-left:110px;
      overflow:hidden;
    }
    La page en question : http://www.afleurdepau.com/Flore/amaryllidaceae/index.php

    Merci de m'aider, le CSS, c'est un peu du chinois pour moi
    Bon Dimanche
     
  2. gotgot
    gotgot WRInaute discret
    Inscrit:
    1 Octobre 2014
    Messages:
    187
    J'aime reçus:
    0
    tu peux mettre un padding sur .tooltip span img { margin:0; }
     
  3. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    195
    J'aime reçus:
    0
    Bonjour
    Enfin une réponse
    Mais comment faire ça, j'ai essayé un style="padding:0; /" sur le <a ou sur les <img, ça ne change rien
    Et dans mon style.css j'ai modifié .tooltip span img { margin:0; } en .tooltip span img { margin:0; padding:50; } pour voir, et ça ne change rien non plus
    Vous l'ai dit, suis nul en css
    Bonne journée
     
  4. bossboss
    bossboss WRInaute occasionnel
    Inscrit:
    28 Août 2004
    Messages:
    344
    J'aime reçus:
    0
    tu les désires côtes à côtes

    ne serait-ce pas

    plus tot?

    Code:
     display:inline; 
    que
    Code:
     display:block; 
     
  5. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    195
    J'aime reçus:
    0
    Ben ça ne change rien !
    Le mystère reste entier
     
  6. fran6
    fran6 WRInaute passionné
    Inscrit:
    21 Septembre 2004
    Messages:
    1 164
    J'aime reçus:
    7
    salut, dans .tooltip:hover span, remplace width:auto; par la largeur de tes 2 photos soit en gros width:520px;
     
  7. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    195
    J'aime reçus:
    0
    désolé, ça ne change rien non plus
     
  8. fran6
    fran6 WRInaute passionné
    Inscrit:
    21 Septembre 2004
    Messages:
    1 164
    J'aime reçus:
    7
    c'est bizarre, ça fonctionne en local pour moi, tu as bien mis ?
    Code:
    .tooltip:hover span
    {
      display:block;
      position:absolute;
       z-index:1000;
      width:520px;
      border:0px solid black;
      margin-top:-66px;
      margin-left:110px;
      overflow:hidden;
    }
     
  9. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    195
    J'aime reçus:
    0
    Bonjour
    "Bizarre, bizarre, vous avez dit bizarre !"
    J'avais dans mon css width="256px", ça ne marche pas :(
    Je change en width="520px", ça marche :D
    Je pinaille au pixel pour que les 2 images tiennent juste dans la largeur de la colonne
    J'insère une image vide de 1px entre les 2
    Et j'ai le résultat espéré
    Voir http://www.afleurdepau.com/Flore/amaryllidaceae/index.php
    Je récapitule :
    Fichier css
    Code:
    .tooltip { position:relative; } 
    .tooltip span { display:none; } 
    .tooltip span img { margin:0; } 
    .tooltip:hover span
    {
      display:block; 
      position:absolute;
    	z-index:1000;
      width:520px;
      border:0px solid black;
      margin-top:-66px;
      margin-left:107px;
      overflow:hidden;
    }
    et le code du <td> de mon tableau qui fera apparaître les 2 images dans la colonne suivante au passage de la souris sur la miniature :
    Code:
    <td width="64">
    <a class="tooltip" href="lien vers la fiche d'espèce">
    <img src="miniature" border="1" />
    <span><img src=1ère image" width="256" valign="top" /><img src="image vide" width="1" /><img src="2ème image" width="256" valign="top" /></span>
    </a>
    </td>
    MERCI à tous, mais ça reste bizarre !
    Bonne journée
     
  10. zikeur54
    zikeur54 WRInaute impliqué
    Inscrit:
    15 Juin 2010
    Messages:
    652
    J'aime reçus:
    46
    Bonjour, si je peux aider on ne sait jamais. La page d'accueil d'un de mes sites a cette particularité que l'image change en une deuxième image au passage de la souris.

    http://idee-etc.com/

    Si c'est pas une bonne réponse à votre question, je m'en excuse par avance.
     
  11. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    195
    J'aime reçus:
    0
    Merci zikeur mais ce que tu proposes est bien facile et mon problème a désormais sa solution (voir ci-dessus)
    Bonne soirée
     
  12. si-haut
    si-haut WRInaute discret
    Inscrit:
    3 Novembre 2017
    Messages:
    144
    J'aime reçus:
    30
    Je te comprend Chamagne sur le pinaillage et l’orfèvrerie au pixel près. Mais on est content quand ça marche.

    PS : Zikeur, ton site aurait besoin d'un bon petit lifting
     
  13. zikeur54
    zikeur54 WRInaute impliqué
    Inscrit:
    15 Juin 2010
    Messages:
    652
    J'aime reçus:
    46
    Je sais, je suis dessus en ce moment. Je l'ai abandonné depuis au moins 10 mois. Trop occupé sur le site de ma petite boutique.

    A ce propos, c'est dingue comme on peut retrouver ces anciens sites web quand on ne les visitent plus. J'ai 3 sites web et un forum et ma boutique. Je rencontre forcément des limites puisque j'édite seul. Je suis donc obligé de ne pas me rendre compte des problèmes lorsque qu'on "abandonne" des sites web qui restent en ligne.

    On crois qu'on va retrouver nos sites web intact et ce n'est pas toujours le cas. La police de caractère avait changé toute seule, je viens de la rétablir.
     
  14. si-haut
    si-haut WRInaute discret
    Inscrit:
    3 Novembre 2017
    Messages:
    144
    J'aime reçus:
    30
    Ça va notamment changer en fonction des navigateurs.

    Mettre dans le cahier des charges des vieux navigateurs et réussir à tout faire fonctionner dessus.
     
  15. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    195
    J'aime reçus:
    0
    J'ai le même pb, site datant de l'an 2000, me suis collé à la mise à jour depuis juillet, plus de 1200 pages revues, il ne m'en reste que plus de 7000 à voir !!!
    Dire qu'en l'an 2000 je n'osais dépasser des images de 350px en basse résolution !
     
Chargement...
Similar Threads - CSS Affichage images Forum Date
Affichage dynamique d'un tableau en css Développement d'un site Web ou d'une appli mobile 1 Juin 2017
Problème d'affichage en CSS Demandes d'avis et de conseils sur vos sites 12 Décembre 2014
Pb d'affichage code css font-weight:bold sous FF Développement d'un site Web ou d'une appli mobile 9 Décembre 2012
[Problème CSS+ JS] Affichage modifié par navigateur Développement d'un site Web ou d'une appli mobile 17 Juin 2011
<noscript><link ...> du css après un <link rel="preload"... Débuter en référencement 1 Mai 2021
Utiliser une grille CSS peut-il nuire au référencement ? Débuter en référencement 17 Janvier 2021
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
WordPress Suppression élément avec Css Demandes d'avis et de conseils sur vos sites 16 Août 2020
Conflit image responsive et animation css Développement d'un site Web ou d'une appli mobile 20 Février 2020
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020