CSS rollover

[chamagne]

Bonjour
Des images parlant mieux qu'un texte, voici une liste telle qu'elle apparaît sur mon site :

En passant la souris sur une mini-image, celle-ci s'agrandit (avec le même lien sur texte et image) :

J'ai simplement en tête de page un style :

.full:hover { width:160px; }

Et le code pour cet affichage :

<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]

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

 

[niap]

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

<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>

.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]

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.

 

[rick38]

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]

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

- avec souris sur texte

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]

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

- Au passage souris sur lien

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

.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

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]

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]

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]

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]

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]

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]

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

 

[chamagne]

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

 

[gotgot]

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]

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