Mettre en premier plan une image par survol
Résolu
Paps
-
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour !
A voir le nombre de pages qui traitent de ce sujet, je pense qu'il est très banal, ou très commun, chez les créateurs de pages html.
Pourtant, malgré des heures passées à parcourir les forums, je n'ai pas trouvé la réponse à ma question.
Peut-être, en tant que débutant, ai-je mal lu ?
Ce que j'aimerais faire : sur une page, j'ai une trentaine de photos miniatures (min1, 2, etc.). J'ai par ailleurs la trentaine de photos de plus grande taille (max1, 2, etc.).
Je voudrais que lorsque la souris survole une miniature (min1, par exemple), la photo agrandie (max1) s'affiche en premier plan, au centre de préférence, sans décaler l'ensemble des miniatures restant en arrière-plan.
Tous mes essais, basés sur des exemples trouvés ici et là, avec les css, hover, z-index, etc. sont restés infructueux.
Une idée m'est passée par la tête, mais je ne m'y suis pas encore attaqué : rassembler toutes les miniatures en une seule image "background", y définir des "maps", donc un lien pour chacune d'elles, qui afficherait la photo agrandie sur un plan plus en avant. Est-ce jouable ?
Toutes les idées seront les bienvenues, merci !
A voir le nombre de pages qui traitent de ce sujet, je pense qu'il est très banal, ou très commun, chez les créateurs de pages html.
Pourtant, malgré des heures passées à parcourir les forums, je n'ai pas trouvé la réponse à ma question.
Peut-être, en tant que débutant, ai-je mal lu ?
Ce que j'aimerais faire : sur une page, j'ai une trentaine de photos miniatures (min1, 2, etc.). J'ai par ailleurs la trentaine de photos de plus grande taille (max1, 2, etc.).
Je voudrais que lorsque la souris survole une miniature (min1, par exemple), la photo agrandie (max1) s'affiche en premier plan, au centre de préférence, sans décaler l'ensemble des miniatures restant en arrière-plan.
Tous mes essais, basés sur des exemples trouvés ici et là, avec les css, hover, z-index, etc. sont restés infructueux.
Une idée m'est passée par la tête, mais je ne m'y suis pas encore attaqué : rassembler toutes les miniatures en une seule image "background", y définir des "maps", donc un lien pour chacune d'elles, qui afficherait la photo agrandie sur un plan plus en avant. Est-ce jouable ?
Toutes les idées seront les bienvenues, merci !
A voir également:
- Mettre en premier plan une image par survol
- Youtube en arrière plan - Guide
- Mettre une image en filigrane sur word - Guide
- Image iso - Guide
- Légender une image - Guide
- Recherche par image - Guide
4 réponses
Bonjour,
Le survol est une obligation, ou un clic sur l'image qui la zoom te conviendrais ?
Si c'est le cas, regarde du côté des plugins jQuery, comme lightbox ou highslide ;)
Le survol est une obligation, ou un clic sur l'image qui la zoom te conviendrais ?
Si c'est le cas, regarde du côté des plugins jQuery, comme lightbox ou highslide ;)
Paps
Je préfèrerais un "survol", mais bon....
OK,
Quelque chose comme ça ?
http://www.sohtanaka.com/web-design/examples/image-zoom/
La source est ici :
http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
Quelque chose comme ça ?
http://www.sohtanaka.com/web-design/examples/image-zoom/
La source est ici :
http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/
