Bonjour à tous
Les maps datent d'une époque où il n'était pas question de modifier la taille des images, alors que les récentes évolutions des appareils sur lesquels on affiche les pages HTML nécessitent en permanence de redéfinir la taille des objets, en particulier les images, pour tenir compte des différentes tailles d'écrans et du changement d'orientation très fréquent sur les appareils portables.
Existe-t-il un autre moyen d'obtenir le même résultat et qui soit responsive?
Oui clic droit a coté de l'image >>>afficher le code pour te télécharger les ressources

<!DOCTYPE html><html lang="fr">   
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
  <script src="img_responsive/html5.js"></script>
<![endif]-->
 <style>
 img.respon {width: 100%; height: auto;}
 </style>
</head>
<body>
<img class="respon" src="img_responsive/responsive.jpg" USEMAP="#banner" BORDER=0>
<map name="banner">
  <area shape="rect" coords="527,172,571,226" href="http://www.coffeecup.com"  alt="CoffeeCup Software" title="CoffeeCup Software" OnMouseOver="window.status='CoffeeCup Software'; return true" OnMouseOut="window.status=''; return true" target="_blank">
  <area shape="rect" coords="590,610,803,877" href="http://www.coffeecup.com/responsive-layout-maker-pro/"  alt="Responsive Layout Maker Software" title="Responsive Layout Maker Software" OnMouseOver="window.status='Learn more about Responsive Layout Maker'; return true" OnMouseOut="window.status=''; return true" target="_blank">
  <area shape="rect" coords="339,250,608,459" href="http://www.coffeecup.com/about/#thegatekeeper"  alt="The Gate Keeper" title="The Gate Keeper" OnMouseOver="window.status='Meet the Gate Keeper'; return true" OnMouseOut="window.status=''; return true">
  <area shape="rect" coords="1005,645,1248,781" href="http://us.coca-cola.com/home/"  alt="Coke" title="Coke" OnMouseOver="window.status='Coke'; return true" OnMouseOut="window.status=''; return true" target="_blank">
  <area shape="rect" coords="1260,652,1398,790" href="http://www.v8juice.com"  alt="V8xx" title="V8xx" OnMouseOver="window.status='V8xx'; return true" OnMouseOut="window.status=''; return true" target="_blank">
  <area shape="rect" coords="125,1130,229,1258" href="http://www.coffeecup.com/maintenance/"  alt="" title="">
  <area shape="rect" coords="1264,138,1342,441" href="http://www.newbelgium.com/beer/detail.aspx?id=98a17b1b-eeda-4394-91fd-5310c60e9906"  alt="" title="">
  <area shape="rect" coords="1408,643,1467,776" href="http://us.cola.com/home/"  alt="" title="">
  <area shape="rect" coords="1030,504,1366,611" href="http://us.cola.com/home/"  alt="" title="">
  <area shape="rect" coords="1805,1002,2044,1218" href="http://www.zappos.com/?gclid=CJSzuPPUscACFVQV7Aodmw0A_A"  alt="" title="">
</map>
<script src="img_responsive/jquery.min.js"></script>
<script src="img_responsive/jquery.rwdImagemaps.min.js"></script>
<script>
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
	
});
</script>
</body>
</html>

Moi aussi j’ai un code similaire qui fonctionne très bien.
Je me demandais juste s’il n’y avait pas autre chose de plus simple qui ne nécessite pas de script, il semble que non, du moins je n’ai rien trouvé, d’où ma question
Pour ne pas tout reprendre, il y a transform:scale() qui permet de redimensionné l'image et les zone cliquable. Il faut cependant ce souvenir que l'image, occupe toujours le même espace dans le document. Des marges négative/positive peuvent compenser.

un viel exemple avec transform (2012/2013) : https://codepen.io/gcyrillus/pen/AJHmt

hs : chrome à toujours cette capacité d'affiché area et d'y faire un hover effect ... amusant mais ce n'est pas le sujet.
gcyrillus a écrit :
Pour ne pas tout reprendre, il y a transform:scale() qui permet de redimensionné l'image et les zone cliquable.

Quel beau cadeau, je gardes précieusement !!
Merci à toi Smiley smile
Administrateur
Je confirme pour transform: scale() et le critère "ne pas tout reprendre" avec https://www.vigicrues.gouv.fr : ça fonctionne partout où fonctionne CSS Transform Smiley smile Si on veut déplacer des blocs dans les espaces laissés libres dans certaines résolutions, c'est vite spaghetti et les marges négatives ce n'est jamais facile à maintenir ensuite mais eh s'il faut il faut Smiley confused