So on the new portfolio website I am working on for myself I am using the following plugin. https://github.com/stowball/jQuery-rwdImageMaps Although it doesn't appear to be working properly on my site. I don't understand why either everything is setup how it should be and appears to be working. If someone could take a quick look and help me out it would be more than appreciated.
The URL for the image map that isn't working is here http://kmgp.us/skillcloud.php .
What should happen is simple.... when you click on the word in the word cloud it goes down to the #element. (Which is working perfectly), but since this website is responsive... when you re-size the page the image map messes up.
The plugin should be automatically re-sizing the image map but it isn't so I assumed I have either a serious or silly mistake in my code.
The specific code where I am using the jQuery plugin is here...
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
$('area').on('click', function() {
alert($(this).attr('alt') + ' clicked');
});
});
</script>
There was also some CSS code imported which if you go into firebug seems to be being applied which was...
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
Again humongous thanks in advance!
You're loading my rwdImageMaps plugin in the head and calling the plugin before jQuery has loaded. If you check the console, you see 2 errors: jQuery is undefined and $ is undefined. Move the scripts down to the bottom of the page, after jQuery, with the rest.
That should fix it :)