28173 sujets

CSS et mise en forme, CSS3

[Résolu] Positionnement d'une image

Bonjour
J'affiche une colonne de petites icônes et, quand on les survole, j'affiche à droite l'image agrandie. Cela marche bien pour les icônes en haut de colonne mais pour celles du bas de colonne, l'image agrandie disparait dans le bas de l'écran. Il faudrait que je puisse afficher l'image agrandie de façon qu'elle soit toujours visible entièrement. Est-il donc possible de positionner une image à des coordonnées fixes par rapport à l'écran physique ?
Voici l'url de la page en test :
http://papapetch.free.fr/fort/fr/2007_saison.html

Ce post n'est peut-être pas bien placé dans le thème CSS, merci de me corriger si c'est le cas.
Modifié par Papapetch (27 Dec 2007 - 09:42)
Bonjour,

C'est possible par deux moyens (à ma connaissance):
- en CSS via le positionnement fixe position: fixed);
- en Javascript en calculant la hauteur de la page, la position actuelle, ce genre de chose.

Pour le positionnement fixe, c'est assez/très efficace, mais compris par Internet Explorer à partir de la version 7 seulement.
Pour une solution Javascript, ça pourrait ressembler à ce que font des scripts comme par exemple Lightbox. On notera cependant que ces scripts sont généralement conçus pour réagir au clic plutôt qu'au survol.

Mais je crois que les diverses solutions techniques que l'on pourrait retenir soulignent surtout le problème de fond qu'il y a à superposer un contenu à un autre, au clic ou au survol: on cache un contenu (celui du dessous), il y a toujours un risque que ça gêne l'utilisateur d'une manière ou d'une autre. Ce type d'effet est donc à utiliser avec parcimonie.
Merci Florent V. pour cette réponse
Je crois que la solution CCS va définir une position fixe "dans la page". Donc, en scrollant verticalement je vais retrouver le même problème : disparition de l'image agrandie en haut ou en bas de l'écran.

La solution Javascript correspond mieux à mon besoin mais elle est beaucoup plus complexe et je ne maitrise pas assez pour savoir l'utiliser correctement.

S'il n'y a pas d'alternative simple, je vais adapter la conception de ma page aux solutions que je saurais installer et mettre au point. Dommage. Smiley decu
Papapetch a écrit :
Je crois que la solution CCS va définir une position fixe "dans la page".

Non, cela définira une position fixe par rapport au viewport (zone de visualisation du navigateur). Pour en savoir plus, tester le fonctionnement de position: fixed avec les différents navigateurs modernes (Firefox, Opera, Safari, Internet Explorer 7...).

Papapetch a écrit :
Donc, en scrollant verticalement je vais retrouver le même problème : disparition de l'image agrandie en haut ou en bas de l'écran.

Cela correspond plutôt au comportement obtenu avec un script de type Lightbox: l'affichage est centré par rapport à la position de la page au moment de l'activation du script, mais on peut ensuite faire défiler la page et voire disparaitre l'image en surimpression qui s'affiche.

Papapetch a écrit :
La solution Javascript correspond mieux à mon besoin mais elle est beaucoup plus complexe et je ne maitrise pas assez pour savoir l'utiliser correctement.

C'est tout de même assez simple à mettre en place, vu qu'il n'y a pas besoin d'écrire soi-même du Javascript. Ceci dit...
Papapetch a écrit :
je vais adapter la conception de ma page aux solutions que je saurais installer et mettre au point.
... ça ne fait jamais de mal de se contenter de choses simples. Smiley cligne
Merci pour ces précisions
Je vais tester les deux solutions "pour voir" car si la première n'est pas utilisable avec IE6, ça élimine d'office bon nombre de lecteurs potentiels.
Sujet clos
Aller à