stowball / jQuery-rwdImageMaps

Responsive Image Maps jQuery Plugin

Home Page:http://mattstow.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Only 2 of 3 hotspots resizing when the image is scaled down...

mizcozma opened this issue · comments

Hi there!

I love the idea of this plug in. But I am having issues as mentioned in the title.
2 of my hotspots work fine when the whole thing is scaled down to fit a say phone..
they all work great full sized but one.. just one.. stops working when made small

here is the code I am using. The site is in the building stage and hidden, if access is needed please email me so we can chat via email and I can create a user code.

Any help would be amazing! I hope someone is still answering questions here :)

<map id="family-corner" name="family-corner"><area shape="rect" alt="Go Back" title="" coords="764,10,947,82" href="javascript:history.go(-1);" target="_self" /><area shape="rect" alt="Family Corner" title="" coords="7,0,419,55" href="http://dev.sikhfoundation.org/family-corner" target="_self" /><area shape="rect" alt="View" title="" coords="599,120,900,443" href="http://sikhfoundation.org/wp-content/uploads/corner/create/coloring/full/coloring_page_Guru_Ji_says_the_peacock.html" target="_blank" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src=" http://dev.sikhfoundation.org/wp-content/themes/hueman-child-master/js/scripts/jquery.rwdImageMaps.js"></script>
<script src=" http://dev.sikhfoundation.org/wp-content/themes/hueman-child-master/js/scripts/jquery.rwdImageMaps.min.js"></script>
</script>
<script>
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();

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

.....

This is the one not working when small
```<area shape="rect" alt="Family Corner" title="" coords="7,0,419,55" href="http://dev.sikhfoundation.org/family-corner" target="_self" /><area shape="rect" alt="View" title="" coords="599,120,900,443" href="http://sikhfoundation.org/wp-content/uploads/corner/create/coloring/full/coloring_page_Guru_Ji_says_the_peacock.html" target="_blank" />```   I even made it bigger but it didn't help

oh didn't know it would post the image not sure how to make it not do that sorry. 
I wonder if there is still away for the code to be seen
Ok I got just the code to show  and hopefully that will help! LOL
Thanks :)

Update, I have been trying by putting the code in header, footer, page.. seems I can't get the java to run. In firefox only 1 of the the hotspots stay in place when resized. 

Still hoping for help in this issue Thanks