What could be the reason behind the discrepancy in functionality between two identical jsfiddles?

I am currently in the process of trying to create a map where each subsection will highlight when hovered over. After conducting some research, I came across imagemapster as the recommended method to achieve this functionality. Surprisingly, the first link works perfectly fine, yet the second link with identical code doesn't seem to work at all. Am I overlooking something? Any insight or guidance on this issue would be greatly appreciated.

Click here to see the working example

This link does not show the desired effect

Currently utilizing imagemapster for this project. What I am aiming for is showcased in this .... animated gif

var image = $('#vegetables');

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

EDIT: I acknowledge that the positioning of the image may be off. If so, please scroll down and slightly to the right for optimal viewing.

htmljquerycssimagemapimagemapster

Answer №1

Take a glance at the menu located right above the JS code.

One of them has jQuery included (albeit an outdated version with security issues) while the other doesn't.

The JS script relies on jQuery, therefore it will generate an error (access the developer tools, check the console, examine the error messages!) if jQuery is missing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I have observed that the form on an ASP.NET MVC Partial View can only be submitted after pressing the Enter key twice on the

**** Update - This issue seems to be specific to MS Edge. It functions properly with just one Enter key press on Chrome and Firefox.** I encountered a strange problem where a form only gets submitted after pressing Enter key twice in a text box. The form ...

javascriptjqueryasp.net-mvcmicrosoft-edgeajax.beginform

Customize the Position of Icons in Material UI

I am looking for guidance on how to position my components within an image using Material UI. Specifically, I want to move my heart component to the top right corner of the image and place the ratings at the bottom. import image from "../../Assets/pic ...

cssreactjsmaterial-ui

How to select the final td element in every row using JQuery or JavaScript, excluding those with a specific class

I am looking for a solution with my HTML table structure: <table> <tbody> <tr> <td>1</td> <td>2</td> <td class="treegrid-hide-column">3</td> < ...

javascriptjqueryhtmlcss

A small computation

How can I modify this code to calculate the total price #ttc by multiplying #totalcout with #marge Currently, I am able to add amounts when checkboxes are clicked, but I am struggling with integrating the multiplication for calculating the Total Price (TT ...

javascriptjquery

Tips for managing multiple conditional statements in PHP

List item Seeking opinions on the most efficient method to accomplish a task. There are two inputs - email and phone, with JQuery validation applied successfully. The requirement is that both inputs cannot be empty, but it's acceptable if only one is ...

phpjqueryvalidation

Troubleshooting Chrome's autoplay video problem with Fancybox

I've been encountering an issue with Fancybox acting as a lightbox. My videos, which are set up in external HTML documents and loaded into Fancybox when the link is clicked from the main document, do not autoplay in Chrome but seem to be working fine ...

jqueryfancyboxhtml5-video

How can I prevent an HTML element from losing focus?

Currently, I am developing an online editor that requires accurate character inputs. To achieve this, I have implemented the jQuery.onKeyPress event on a textarea element. This approach was chosen because obtaining character inputs from the body directly p ...

javascriptjqueryhtmltextarea

obtain a link that is clickable from an array of options

$('button').on('click', function(){ let selection = document.getSelection().toString().trim(); document.execCommand('createLink', true, selection); }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery ...

javascriptjqueryexeccommand

Crack open a JSON object

I am struggling to parse a JSON object. It seems like the code is not working, can you help me? var mock_data = { "available": [{ "UserID": 7, "UserName": "Manoj", "Language": "Java", "Score": 9, "TimeLimit": 4.0 }, { "UserID ...

javascriptjquery

Using Jquery to retrieve the window size and dynamically apply it to a div's CSS, adjusting it accordingly when the

Hey there! I'm trying to create a full-screen div, but unfortunately CSS doesn't seem to do the trick in this case. JavaScript/jQuery is my only option. My plan is to dynamically set the size of the div based on the browser window's dimensi ...

javascriptjquery

Increase the border thickness around my title and add a border after an image

I'm encountering difficulties when trying to replicate the style showcased in this image using CSS. My specific challenge lies in creating a yellow horizontal line above the title "nossos numeros" and blue vertical lines between "Cursos", "Alunos", an ...

csstwitter-bootstrap-4

Please tap to dial: Access to navigation is restricted

Trying to add a click-to-call link with the following code: <a href="tel:+4912345678912">Tel: +4912345678912</a> Despite Google developers saying it should work, major mobile browsers are blocking the navigation when clicking on the link. It ...

javascripthtmlbrowsertel

Expert tips for adding spacing between images in carousel sliders and eliminating glitches during slides

After creating a carousel following the guidance of this source and initially sharing it on this platform, I encountered an issue with the padding on the first image. As a solution, I removed the padding from the first image, but this caused the image to b ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Creating the x and y coordinates for drawImage in HTML5

Understanding the x and y axis has posed a challenge for me: //retrieve last known x and y coordinates ...code var p = $("#draggable"); var offset = p.offset(); var x = offset.left; var y = offset.top; //establish new font siz ...

javascriptjqueryhtmlhtml5-canvas

Creating a multi-step progress bar in Yii2 that showcases completed steps using jQuery

Is there a way to automatically transition from one state to another once the order status changes in Yii2? var i = 1; $('.progress .circle').removeClass().addClass('circle'); $('.progress .bar').removeClass().addClass(&a ...

javascriptjqueryhtmlcssyii2

Ways to enhance the data for my YouTube video uploads version 3

Currently facing an issue where Google has restricted my daily queries to 10,000. I am in search of a solution to adjust my chunksize either up or down. Uncertain about the exact amount to increase or decrease to limit the number of queries per upload, her ...

javascriptjquerygoogle-apiyoutube-data-api

The response object from jQuery AJAX is showing undefined keys when logging on the console

Selected response by Rohan Kumar: Modified $.post() to $.post("monitor/loadEVents", function(data){ if(data && data.response){ console.log('Wow, it works.'); } else { console.log(data); } ...

phpjqueryajaxzend-framework2

Trigger the activation of an input field upon clicking an image labeled "edit"

I am currently developing a website where administrators have access to a dashboard page that displays a list of users. I am looking to implement a feature that allows admins to change the roles of other users directly from the same table row. Below is th ...

javascriptphphtmlaide

implementing select2 and binding an event to it

I have a simple select2 setup where I am passing a common class in the options and trying to trigger a jQuery event on every change or click of an item in the dropdown. Here is my code snippet: <select name="transferfrom" id="transferfrom" data-placeho ...

javascriptjquery

Customize Bootstrap Navbar to Enable Horizontal Scrolling Specifically for Dropdown Buttons

Specific requirements: - Only buttons should be horizontally scrollable - Dropdown of buttons should appear just below the button without shifting the paragraph below Things I have attempted: - Tried using overflow:hidden/auto, overflow-x:auto, and pos ...

htmlcssdropdownbootstrap-5