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

Messages: 218

Enregistré le: 23 Fév 2004

Message le Sam Avr 15, 2017 6: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
Haut
15 Réponses
Messages: 218

Enregistré le: 23 Fév 2004

Message le Sam Avr 15, 2017 6:22

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

Enregistré le: 17 Oct 2009

Message le Sam Avr 15, 2017 10: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.
Haut
Messages: 1965

Enregistré le: 15 Jan 2012

Message le Sam Avr 15, 2017 15: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 15:46, modifié 1 fois.
Haut
Messages: 484

Enregistré le: 23 Fév 2013

Message le Sam Avr 15, 2017 15: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.
Haut
Messages: 218

Enregistré le: 23 Fév 2004

Message le Sam Avr 15, 2017 18: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
Haut
Messages: 218

Enregistré le: 23 Fév 2004

Message le Dim Avr 16, 2017 7: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/
Haut
Messages: 1965

Enregistré le: 15 Jan 2012

Message le Dim Avr 16, 2017 9: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: ...
Haut
Messages: 140

Enregistré le: 17 Oct 2009

Message le Dim Avr 16, 2017 10: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.
Haut
Messages: 218

Enregistré le: 23 Fév 2004

Message le Dim Avr 16, 2017 11: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 !
Haut
Messages: 140

Enregistré le: 17 Oct 2009

Message le Dim Avr 16, 2017 12: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 ?
Haut
Messages: 218

Enregistré le: 23 Fév 2004

Message le Dim Avr 16, 2017 14: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
Haut
Messages: 1433

Enregistré le: 11 Déc 2012

Message le Dim Avr 16, 2017 14:40

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

Enregistré le: 23 Fév 2004

Message le Lun Avr 17, 2017 5:07

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

Enregistré le: 1 Oct 2014

Message le Lun Avr 17, 2017 21: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
Haut
Messages: 218

Enregistré le: 23 Fév 2004

Message le Mar Avr 18, 2017 4: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
Haut

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.