Adapter une image cliquable en fonction de la taille du pc

Résolu/Fermé

Yadac Messages postés 4 Date d'inscription lundi 2 mai 2022 Statut Membre Dernière intervention 3 mai 2022 - 2 mai 2022 à 19:43
Yadac Messages postés 4 Date d'inscription lundi 2 mai 2022 Statut Membre Dernière intervention 3 mai 2022 - 3 mai 2022 à 18:25

Bonjour, je suis en train de faire un site sur html5. Mon site comporte un background cliquable séparé en 40 parties, le but c'est de cliquer sur le personnage et on accède directement à sa page. Le problème c'est que si je lance mon site sur une autre taille d'ordinateur que 14 pouces, les parties cliquables sont décalés à cause de la réduction / augmentation de la taille de l'écran et ne correspondent plus au personnage. J'aimerais trouver un code qui permet à ces parties de s'adapter à l'écran et que du coup les parties cliquables correspondent aux mêmes personnages pour toutes les tailles d'écran. C'est un peu compliqué à comprendre donc si vous avez besoin de plus d'informations n'hésitez pas à me les demander.

A voir également:

Adapter une image cliquable en fonction de la taille du pc
Comment réduire la taille d'un fichier - Guide
Test performance pc - Guide
Fonction si et - Guide
Reinitialiser pc - Guide
Pc lent - Guide

4 réponses

Réponse 1 / 4

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
3 mai 2022 à 13:21

Bonjour,

Plusieurs solutions non exclusives pour adapter l'image en fonction de la taille de l'écran :
- définir la largeur des images en utilisant des pourcentages
- utiliser des media queries
- utiliser les attributs srcset et sizes

https://www.codeur.com/tuto/css/image-responsive-css/

Réponse 2 / 4

Yadac Messages postés 4 Date d'inscription lundi 2 mai 2022 Statut Membre Dernière intervention 3 mai 2022 2
Modifié le 3 mai 2022 à 14:03

Oui j'ai déjà essayé cela mais ce n'est pas ce que je recherche. Le but de mon site c'est d'avoir une image en fond d'écran cliquable séparé en plusieurs parties. Quand on clique sur un personnage ça nous donne des informations sur lui, ça marche. le problème c'est que quand on change de taille d'écran, le fond d'écran s'adapte à l'écran mais les parties cliquables non .

Donc la partie cliquable reliée à un personnage A n'est plus sur le personnage A mais elle est décalé.

J'aimerais donc trouver un moyen pour que les parties cliquables soient intelligentes et qu'elles s'adapter à l'aggrandissement / réduction de l'image pour qu'elle corresponde au bon personnage.

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
3 mai 2022 à 17:26

Comment sont définies les zones cliquables ?
Est-ce que tu pourrais partager un exemple de code html et css sur lequel on pourrait voir ton soucis (en utilisant les balises de code stp : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code) ?

Réponse 3 / 4

Yadac Messages postés 4 Date d'inscription lundi 2 mai 2022 Statut Membre Dernière intervention 3 mai 2022 2
3 mai 2022 à 17:41

Mon code pour les zones cliquables :

<body>
<div id="habillage_site">
<a href="#"><img src="https://i.imgur.com/L83gVgf.jpg" alt="" usemap="#map1650901116040">
<map id="map1650901116040" name="map1650901116040"><area shape="rect" coords="64.00001525878906,529,194.00001525878906,700" title="" alt="" href="site4.html" target="_self"><area shape="rect" coords="80.00001525878906,229.00000381469727,126.00001525878906,304.00000381469727" title="" alt="" href="site5.html" target="_self"><area shape="rect" coords="263.00001525878906,26.000000953674316,452.00001525878906,261.0000009536743" title="" alt="" href="site6.html" target="_self"><area shape="rect" coords="509.00001525878906,553,552.0000152587891,601" title="" alt="" href="site13.html" target="_self"><area shape="rect" coords="346.00001525878906,330.00000762939453,490.00001525878906,467.00000762939453" title="" alt="" href="site7.html" target="_self"><area shape="rect" coords="502.00001525878906,13,715.0000152587891,220" title="" alt="" href="site3.html" target="_self"><area shape="rect" coords="643.0000152587891,226.00000762939453,746.0000152587891,357.00000762939453" title="" alt="" href="site9.html" target="_self"><area shape="rect" coords="665.0000152587891,608.0000305175781,741.0000152587891,734.0000305175781" title="" alt="" href="site10.html" target="_self"><area shape="rect" coords="519.0000152587891,745,658.0000152587891,818" title="" alt="" href="site11.html" target="_self"><area shape="rect" coords="18,732,186,827" title="" alt="" href="site12.html" target="_self"><area shape="rect" coords="735.0000152587891,77.00000381469727,796.0000152587891,189.00000381469727" title="" alt="" href="site8.html" target="_self"><area shape="rect" coords="513.0000152587891,309.00000762939453,641.0000152587891,450.00000762939453" title="" alt="" href="site14.html" target="_self"><area shape="rect" coords="784.0000152587891,727,989.0000152587891,827" title="" alt="" href="site15.html" target="_self"><area shape="rect" coords="867.0000762939453,572.0000152587891,938.0000762939453,669.0000152587891" title="" alt="" href="site16.html" target="_self"><area shape="rect" coords="763.0000152587891,314.00000762939453,857.0000152587891,403.00000762939453" title="" alt="" href="site18.html" target="_self"><area shape="rect" coords="811.0000762939453,484.00000762939453,892.0000762939453,565.0000076293945" title="" alt="" href="site17.html" target="_self"><area shape="rect" coords="1141.0000457763672,185,1151.0000457763672,195" title="" alt="" href="site_secret.html" target="_self"><area shape="rect" coords="864.0000152587891,337.00000762939453,925.0000152587891,401.00000762939453" title="" alt="" href="site37.html" target="_self"><area shape="rect" coords="808.0000762939453,31,976.0000762939453,201" title="" alt="" href="site19.html" target="_self"><area shape="rect" coords="758.0000152587891,222.00003051757812,907.0000152587891,312.0000305175781" title="" alt="" href="site20.html" target="_self"><area shape="rect" coords="991.0000762939453,42.99999237060547,1077.0000762939453,139.99999237060547" title="" alt="" href="site21.html" target="_self"><area shape="rect" coords="960.0000457763672,312.00001525878906,1034.0000457763672,384.00001525878906" title="" alt="" href="site22.html" target="_self"><area shape="rect" coords="1241.999984741211,77.98863506317139,1415.999984741211,255.9886350631714" title="" alt="" href="site23.html" target="_self"><area shape="rect" coords="1150.999984741211,27,1300.999984741211,77" title="" alt="" href="site24.html" target="_self"><area shape="rect" coords="1061.0000457763672,311.00001525878906,1127.0000457763672,383.00001525878906" title="" alt="" href="site25.html" target="_self"><area shape="rect" coords="1188.999984741211,261.0000305175781,1243.999984741211,317.0000305175781" title="" alt="" href="site26.html" target="_self"><area shape="rect" coords="1245.999984741211,384.00000762939453,1313.999984741211,475.00000762939453" title="" alt="" href="site27.html" target="_self"><area shape="rect" coords="1278.999984741211,327.0000190734863,1329.999984741211,373.0000190734863" title="" alt="" href="site28.html" target="_self"><area shape="rect" coords="294.00001525878906,612.0000152587891,357.00001525878906,686.0000152587891" title="" alt="" href="site39.html" target="_self"><area shape="rect" coords="1351.999984741211,324,1389.999984741211,369" title="" alt="" href="site29.html" target="_self"><area shape="rect" coords="1391.999984741211,338.00000762939453,1445.999984741211,416.00000762939453" title="" alt="" href="site30.html" target="_self"><area shape="rect" coords="1354.999984741211,505.00001525878906,1393.999984741211,550.0000152587891" title="" alt="" href="site31.html" target="_self"><area shape="rect" coords="1040.0000457763672,553,1075.0000457763672,593" title="" alt="" href="site13.html" target="_self"><area shape="rect" coords="1089.0000457763672,633,1152.0000457763672,678" title="" alt="" href="site32.html" target="_self"><area shape="rect" coords="457.00001525878906,638.0000305175781,517.0000152587891,666.0000305175781" title="" alt="" href="site32.html" target="_self"><area shape="rect" coords="1043.0000457763672,674,1087.0000457763672,715" title="" alt="" href="site38.html" target="_self"><area shape="rect" coords="127.00001525878906,62,183.00001525878906,141" title="" alt="" href="site33.html" target="_self"><area shape="rect" coords="225.00001525878906,91,254.00001525878906,128" title="" alt="" href="site8.html" target="_self"><area shape="rect" coords="140.00001525878906,265.00000762939453,195.00001525878906,345.00000762939453" title="" alt="" href="site34.html" target="_self"><area shape="rect" coords="911.0000152587891,216.00000143051147,961.0000152587891,263.0000014305115" title="" alt="" href="site35.html" target="_self"><area shape="rect" coords="147.00001525878906,211.00003051757812,258.00001525878906,257.0000305175781" title="" alt="" href="site36.html" target="_self"></map>
</div>

J'ai eu la flemme de chercher chaque position de l'image donc j'ai utiliser ce site : https://www.html-map.com/.

Mon CSS qui permet d'avoir un background cliquable :

#habillage_site {position:fixed;width:100%;height:100%;top:0;left:0;background-position:top center;background-repeat:no-repeat;background-image:url('imageinteractive.jpg');}
#habillage_site img {width:100%;height:100%;}
.container {width:980px;margin:auto;border:1px solid #000;position:relative;}

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
3 mai 2022 à 18:01

La map générée par le site que tu utilises n'est pas responsive, autrement dit elle ne s'adapte effectivement pas à la taille de l'écran. Une recherche "responsive image map generator" devrait te donner pleins d'autres sites similaires.

Un générateur parmi d'autres : https://imagemapper.noc.io/#/
Exemple avec ce générateur (2 zones cliquables sur Anakin et Chewie) : https://jsfiddle.net/9tbvLgfx/

Réponse 4 / 4

Yadac Messages postés 4 Date d'inscription lundi 2 mai 2022 Statut Membre Dernière intervention 3 mai 2022 2
3 mai 2022 à 18:25

Merci bcp, tu m'as sauver la vie, ça marche super bien.