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.

Both jsfiddle are using jQuery but only the second one is importing it — Axnyff, May 10 '20 at 20:05
@Axnyff I've just imported it, it's still not working though — KSaunders123, May 10 '20 at 20:15
Looks like you imported the jQuery version of imageMapster. You still need the actual jQuery library. See https://code.jquery.com/ — agrm, May 10 '20 at 20:37

score 1 · Answer 1 · answered May 10 '20 at 20:05

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.

answered May 10 '20 at 20:05

Quentin

914,110
126
1,211
1,335

Thanks for the prompt reply. I've just imported the jquery (links are updated) however it's still not working – KSaunders123 May 10 '20 at 20:15
I have Included Jquery 1000 times. – KSaunders123 May 25 '20 at 07:39
Also, the imagemapster is somehow not importing either even though it says it is – KSaunders123 May 25 '20 at 07:49

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

1 Answers1