Hot Spots and Responsive Design

  • Unknown's avatar
    ifdc1974 · Member ·

    All my research and tests lead to the fact that hot spots do not work well in responsive design. However I would at like to use it if possible, at least on the desktop version. Does anybody know how to accomplish one of the two above. Here is my map that I am wanting to do this with. I currently have it mapped.

    http://ifdcorg.wordpress.com/2scale/

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    How did you create your image map?
    I have successfully used this link online: http://www.image-maps.com/index.php?aff=mapped_users_7201001170800103
    expound theme:
    http://1tess.wordpress.com/2010/01/17/meal-ready-to-eat-mre/6/

    You can also use PhotoShop to make image maps.

  • Unknown's avatar
    ifdc1974 · Member ·

    I created it in Dreamweaver and then copied by html over.

  • Unknown's avatar
    ifdc1974 · Member ·

    I will try what you recommended and get back to you to see how it works. Thanks!

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    Yes, good. Your image map code looks okay, but I’ve only used image mapping a few times: not an expert! May could be another volunteer has more insight than I do. 

    <div id="columnfive"><img src="https://ifdcorg.files.wordpress.com/2014/09/2scale_countries_map.png?w=536&h=542" alt="" usemap="#Map" width="536" height="542" /></p>
<map name="Map">
<area coords="369,424,372,402,355,387,360,372,382,370,398,354,430,349,436,365,429,404,403,431,407,458,457,459,464,485,387,491,366,474,368,422" shape="poly" href="http://ifdcorg.wordpress.com/mozambique/" />
<area coords="386,295,416,320,448,337,474,334,474,306,446,293,435,272,434,256,422,259,408,257,392,253,387,257,393,266,386,280,387,297" shape="poly" href="http://ifdcorg.wordpress.com/kenya/" />
<area coords="381,230,393,238,397,250,407,256,434,257,459,256,527,253,524,224,456,221,440,203,419,182,396,194,380,230" shape="poly" href="http://ifdcorg.wordpress.com/ethiopia/" />
<area coords="315,223,317,209,317,176,336,173,378,173,392,185,389,204,379,226,384,236,394,247,388,257,367,262,358,252,345,253,314,222" shape="poly" href="http://ifdcorg.wordpress.com/south-sudan/" />
<area coords="185,241,185,220,190,211,187,204,198,195,208,199,225,199,253,191,263,206,253,230,274,240,272,262,214,271,186,242" shape="poly" href="http://ifdcorg.wordpress.com/nigeria/" />
<area coords="356,286" shape="poly" href="#" />
<area coords="373,293" shape="poly" href="#" />
<area coords="375,284,386,279,391,270,386,259,363,261,340,258,285,263,289,292,372,285,377,283" shape="poly" href="http://ifdcorg.wordpress.com/uganda/" />
<area coords="164,185,186,182,191,176,187,146,180,121,217,112,232,119,266,131,273,152,267,188,230,197,204,194,186,204,164,188" shape="poly" href="http://ifdcorg.wordpress.com/niger/" />
<area coords="89,162" shape="poly" href="#" />
<area coords="82,180,93,143,113,143,118,112,143,112,172,138,187,153,189,174,170,182,138,197,108,212,88,203,82,183,82,178" shape="poly" href="http://ifdcorg.wordpress.com/mali/" />
<area coords="106,210,93,219,49,219,54,243,126,246,143,222,145,212,161,211,168,211,178,204,170,195,164,188,140,199,136,207,104,213" shape="poly" href="http://ifdcorg.wordpress.com/burkina-faso/" />
<area coords="166,296,196,292,195,252,182,241,182,221,186,210,181,204,177,211,170,213,176,241,165,255,166,297" shape="poly" href="http://ifdcorg.wordpress.com/benin/" />
<area coords="119,287,144,280,172,244,166,213,147,211,145,228,126,248,113,266,118,286" shape="poly" href="http://ifdcorg.wordpress.com/ghana/" /> </map>
</div>
  • The topic ‘Hot Spots and Responsive Design’ is closed to new replies.