18050 sujets

Questions générales et questions de débutants

[RESOLU] Map image et responsive web design

Bonjour,
Il fallait bien un jour aborder ce sujet, et malgré tout mes tests,
je ne parvient pas à régler mes rectangles lorsque l'image a dans la feuille de style:
(ici je l'ais mis dans le html), width=90% par exemple.

 <MAP name=FPMap0>
        <AREA shape=RECT  coords=27,38,134,127 href="#" onMouseOver="javascript:Labule('Alain Coachon ',1);" onMouseOut="javascript:EfaceHelp();"  >
        <AREA shape=RECT  coords=198,57,260,144 href="#" onMouseOver="javascript:Labule('Fortune Ayivi Fandalor',1);" onMouseOut="javascript:EfaceHelp();"  >
        <AREA shape=RECT  coords=328,57,391,157 href="#" onMouseOver="javascript:Labule('Claude Gourdin',1);" onMouseOut="javascript:EfaceHelp();"  >
        <AREA shape=RECT  coords=492,57,599,166 href="#" onMouseOver="javascript:Labule(' Benoit Hagenimana',1);" onMouseOut="javascript:EfaceHelp();"  >
        <AREA shape=RECT  coords=610,57,727,188 href="#" onMouseOver="javascript:Labule(' Simone Verchère',1);" onMouseOut="javascript:EfaceHelp();"  >

        <AREA shape=RECT  coords=134,104,197,147 href="#" onMouseOver="javascript:Labule('Françoise Barruel' ,1);" onMouseOut="javascript:EfaceHelp();"  >
        <AREA shape=RECT  coords=127,147,210,191 href="#" onMouseOver="javascript:Labule('Françoise Barruel' ,1);" onMouseOut="javascript:EfaceHelp();"  >
        <AREA shape=RECT  coords=262,104,326,235 href="#" onMouseOver="javascript:Labule(' Brigitte Duféal',1);" onMouseOut="javascript:EfaceHelp();"  >
        <AREA shape=RECT  coords=393,104,475,190 href="#" onMouseOver="javascript:Labule(' Maria Labranche',1);" onMouseOut="javascript:EfaceHelp();"  >

        <AREA shape=RECT  coords=171,195,258,317 href="#" onMouseOver="javascript:Labule('Etienne Kabasele',1);" onMouseOut="javascript:EfaceHelp();"  >
        <AREA shape=RECT  coords=382,192,449,276 href="#" onMouseOver="javascript:Labule('Jean-Pierre Roche',1);" onMouseOut="javascript:EfaceHelp();"  >
        <AREA shape=RECT  coords=348,279,491,386 href="#" onMouseOver="javascript:Labule('Jean-Pierre Roche',1);" onMouseOut="javascript:EfaceHelp();"  >
        <AREA shape=RECT  coords=536,193,633,319 href="#" onMouseOver="javascript:Labule('Jean-Claude Djéréké',1);" onMouseOut="javascript:EfaceHelp();"  >

        <AREA shape=RECT  coords=155,394,241,646 href="#" onMouseOver="javascript:Labule('Noëlie Gerland',1);" onMouseOut="javascript:EfaceHelp();"  >
        <AREA shape=RECT  coords=420,401,519,646 href="#" onMouseOver="javascript:Labule('Christine Hemery',1);" onMouseOut="javascript:EfaceHelp();"  >
</MAP>
<IMG  src="logos/eps_sept_07_012.jpg"  useMap=#FPMap0 border=0 width=90%>

Avez vous déja traité ce probléme Smiley confused
Merci d'avance
Modifié par Christele (05 May 2014 - 18:14)
Bonjour,

Si je dis pas de bêtises, ce code ne fonctionnera pas correctement :
<IMG  src="logos/eps_sept_07_012.jpg"  useMap=#FPMap0 border=0 width=90%>

Le width est interpreté en px, tu ne peux pas définir de pourcentage. Tu ne dois pas rajouter d'unité derrière ta valeur. Et c'est mieux de mettre entre double quotes (mais ça, ça n'empêchera pas le code d'être interprêté).

La solution est donc d'écrire en css :
img {
    max-width: 100%;
}

ou si tu préfères :
img {
    max-width: 90%;
}
Merci de ta réponse,
C'est bien sur ce que j'avais Smiley cligne ,là n'est pas la question, mais comment changer dynamiquement les Shap !!
tu avais lu un peut vite ... Smiley confus
Whaou, merci !
Ça marche bien, mais un peut "usine à gaz"
Je vais en rester là et mettre résolu, merci encore à toi.
Évidement si tu ne charges pas déjà la librairie JQuery sur ton site, c'est sans doute de l'artillerie lourde pour peu de chose....
Raphi a écrit :
@Christele : oups j'avais lu trop vite ton post en effet ! Smiley biggol

Ce n'est pas grave, en tout cas merci d'essayer d'aider les autres, tu es sympa !
A++
Sujet clos
Aller à