CSS rollover

Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics


chamagne
WRInaute discret
WRInaute discret
 
Messages: 218
Enregistré le: 23 Fév 2004

CSS rollover

Message le Sam Avr 15, 2017 5:01

Bonjour
Des images parlant mieux qu'un texte, voici une liste telle qu'elle apparaît sur mon site :
Image
En passant la souris sur une mini-image, celle-ci s'agrandit (avec le même lien sur texte et image) :
Image
J'ai simplement en tête de page un style :
Code: Tout sélectionner
.full:hover { width:160px; }

Et le code pour cet affichage :
Code: Tout sélectionner
<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


chamagne
WRInaute discret
WRInaute discret
 
Messages: 218
Enregistré le: 23 Fév 2004

Re: CSS rollover

Message le Sam Avr 15, 2017 5:22

Solution alternative : comment afficher la page quasi-immédiatement, les images apparaissant au fur et à mesure de leur chargement


niap
WRInaute discret
WRInaute discret
 
Messages: 137
Enregistré le: 17 Oct 2009

Re: CSS rollover

Message le Sam Avr 15, 2017 9:13

Tu peux charger tes image en CSS. Les images au survol (:hover) ne sont pas préchargés à l'ouverture de la page.

Code: Tout sélectionner
<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: Tout sélectionner
.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.


Koxin-L.fr
WRInaute passionné
WRInaute passionné
 
Messages: 1961
Enregistré le: 15 Jan 2012

Re: CSS rollover

Message le Sam Avr 15, 2017 14:42

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.
Modifié en dernier par Koxin-L.fr le Sam Avr 15, 2017 14:46, modifié 1 fois.

rick38
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 468
Enregistré le: 23 Fév 2013

Re: CSS rollover

Message le Sam Avr 15, 2017 14:45

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.


chamagne
WRInaute discret
WRInaute discret
 
Messages: 218
Enregistré le: 23 Fév 2004

Re: CSS rollover

Message le Sam Avr 15, 2017 17:38

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
Image
- avec souris sur texte
Image

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


chamagne
WRInaute discret
WRInaute discret
 
Messages: 218
Enregistré le: 23 Fév 2004

Re: CSS rollover

Message le Dim Avr 16, 2017 6:20

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
Image
- Au passage souris sur lien
Image

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: Tout sélectionner
.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: Tout sélectionner
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/


Koxin-L.fr
WRInaute passionné
WRInaute passionné
 
Messages: 1961
Enregistré le: 15 Jan 2012

Re: CSS rollover

Message le Dim Avr 16, 2017 8:47

chamagne a écrit:Souris sur le lien, il y a peu de chance

Autant pour moi.
Je n'ai pas trop trainé sur ton site, je déteste les popunder publicitaire :wink: ...


niap
WRInaute discret
WRInaute discret
 
Messages: 137
Enregistré le: 17 Oct 2009

Re: CSS rollover

Message le Dim Avr 16, 2017 9:04

chamagne a écrit:C'est PARFAIT (du moins pour moi)
- que du CSS
- affichage rapide de la page (pas d'images à charger)

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.


chamagne
WRInaute discret
WRInaute discret
 
Messages: 218
Enregistré le: 23 Fév 2004

Re: CSS rollover

Message le Dim Avr 16, 2017 10:43

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 !


niap
WRInaute discret
WRInaute discret
 
Messages: 137
Enregistré le: 17 Oct 2009

Re: CSS rollover

Message le Dim Avr 16, 2017 11:46

chamagne a écrit: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.

C'est bien cette page http://www.geologues-prospecteurs.fr/documents/earth-archives-dinos/ ?
3.2 Mo et 183 images chargés ?


chamagne
WRInaute discret
WRInaute discret
 
Messages: 218
Enregistré le: 23 Fév 2004

Re: CSS rollover

Message le Dim Avr 16, 2017 13:09

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


FortTrafic
WRInaute passionné
WRInaute passionné
 
Messages: 1430
Enregistré le: 11 Déc 2012

Re: CSS rollover

Message le Dim Avr 16, 2017 13:40

Ca dépend des navigateurs, certains décident de charger d'autres non quand c'est en display:none.


chamagne
WRInaute discret
WRInaute discret
 
Messages: 218
Enregistré le: 23 Fév 2004

Re: CSS rollover

Message le Lun Avr 17, 2017 4:07

J'en apprend tous les jours, c'est bon pour Alzheimer qui me guette

gotgot
WRInaute discret
WRInaute discret
 
Messages: 183
Enregistré le: 1 Oct 2014

Re: CSS rollover

Message le Lun Avr 17, 2017 20:45

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


chamagne
WRInaute discret
WRInaute discret
 
Messages: 218
Enregistré le: 23 Fév 2004

Re: CSS rollover

Message le Mar Avr 18, 2017 3:24

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


Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :