J'ai mis en place une image cliquable sur la page d'accueil qui fonctionne parfaitement sur mon ordinateur mais si j'essaie sur un autre ordi avec un plus petit écran et encore plus sur tablette ou smartphone les zones cliquables sont décalées et ne correspondent plus aux parties où cliquer.
J'ai créé cette image avec Gimp, j'ai un peu modifié les coordonnées à la main pour que ça colle avec mon ordi.
Je suis nul en codage alors si quelqu'un se trouve le courage de m'expliquer ce que je peux faire pas à pas, merci
l'image voit sa largeur s'adapter selon la largeur de l'écran (plus exactement du viewport), mais les coordonnées des zones cliquables sont toujours les mêmes (exprimées en entiers), donc ces zones se déplacent sur l'image quand sa largeur change...
il faut soit avoir une largeur d'image fixe, soit indiquer les coordonnées en pourcentage, sauf que l'utilisation de pourcentage n'est pas autorisé
Il y a pas mal de solutions proposées avec un javascript, mais j'ai troué un truc qui semble pas mal du tout, on abandonne la map, et on met des zones cliquables sous la forme de <a href=""></a>
j'ai testé, avec une image responsive dans la div image, et la div image avec une largeur de 50vh, les zones cliquables restent parfaitement positionnées quand la taille de l'image change
En fait, ces deux unités de mesure permettre d'indiquer des dimensions en fonction de la largeur ou hauteur de la fenêtre
50 vw de largeur signifie une largeur égale à la moitié de la fenêtre, cette largeur va donc varier selon la fenêtre
L'idée est la suivante :
on crée une div dont la largeur et proportionnelle à l'écran, donc sa largeur est exprimée en vw
à l'intérieur on va mettre l'image principale qu'on veut responsive, c'est-à-dire remplissant en totalité la div parent
Pour qu'une image soit responsive, en CSS :
img {
width: 100%;
height: auto;
}
à ce moment on a une div dont la largeur varie en fonction de la fenêtre ( = viewport), avec à l'intérieur une image qui la remplit complètement, et la hauteur de la div se fait automatiquement en fonction des proportions de l'image.
La deuxième étape consiste à places des zones cliquables, en l'occurrence des <a href></a> (ancres) qu'on va positionner en absolu dans la div principale, de façon a les placer exactement où on veut avec des valeurs pour top et left exprimées en pourcentage pour être toujours au même endroit de l'image quelque soit da largeur
De même les dimensions de chaque ancre seront exprimées en pourcentage pour être plus ou moins grandes selon la taille de l'image
Pour bien comprendre le principe, tu peux t'entraîner sur une page HTML de test avec une image quelconque
On peut ajouter une couleur de fond aux ancres <a> pour les visualiser, et enlever cette couleur de fond ensuite, ou bien mettre une bordure provisoire pour les repérer facilement
ne pas oublier de mettre la div principale en position:relative pour utiliser les positions absolues des ancres
en résumé :
une div responsive, qui contient une image qui la remplit car rsesponsive, et dans cette div, par dessus-l'image, des ancres cliquables qui ont une largeur et une hauteur en pourcentage et sont positionnées en absolu avec des coordonnés en pourcentage aussi, les pourcentage permettant de tenir compte des dimensions variables de la div parent et de l'image
Très important : toujours séparer le code HTML et le code CSS, dans deux fichiers séparés le fichier HTML appelle le fichier de mise en page CSS dans la partie <head></head>
J'ai mis une largeur de 50 vw mais on changera cette valeur en fonction de la mise en page générale, le principe est d'avoir une div dont la largeur est proportionnelle à la fenêtre (viewport)
Attention: ne pas oublier dans la partie <head></head>:
Oui, je savais que le CSS devait être séparé mais comme je n'avais pas trouvé de lieu d'intervention sur le css dans le cms, j'avais tenté ma chance dans le html ⊙﹏⊙ Bon, j'ai fini par trouver.
Si je comprends bien dans le css,
le premier point donne les caractéristiques de la div ( position et largeur dans la page)
le deuxième, les caractéristique de l'image dans la div
et le troisième, les caractéristiques des liens dans la div
C'est bien ça ?
Au fait, il faut commencer les commandes css par un point ?
Pour ce qui est de la largeur, je vais devoir faire des essais car le cms a une façon un peu spéciale de gérer la page :
J'ai du créer des colonnes dans lesquelles je place des images ou des "paragraphes",... et cette image doit aller dans la colonne du milieu où j'ai créé un paragraphe et j'interviens (pour le html) sur le code source du paragraphe.
Par contre pour ce que tu dis qu'il faut mettre entre le <head> et le </head> , j'ai vu dans le code source de la page ceci :
Merci à tous pour vos conseils, en particulier à ChrisLebure
image cliquable zones décalées
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pour apprendre on commence on fait des erreurs et après on s'améliore🤫