Convertir px en % - image mapping responsive - Fireworks

Réduire
X
Réduire
 
  • Page sur 1
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages
Précédent template Suivant
  • #1

    [RÉGLÉ] Convertir px en % - image mapping responsive - Fireworks

    Bonjour à tous,
    J'ai créé un mapping sur une carte de la belgique en définissant chaque province comme une zone, cependant quand je visionne le résultat sur une tablette ou un portable, mes zones ne correspondent pas (décalage).

    Le soucis c'est que mes coordonnées données par Fireworks sont en px et donc quand l'image est "adaptée" les coordonnées ne correspondent plus...

    Connaitriez vous un logiciel, une marche à suivre, une option à cocher dans fireworks, pour moi rendre ceci responsive :

    Code HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FW_Map_global</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Fireworks CS6 Dreamweaver CS6 target.  Created Thu May 12 17:00:53 GMT+0200 2016-->
</head>
<body bgcolor="#ffffff">
<img name="Map_global" src="images/site/img/Carte/Map_global.png" width="553" height="450" id="Map_global" usemap="#m_Map_global" alt="" /><map name="m_Map_global" id="m_Map_global">
<area shape="poly" coords="446,166,448,170,453,172,462,172,465,178,469,179,474,180,480,178,483,174,485,170,489,169,497,171,497,179,501,180,507,178,511,180,514,186,516,193,520,199,525,199,528,199,521,205,518,211,521,221,525,226,529,229,538,227,542,229,545,234,548,239,544,250,552,262,549,263,544,261,538,264,535,272,525,277,520,282,518,288,521,293,506,299,505,294,502,287,502,282,503,278,503,273,502,269,498,263,490,259,484,258,474,258,473,261,474,264,476,268,474,271,473,277,463,276,463,271,461,269,458,266,460,259,459,256,457,255,452,254,448,253,439,247,432,247,428,243,425,241,420,243,412,240,409,240,407,242,409,249,402,249,398,250,396,253,392,249,387,246,389,240,386,235,381,230,377,231,375,222,368,223,357,209,351,199,353,189,353,185,354,184,356,182,354,177,360,182,368,183,369,184,372,186,376,184,380,180,388,180,396,179,403,174,408,177,414,180,422,176,430,170,441,165,446,163,448,161,446,166,446,166" href="http://undca.be/index.php/liege" title="Liège" alt="Liège" />
<area shape="poly" coords="264,143,265,145,267,147,271,151,269,154,267,157,269,160,263,164,255,161,252,155,249,152,246,154,250,146,251,140,254,139,259,138,264,138,264,143,264,143" href="http://undca.be/index.php/bruxelles" title="Bruxelles" alt="Bruxelles" />
<area shape="poly" coords="318,162,326,170,329,169,332,171,335,173,340,175,348,170,351,171,348,172,347,176,349,181,348,185,346,190,339,195,326,200,317,202,312,200,303,201,298,203,299,210,292,209,288,210,286,215,283,217,281,219,277,215,274,212,263,210,252,209,244,203,241,198,237,197,239,194,235,190,232,188,227,190,223,195,222,193,223,190,222,183,224,181,228,180,230,182,235,184,241,187,242,186,245,185,248,187,251,185,253,182,260,181,264,177,274,173,277,176,281,179,285,176,289,174,295,176,301,174,304,169,302,164,308,165,315,161,318,162,318,162" href="http://undca.be/index.php/brabant-wallon" title="Brabant Wallon" alt="Brabant Wallon" />
<area shape="poly" coords="420,250,424,248,429,253,437,253,443,258,448,260,453,261,451,265,452,270,454,272,456,274,454,279,454,281,456,282,463,282,470,285,481,279,482,277,481,274,480,273,480,264,489,265,496,270,496,284,498,289,498,295,493,296,489,300,488,306,482,307,479,312,477,318,474,324,475,329,473,332,470,335,469,343,466,344,463,347,461,351,461,356,457,362,458,365,460,369,458,377,461,389,464,389,466,390,469,397,471,403,474,405,479,406,477,412,478,414,483,419,476,427,474,432,476,438,474,439,467,437,458,441,451,439,447,440,445,442,441,446,436,444,428,447,425,444,422,439,419,431,412,424,405,421,400,412,396,409,392,408,381,408,377,403,374,401,371,396,367,392,360,389,354,386,352,383,352,379,355,374,362,370,363,367,364,364,372,360,372,357,365,347,361,342,356,343,353,336,356,334,360,328,363,323,376,321,393,319,394,315,392,311,394,309,396,307,392,299,389,293,390,290,392,288,397,286,403,282,409,277,412,273,410,266,410,263,411,262,411,257,412,254,416,248,417,249,420,250,420,250" href="http://undca.be/index.php/province-du-luxembourg" title="Luxembourg" alt="Luxembourg" />
<area shape="poly" coords="345,201,352,209,356,216,354,218,353,220,357,222,362,224,369,232,375,238,377,237,379,236,383,242,382,243,381,246,386,254,395,261,402,256,407,256,404,260,404,263,399,268,399,273,402,274,406,271,405,274,402,277,395,282,391,282,385,286,380,288,379,291,380,294,383,295,386,300,389,306,387,307,385,309,384,313,382,315,372,317,364,317,364,312,361,311,357,313,356,318,355,327,350,329,345,335,352,348,352,349,355,350,358,348,361,349,363,351,365,357,362,360,356,364,356,367,348,374,346,376,347,379,341,387,338,387,335,373,339,363,334,354,330,350,325,349,328,344,329,342,329,340,329,337,330,332,331,328,336,322,336,315,338,312,340,310,338,306,335,303,330,303,328,301,325,300,314,307,312,310,311,314,307,315,304,319,301,322,301,327,302,329,304,332,302,333,303,339,289,342,283,345,279,349,273,351,270,346,268,341,267,331,264,319,266,314,265,308,263,305,262,304,265,300,267,289,265,286,263,285,259,284,256,284,255,287,251,284,259,279,268,274,273,274,276,270,283,272,289,271,293,269,293,266,294,260,298,244,295,241,293,241,295,234,293,227,290,225,292,220,292,216,294,215,299,217,303,215,306,211,304,207,308,209,309,208,311,207,312,208,314,210,316,209,317,208,323,208,325,205,340,201,346,197,345,201,345,201" href="http://undca.be/index.php/namur" title="Namur" alt="Namur" />
<area shape="poly" coords="168,168,172,173,177,173,178,174,182,176,187,174,187,180,191,185,196,187,203,188,217,184,216,191,219,197,225,201,228,198,232,195,233,200,238,202,239,206,240,207,244,209,250,215,254,221,262,216,270,218,271,222,271,223,273,224,274,223,276,222,277,222,284,223,286,223,284,226,285,233,289,232,286,240,287,243,292,247,288,250,288,257,287,261,290,266,283,267,280,265,277,264,273,265,270,268,263,269,260,272,250,277,246,280,245,284,248,289,255,293,261,290,259,299,256,304,259,313,259,324,262,335,263,344,267,350,257,347,250,345,237,349,232,344,231,341,228,338,237,331,240,328,242,324,236,308,230,308,231,301,232,295,236,291,239,287,241,283,239,278,235,275,227,273,219,267,212,257,209,257,204,258,199,258,195,260,192,262,184,257,177,257,167,258,163,261,161,265,161,250,159,239,155,230,147,224,138,224,137,218,135,216,130,216,125,217,122,220,119,222,117,224,109,221,105,218,104,214,104,204,101,195,99,189,100,186,102,183,100,176,98,174,93,175,93,170,105,172,105,177,108,180,113,182,118,177,126,171,137,171,136,174,137,176,139,177,152,180,155,178,158,174,160,169,165,168,168,168,168,168" href="http://undca.be/index.php/hainaut" title="Hainaut" alt="Hainaut" />
<area shape="poly" coords="367,105,364,111,357,119,354,127,355,130,357,133,363,136,368,134,375,136,373,138,371,140,367,148,367,152,368,157,365,160,363,163,363,165,365,167,364,177,360,175,355,166,348,163,344,164,341,168,338,164,336,162,331,164,315,154,309,155,304,156,297,157,295,166,291,165,282,170,279,168,277,167,279,161,277,158,276,157,277,155,278,155,275,147,273,144,271,142,271,138,267,131,255,132,249,133,245,139,243,147,239,150,238,155,239,158,243,159,247,161,249,164,253,172,248,175,248,180,240,180,233,175,228,172,222,175,209,179,200,181,194,179,198,176,202,174,200,170,199,167,204,169,210,167,214,164,217,160,219,156,217,152,216,149,220,142,221,137,223,134,226,134,229,130,232,125,230,121,235,118,241,115,243,108,247,107,265,117,270,115,275,118,277,117,279,116,280,117,282,118,283,117,286,116,290,118,295,115,301,112,303,112,307,117,310,113,313,110,319,108,320,113,327,113,344,106,344,107,350,108,353,110,359,112,362,109,364,105,367,105,367,105" href="http://undca.be/index.php/brabant-flamand" title="Brabant Flamand" alt="Brabant Flamand" />
<area shape="poly" coords="426,62,429,65,434,66,438,68,441,72,449,73,457,73,458,78,460,81,464,81,460,93,455,104,457,109,451,120,451,123,454,125,447,134,443,136,440,140,440,145,442,154,439,157,434,161,424,165,422,168,421,171,419,170,417,169,415,170,414,173,410,169,407,167,400,168,396,171,385,173,376,173,372,179,369,177,371,174,369,171,368,170,368,167,369,166,369,164,372,160,375,156,373,154,372,152,375,144,378,142,380,136,379,133,377,131,359,128,363,124,364,119,371,113,375,107,372,102,367,99,361,100,359,102,359,106,355,106,352,103,353,99,361,95,370,89,373,87,378,87,384,84,389,80,390,75,388,69,383,63,383,56,397,55,411,55,420,48,424,50,425,54,426,62,426,62" href="http://undca.be/index.php/limbourg" title="Limbourg" alt="Limbourg" />
<area shape="poly" coords="322,7,321,12,315,11,313,12,313,17,315,22,320,23,332,23,338,27,346,20,355,10,359,10,360,13,356,23,358,27,362,32,364,36,365,43,373,46,377,46,379,46,380,45,378,50,379,51,380,53,378,60,378,65,385,72,385,79,379,78,376,79,376,82,372,83,368,84,361,91,351,94,346,100,336,102,327,108,324,108,322,104,319,102,308,108,305,107,304,106,293,109,291,113,285,110,283,111,281,112,278,110,276,109,274,110,274,112,271,109,266,112,263,108,264,107,262,104,259,103,255,105,250,102,243,101,237,103,234,92,235,90,237,89,245,88,254,85,256,81,256,76,251,57,253,52,255,48,252,45,247,42,247,36,245,32,254,34,261,36,268,33,272,28,269,22,266,17,266,11,268,10,273,9,280,7,279,13,279,18,284,20,289,18,298,21,304,19,305,17,305,15,308,11,313,7,316,6,320,5,321,5,322,7,322,7" href="http://undca.be/index.php/anvers" title="Anvers" alt="Anvers" />
<area shape="poly" coords="249,49,247,51,245,55,247,67,249,69,251,73,251,82,241,85,239,84,237,83,233,84,230,87,229,92,230,97,230,104,237,113,234,114,230,114,225,116,224,121,224,124,224,129,222,127,220,127,217,128,216,133,214,136,215,138,216,140,213,145,209,151,214,155,211,160,203,163,201,162,200,161,196,162,194,165,194,172,190,168,185,167,179,168,174,168,174,161,170,160,167,162,165,161,164,160,157,161,154,166,151,170,148,172,143,171,143,166,140,164,136,163,133,165,136,161,139,157,136,148,130,143,132,137,130,134,127,132,130,125,128,121,127,119,129,112,128,102,121,95,114,90,119,84,124,77,122,73,120,71,119,62,120,60,123,60,129,62,136,60,141,59,143,56,141,51,146,51,148,50,150,49,173,57,172,62,173,65,176,68,191,71,195,69,201,66,210,61,219,58,228,52,243,37,241,41,242,44,249,49,249,49" href="http://undca.be/index.php/flandre-orientale" title="Flandre Orientale" alt="Flandre Orientale" />
<area shape="poly" coords="114,35,112,38,111,41,117,56,115,58,113,61,114,63,115,65,113,67,112,69,115,73,118,77,112,83,107,90,112,95,120,101,120,104,122,108,124,112,122,114,120,117,120,138,127,138,125,143,125,144,129,148,132,152,133,157,130,160,125,164,118,168,112,174,108,167,103,165,98,165,93,163,89,165,83,158,77,156,73,156,73,160,66,159,64,154,61,152,50,157,51,161,49,163,47,163,43,163,39,163,36,166,35,172,30,164,24,156,24,156,25,154,23,150,18,149,11,147,8,144,8,136,8,133,11,121,8,110,3,107,2,91,10,85,24,79,63,54,82,44,99,38,113,33,114,35,114,35" href="http://undca.be/index.php/flandre-occidentale" title="Flandre Occidentale" alt="Flandre Occidentale" />
</map>
</body>
</html>
    Un grand merci pour votre aide
    Dernière édition par _Ovb à 12/05/2016, 19h50
    Un petit Remerciements fait toujours plaisir
    Tags: fireworks, html, mapping, responsive
  • #2
    Re : Convertir px en % - image mapping responsive - Fireworks

    Bonjour,

    J'ai trouvé un petit truc qui semble être une solution : https://github.com/stowball/jQuery-rwdImageMaps

    Je n'ai pas essayé.....

    Pascal

    ps: c'était la réponse à http://forum.alsacreations.com/topic...eb-design.html
    If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

    Commentaire

    • #3
      Re : Convertir px en % - image mapping responsive - Fireworks

      Envoyé par pmleconte Voir le message
      Bonjour,

      J'ai trouvé un petit truc qui semble être une solution : https://github.com/stowball/jQuery-rwdImageMaps

      Je n'ai pas essayé.....

      Pascal

      ps: c'était la réponse à http://forum.alsacreations.com/topic...eb-design.html
      Merci je vais y regarder de suite et te tiens informé...
      Me reste juste a trouver comment l'appliquer
      Mais par la démo c'est bein bien ce qu'il me faut et cela à l'aire de marcher nickel...
      Un petit Remerciements fait toujours plaisir

      Commentaire

      • #4
        Re : Convertir px en % - image mapping responsive - Fireworks

        Cela marche merveilleusement bien
        Un grand merci à toi pour m'avoir sortit de ce mauvais pas
        Un bonne soirée et en espérant pouvoir te rendre la pareille prochainement.
        Un petit Remerciements fait toujours plaisir

        Commentaire

        • #5
          Re : Convertir px en % - image mapping responsive - Fireworks

          En regardant dans le source de la démo, cela a l'air simple:

          Code:
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
	
	$('area').on('click', function() {
		alert($(this).attr('alt') + ' clicked');
	});
});
          Yapuka......

          Pascal
          If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

          Commentaire

          • #6
            Re : Convertir px en % - image mapping responsive - Fireworks

            Désolé pour cette réponse en retard, le temps de chercher, je n'avais pas vu votre message.

            Beau travail,

            Pascal
            If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

            Commentaire

            • #7
              Re : Convertir px en % - image mapping responsive - Fireworks

              Envoyé par pmleconte Voir le message
              Désolé pour cette réponse en retard, le temps de chercher, je n'avais pas vu votre message.

              Beau travail,

              Pascal
              Pas de soucis
              J'ai fait pareil, à ceci pret que :
              Code:
              $('area').on('click', function() {
		alert($(this).attr('alt') + ' clicked');
	});
              est assez ennuyeux et peu attrayant

              Encore merci pour tout, bonne soiree
              Un petit Remerciements fait toujours plaisir

              Commentaire

              Précédent template Suivant

              Annonce

              Réduire
              Aucune annonce pour le moment.

              Partenaire de l'association

              Réduire
              Hébergeur Web PlanetHoster
              Travaille ...
              X