Why does one jsfiddle work and the other does not, even though they have the exact same code?

Question

I'm trying to create a map in which each of its subsections highlight on hover. The best method I was told after researching was to use imagemapster which apparently functions, hence the first functional link... but in the second with the exact same code it doesn't. Am I missing something? If anyone knows it would be helpful

This one works

And this one doesn't

I'm using imagemapster. What I want is this .... gif

var image = $('#vegetables');



image.mapster({
     fillColor: "0000"
 });

EDIT: the positioning of the image is bad. I apologize, it's just needed to scroll down a bit and to the right a bit.

Answer 1

Look at the menu immediately above the JS code.

One includes jQuery (an admittedly ancient version with security problems) and one doesn't.

The JS depends on jQuery so throws an error (open the developer tools, look at the console, read the error messages!) when it isn't available.