Adapter une image cliquable en fonction de la taille du pc

Résolu

Yadac Messages postés 4 Date d'inscription Statut Membre Dernière intervention -
Yadac Messages postés 4 Date d'inscription Statut Membre Dernière intervention - 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.

Afficher la suite

A voir également:

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

4 réponses

Réponse 1 / 4

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

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 Statut Membre Dernière intervention 2

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 Statut Membre Dernière intervention 527

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 Statut Membre Dernière intervention 2

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 Statut Membre Dernière intervention 527

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 Statut Membre Dernière intervention 2

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

Discussions similaires

À quoi correspond 32x32 US en taille française pour un jean ?

Votre réponse

Discussions similaires