• I’m trying to use an image map but I can’t make it responsive. I’m also using the plugin “Responsive Image Maps”. It works fine on a desktop but the map part is not scaling properly. I’m using the Genesis framework with their Altitude Pro theme. Can you help me? Thank you! Ben

    Here is my code:
    Conway Phase 1.1 | C.J. Brown REALTORS

    <map name=”m_Map_1″>
    <area alt=”A-28″ coords=”200,30,165,121,190,133,224,39″ shape=”poly” href=”/lot-a-28-conway/”>
    <area alt=”A-29″ coords=”224,39,191,132,213,142,247,48″ shape=”poly” href=”/lot-a-29-conway/”>
    <area alt=”A-30″ coords=”248,45,214,141,236,149,272,53″ shape=”poly” href=”/lot-a-30-conway/”>
    <area alt=”A-31″ coords=”271,57,237,148,261,158,295,65″ shape=”poly” href=”/lot-a-31-conway/”>
    <area alt=”A-32″ coords=”295,65,262,158,284,169,318,71″ shape=”poly” href=”/lot-a-32-conway/”>
    <area alt=”A-33″ coords=”319,71,285,167,307,174,343,79″ shape=”poly” href=”/lot-a-33-conway/”>
    <area alt=”A-34″ coords=”343,79,308,173,356,190,378,88″ shape=”poly” href=”/lot-a-34-conway/”>
    <area alt=”A-41″ coords=”620,113,632,221,668,220,660,111″ shape=”poly” href=”/lot-a-41-conway/”>
    <area alt=”A-42″ coords=”661,111,668,219,719,216,707,139,703,123,696,113,686,110″ shape=”poly” href=”/lot-a-42-conway/”>
    <area alt=”A-43″ coords=”688,229,696,351,743,350,751,346,759,333,763,323,758,311,722,227″ shape=”poly” href=”/lot-a-43-conway/”>
    <area alt=”A-44″ coords=”655,232,658,352,695,351,688,230″ shape=”poly” href=”/lot-a-44-conway/”>

    <area alt=”A-53″ coords=”311,189,315,357,348,356,348,200″ shape=”poly” href=”/lot-a-53-conway/”>
    <area alt=”A-54″ coords=”296,207,278,232,279,358,314,356,311,190″ shape=”poly” href=”/lot-a-54-conway/”>

    <area alt=”A-58″ coords=”140,476,41,478,28,472,22,462,19,440,140,436″ shape=”poly” href=”/lot-a-58-conway/”>

    <area alt=”A-60″ coords=”19,368,140,369,138,401,20,404″ shape=”poly” href=”/lot-a-60-conway/”>
    <area alt=”A-61″ coords=”18,332,138,330,138,367,20,368″ shape=”poly” href=”/lot-a-61-conway/”>

    </map>

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script&gt;

    <script src=”https://liveconway.com/wp-content/js/jquery.rwdImageMaps.min.js”></script&gt;

    <script>
    $(document).ready(function(e) {
    $(‘img[usemap]’).rwdImageMaps();

    $(‘area’).on(‘click’, function() {
    alert($(this).attr(‘alt’) + ‘ clicked’);
    });
    });
    </script>

  • The topic ‘Responsive Image Map’ is closed to new replies.