Zone cliquable responsive

JeremieMeunier
Les bases HTML/CSS

Bonsoir,

Je voulais savoir si qulequ'un avait déjà eu affaire avec la situation suivante :

Intégrer une image qui va prendre toute la largeur de l'écran (mobile uniquement) et qui as des liens positionner dessus à des endroits précis pour indiquer un élément en particulier et ce avec l'image qui peut potentiellement être plus grande ou plus petite d'un écran à l'autre MAIS avec toujours les liens au même endroit (rapport à la dimensions de l'image évidement !)

EDIT :
J'y ai réfléchi le plus simple me semblait d'utiliser un positionnement avec des valeur relative (ex: 50%) ou avoir un positionnement de base avec en JS un calcul des nouvelles valeur en fonction de la taille de l'image !

Merci d'avance !

7 réponses

galyb
Réponse acceptée

Salut, la solution la plus propre même si c'est la plus chiante, c'est de faire comme pour un mailing et de découper l'image et de faire un grid.

JeremieMeunier
Auteur
Réponse acceptée

Salut !

Je pense qu'une bonne méthode aujourd'hui peut être l'utilisation des propriétés CSS grid, comme ça on peut, comme à dit galyb, découper en grille ce qui rend la taĉhe plus simple !

saibe

hello,
pourquoi ne pas positionner tes liens en flex ?

JeremieMeunier
Auteur

En flex c'est à dire ?

Laznet

Bonjour

Le problème avec ta méthode Saibe c'est que tu ne peux pas l'appliquer sur des éléments absolute. Or ce qu'il désire c'est de pouvoir mettre des liens / boutons sur une image (donc utiliser la gestion de l'empillement. donc >> z-index donc >> position absolute). Dans ce cas, moi ce que j'utilise c'est les bon vieux top, left, right etc.. et pour la gestion du responsive tu changes de valeur à chaque "cas" possible..

ce n'est pas forcément la meilleur des solutions (d'ailleurs si vous en avez une meilleurs ça m'intéresse également) mais c'est ce que j'utilise.

saibe

hello,
en effet, j'ai dû lire trop vite ;) J'imagine que tes liens sont des "zones" de ton image. il faudrait positionner ton image en relative puis tes liens en absolute, et bien définir tes positions et tes tailles en %.
si tu nous donnes un exemple ce serait plus simple....
++

JeremieMeunier
Auteur

En gros voilà le genre que ça donnerais !

Dans l'idée l'image en étant redimensionnée pourrait être tronquée légèrement !

Mais il faudrait, si elle fait 400px, 800px ou 1000px de large, que les liens soit toujours disposés pareil !