CSS rollover

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

  1. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    223
    J'aime reçus:
    0
    Bonjour
    Des images parlant mieux qu'un texte, voici une liste telle qu'elle apparaît sur mon site :
    [​IMG]
    En passant la souris sur une mini-image, celle-ci s'agrandit (avec le même lien sur texte et image) :
    [​IMG]
    J'ai simplement en tête de page un style :
    Code:
    .full:hover { width:160px; }
    Et le code pour cet affichage :
    Code:
    <a href="page">nom d'espèce <img src="image" width="32" align="absmiddle" class="full"></a>
    (Nom d'espèce géré par php à partir d'un fichier csv, page et adresse d'image déduites du nom d'espèce)

    Parfait, ça marche, mais ma liste qui comprend déjà plus de 100 espèces devrait bientôt en contenir beaucoup plus et la hauteur de ma page commence à devenir conséquente sans compter le poids des images.
    Page visible sur http://www.geologues-prospecteurs.fr/documents/earth-archives-dinos/

    Solution minimum : supprimer les mini-images et afficher l'image au passage sur le nom d'espèce (gain sur le poids des images n'existant plus, soit plus de 2 Mo)

    Une idée simple ? Sans passer par javascript si possible (css, sachant que toutes les images ont une largeur fixe de 160)

    Merci de votre aide
     
  2. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    223
    J'aime reçus:
    0
    Solution alternative : comment afficher la page quasi-immédiatement, les images apparaissant au fur et à mesure de leur chargement
     
  3. niap
    niap WRInaute discret
    Inscrit:
    17 Octobre 2009
    Messages:
    139
    J'aime reçus:
    0
    Tu peux charger tes image en CSS. Les images au survol :)hover) ne sont pas préchargés à l'ouverture de la page.

    Code:
    <a class="espece" id="espece1" href="page">nom d'espèce</a>
    <a class="espece" id="espece2" href="page">nom d'espèce</a>
    <a class="espece" id="espece3" href="page">nom d'espèce</a>
    
    Code:
    .espece{
        backgroud-repeat: no-repeat;
        background-size: contain;
    }
    #espece1:hover{
        backgroud-image: url('image1');
    }
    #espece2:hover{
        backgroud-image: url('image2');
    }
    #espece3:hover{
        backgroud-image: url('image3');
    }
    
    Tu n'as plus qu'à générer un fichier CSS à partir du CSV.
     
  4. Koxin-L.fr
    Koxin-L.fr WRInaute passionné
    Inscrit:
    15 Janvier 2012
    Messages:
    1 972
    J'aime reçus:
    0
    Ergonomiquement, soit tu fais une galerie soit tu fais une liste.

    Le mix des 2 n'est pas vraiment recommandé sur les longues listes, pour la raison suivante :

    J'arrive sur ta page, ma souris se trouve quasi obligatoirement sur un lien... la photo apparait.
    Pour accéder au lien suivant, je doit sortir du cadre de la photo et revenir sur le lien suivant.
    ... en espérant que je ne passe pas par un autre lien avant.

    La solution, c'est pour mois de faire une galerie avec tes miniature et le texte qui s'affiche sur celle-ci au passage de la souris.

    Evidement... plus il y aura de miniature, plus ça prendra de temps à charger.

    Sinon, une page de manière à ne pas interférer déplacement de la souris et affichage de l'image :
    http://www.univertdurable.com/particuliers-galerie-photo-UVD106.html

    Et pour les longue liste, tu partitionne en fausse page que tu fait défiler par une double flèche en bas de la liste.
     
  5. rick38
    rick38 WRInaute impliqué
    Inscrit:
    23 Février 2013
    Messages:
    542
    J'aime reçus:
    1
    Il faut aussi qu'il génére des petites images qui feront moins d'1 Ko, ne pas utiliser les images réelles pour les aperçus.
     
  6. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    223
    J'aime reçus:
    0
    De retour après occupations diverses
    Niap :
    Ca ne colle pas, on se retrouve avec un EXTRAIT de l'image en fond du lien :
    - sans souris sur texte
    [​IMG]
    - avec souris sur texte
    [​IMG]

    Koxin :
    Souris sur le lien, il y a peu de chance, mes extraits ne sont qu'une petite partie de la page (voir page citée plus haut)
    Cette partie de liste est dans une colonne et les liens dépendent d'autres colonnes ordonnées selon une classification qui change à chaque nouvel ajout.
    Une galerie dans ce cas serait une véritable usine à gaz pour le code

    Rick38 : j'y pensais et pense que vais m'y résoudre mais préférerais l'absence de miniatures et leur seule apparition au passage sur un lien comme l'ai dit en tête de message
     
  7. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    223
    J'aime reçus:
    0
    Bonjour et bonne chasse aux oeufs
    La nuit (courte) portant conseil, ai cherché ce matin "infobulle" et trouvé ce que je voulais
    - Avant passage souris sur lien
    [​IMG]
    - Au passage souris sur lien
    [​IMG]

    C'est PARFAIT (du moins pour moi)
    - que du CSS
    - affichage rapide de la page (pas d'images à charger)
    - pas de risque de mordre accidentellement avec la souris sur l'image
    - grande facilité de voir toutes les espèces d'une même famille en descendant la souris dans la liste, rapidité en plus
    ...

    Pour ceux que ça intéresse :
    - 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:auto;
      border:1px solid black;
      margin-top:-54px;
      margin-left:230px;
      overflow:hidden;
    }
    - html
    Code:
    echo '<a class="tooltip" href="lien">';
    echo nom d'espèce;
    echo '<span><img src="adresseimage"></span>';
    echo '</a>';
    
    Génial et RESOLU, utiliserai ça sur d'autres pages et d'autres sites
    Voir la page en question pour test : http://www.geologues-prospecteurs.fr/documents/earth-archives-dinos/
     
  8. Koxin-L.fr
    Koxin-L.fr WRInaute passionné
    Inscrit:
    15 Janvier 2012
    Messages:
    1 972
    J'aime reçus:
    0
    Autant pour moi.
    Je n'ai pas trop trainé sur ton site, je déteste les popunder publicitaire :wink: ...
     
  9. niap
    niap WRInaute discret
    Inscrit:
    17 Octobre 2009
    Messages:
    139
    J'aime reçus:
    0
    Bah non, les images sont toutes chargées au lancement de la page.
    Par rapport à la solution que je t'ai suggéré, c'est normal que l'image n'était affiché en entier, il suffisait de la positionner avec ton style.
     
  10. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    223
    J'aime reçus:
    0
    Koxin : des popunders, il n'y en a pas, qui peux te les envoyer ?

    Niap :
    Ne suis pas expert en CSS loin de là, sans exemple, suis perdu, mais j'adapte ensuite
    NON, les images ne sont pas toutes chargées au lancement de la page, ça se ressent très largement au niveau du temps de chargement de la page, une image n'est chargée qu'au survol d'un lien.
    MERCI à tous de votre aide, vais poser les oeufs pour mes petits enfants !
     
  11. niap
    niap WRInaute discret
    Inscrit:
    17 Octobre 2009
    Messages:
    139
    J'aime reçus:
    0
    C'est bien cette page http://www.geologues-prospecteurs.fr/documents/earth-archives-dinos/ ?
    3.2 Mo et 183 images chargés ?
     
  12. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    223
    J'aime reçus:
    0
    C'est +/- ce que donnent webdevelopper et d'autres, mais, à mon avis ces calculs sont faux
    Les adresses images existent bien dans la page mais les images ne sont pas chargées
    Une seule image est chargée à la demande lors du passage de la souris
    Mais je me trompe peut-être
    Mais ne vois que la différence de temps de téléchargement de la page par rapport à avant et c'est bien l'essentiel
     
  13. FortTrafic
    FortTrafic WRInaute passionné
    Inscrit:
    11 Décembre 2012
    Messages:
    1 450
    J'aime reçus:
    5
    Ca dépend des navigateurs, certains décident de charger d'autres non quand c'est en display:none.
     
  14. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    223
    J'aime reçus:
    0
    J'en apprend tous les jours, c'est bon pour Alzheimer qui me guette
     
  15. gotgot
    gotgot WRInaute discret
    Inscrit:
    1 Octobre 2014
    Messages:
    189
    J'aime reçus:
    0
    pourquoi pas de javascript?
    Tu charges que les images visiblent au début (voir aucune), une fois que la page est chargé tu peux commencer à pré-charger toutes tes images, et après tu les rends visible quand l'utilisateur scroll
     
  16. chamagne
    chamagne WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    223
    J'aime reçus:
    0
    bonjour
    gotgot : parce que pas toujours activé, d'une part et parce que j'ai suffisamment de mal avec php et ne souhaite pas me mélanger les crayons avec un autre langage, c'est aussi pourquoi ai abandonné mysql et préfère bosser sur fichiers textes, c'est beaucoup plus facile pour moi