Having trouble with the Jquery click event not functioning on an interactive image map in Chrome browser

I currently have an interactive image-map embedded on my website. Here is the HTML code:

<div id="italy-map" class="affiancato verticalmenteAllineato">
    <div id="region-map">
        <img src="./Immagini/transparent.gif"  title="Click on a region to view clinics!" 
             alt="Click on a region to view clinics!" usemap="#ItalyMap" /> 
    </div> 
</div>

<map id="ItalyMap"> 
    <area shape="poly" data-id="1" alt="Valle d'Aosta" title="Valle de Aosta"   coords="47,56,48,76,14,86,1,65" /> 
    <area shape="poly" data-id="2" alt="Piemonte" title="Piemonte"   coords="66,34,73,46,74,67,79,84,70,94,85,106,95,122,78,133,58,128,49,153,32,154,7,136,11,119,-2,103,7,96,19,96,21,83,48,75,48,57,60,42" /> 
    <area shape="poly" data-id="3" alt="Liguria" title="Liguria"   coords="131,156,105,134,108,131,90,126,69,137,74,133,65,131,56,141,49,157,47,154,40,154,31,165,35,169,48,170,75,141,89,137,95,139" /> 
    <area shape="poly" data-id="4" alt="Lombardia" title="Lombardia"   coords="101,122,88,105,75,107,72,89,84,84,73,65,78,47,92,63,105,27,113,40,132,39,137,23,157,35,148,39,152,48,142,64,147,57,149,64,162,65,151,79,159,80,158,84,153,85,160,95,183,109,153,107,154,110,130,104,130,99,117,103,113,100,102,108,105,117" /> 
    <area shape="poly" data-id="5" alt="Trentino-Alto Adigio" title="Trentino-Alto Adige"  coords="150,64,166,66,162,73,176,70,176,63,190,51,192,59,196,47,203,50,203,43,197,37,197,29,210,27,210,19,212,26,224,20,213,12,213,-3,199,5,176,6,166,17,152,12,141,17,146,14,145,25,136,24,141,30,154,34,148,40,151,45,146,59" /> 
    <area shape="poly" data-id="6" alt="Veneto" title="Veneto"   coords="218,116,210,114,209,107,197,110,190,113,177,108,155,88,157,82,160,67,177,74,182,52,203,49,205,40,199,35,225,19,233,23,232,35,219,43,223,51,223,61,229,67,242,67,247,72,220,86,218,101,228,112" /> 
    <area shape="poly" data-id="7" alt="Friuli-Venezia Giulia" title="Friuli-Venezia Giulia"   coords="277,78,272,73,246,75,242,65,227,66,223,62,221,44,238,22,272,32,265,42,271,52,270,64,279,72" /> 
    <area shape="poly" data-id="8" alt="Emilia-Romagna" title="Emilia-Romagna"   coords="236,162,231,157,214,161,210,171,189,158,196,152,177,143,178,148,165,153,125,132,109,138,99,127,103,115,108,100,131,103,144,107,148,111,153,110,215,111,215,139" /> 
    <area shape="poly" data-id="9" alt="Toscana" title="Toscana"   coords="185,236,196,224,200,212,205,198,214,193,215,169,196,167,193,152,181,147,164,156,125,132,120,140,132,153,146,191,150,208,151,213,144,216,133,217,133,221,142,223,149,220,145,216,152,213,168,225,177,238" /> 
    <area shape="poly" data-id="10" alt="Umbria" title="Umbria"   coords="228,238,253,221,256,217,242,212,235,186,228,186,220,178,210,179,212,189,206,201,203,217,205,226,212,224,225,237" /> 
    <area shape="poly" data-id="11" alt="Lazio" title="Lazio"   coords="276,298,282,277,264,270,254,260,242,256,247,249,258,250,258,248,250,246,249,231,260,229,254,221,226,240,212,226,206,228,202,217,197,220,196,232,188,240,205,260,215,267,219,274,245,293" /> 
    <area shape="poly" data-id="12" alt="Marche" title="Marche"   coords="215,169,232,186,237,189,240,210,255,216,259,227,279,213,264,174,253,175,239,158,234,167,222,157,221,155,209,166" /> 
    <area shape="poly" data-id="13" alt="Abruzzo" title="Abruzzo"   coords="312,255,279,213,258,227,261,232,250,230,252,245,259,250,254,251,246,251,245,255,263,267,284,274,289,272,289,269,296,262,301,267,301,271,305,270" /> 
    <area shape="poly" data-id="14" alt="Molise" title="Molise"  coords="328,261,315,257,305,271,302,268,297,264,290,270,291,272,283,275,284,284,284,288,285,292,290,281,303,289,321,283,318,278,326,274" /> 
    <area shape="poly" data-id="15" alt="Campania" title="Campania"  coords="342,360,349,346,331,316,341,312,342,305,331,301,331,298,320,283,301,290,290,282,286,289,274,298,285,317,295,317,303,329,316,328,321,348" /> 
    <area shape="poly" data-id="16" alt="Puglia" title="Puglia"   coords="329,261,360,255,368,266,367,272,359,280,364,289,411,310,420,319,440,325,445,331,452,338,454,346,454,359,450,370,438,363,427,342,413,344,399,331,394,341,385,334,386,322,373,321,365,311,363,309,354,306,360,308,362,306,353,297,354,299,341,305,330,296,320,278,327,277" /> 
    <area shape="poly" data-id="17" alt="Basilicata" title="Basilicata"   coords="351,361,343,356,351,346,335,317,342,313,343,306,359,304,361,310,358,312,375,321,387,324,387,336,395,339,386,351,376,350,372,363,361,363,359,359" /> 
    <area shape="poly" data-id="18" alt="Calabria" title="Calabria"  href="#a" coords="363,466,345,462,345,447,353,438,356,422,367,415,361,405,363,391,352,364,355,357,372,364,378,349,383,351,378,371,404,387,404,410,387,416,381,428,385,433" /> 
    <area shape="poly" data-id="19" alt="Sardegna" title="Sardegna"   coords="92,418,96,400,110,406,121,377,117,346,124,329,109,292,91,302,75,313,62,310,58,323,68,339,66,362,72,364,61,402,78,416" /> 
    <area shape="poly" data-id="20" alt="Sicilia" title="Sicilia"   coords="322,529,299,521,286,507,271,505,237,482,228,481,219,472,226,451,238,453,249,447,269,456,296,459,309,449,323,453,340,445,344,450,329,474,325,489,334,508,332,513" /> 
</map>

The provided HTML interacts with the following CSS styles:

#italy-map {
   width: 458px;
   height: 531px;
   background:url(../Immagini/cartinaItalia.gif) no-repeat;
   z-index:100;
   margin: 0px 0px 35px 0%;
}

#region-map{
   width: 100%;
   height: 100%;
   z-index:105;
   top:0;
   left:0;
}

#region-map img{
   width: 100%;
   height: 100%;
}
/* Additional CSS rules... */

Additionally, the functionality of this code snippet is managed by the JavaScript below:

$(function () {
     var $ = jQuery;
     var map = $("#italy-map");
     var region_map = $("#region-map");

     $("area[data-id]").mouseover(function () {
        var r = $(this);
        var id = r.attr("data-id");
        region_map.removeClass();
        region_map.addClass("sprite_region sprite_region_" + id);
     });

     // More JavaScript functions...
});

Although this code works perfectly on Internet Explorer and Firefox, it seems to encounter issues specifically in Chrome. The JavaScript events are not being triggered on Chrome, despite trying various z-index values for the HTML elements. What could be causing this issue?

javascriptjqueryhtmlcssimagemap

Answer №1

To resolve the issue, consider modifying the id attribute to name within the map tag. Google Chrome appears to have a problem when the map's name is included in an id attribute. Update your map opening tag to look like this:

<map name="ItalyMap">

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

Ways to access the req.user object within services

After implementing an authentication middleware in NestJs as shown below: @Injectable() export class AuthenticationMiddleware implements NestMiddleware { constructor() {} async use(req: any, res: any, next: () => void) { const a ...

javascriptnode.jstypescriptrequestnestjs

Resuming AJAX requests after being aborted

Hey everyone, I'm curious to know if it's possible to resume interrupted ajax requests. I have an array of ajax calls stored as defferreds like this: var defferreds = []; defferreds.push( $soap.ajax({ type: "POST", dataType: ...

javascriptjqueryajax

What could be causing the inability of Firefox4 to render the background color of the li element?

Is there a way to apply a background color to a forced inline element? I am having issues with displaying the background color in Firefox4, while it works fine in IE7. Can someone help me understand why this is happening and how to fix it? You can view th ...

htmlcss

Ways to simulate a constant that acts as a dependency for the service being examined?

I'm currently experimenting with a file named connect-key.js. It relies on a dependency called keyvault-emulator. Content of File #1: // connect-key.js file const { save, retrieve, init } = require('./keyvault-emulator') .... .... .... // ...

javascriptjestjsmockingjest-fetch-mock

Looking for a regex solution in C# to eliminate and substitute specific HTML tags based on two conditions - it is needed

1) CHANGE only a few HTML tags with their corresponding HTML tag equivalents. Example: Replace h1 tag with h4 tags and replace div tag with p tag. Input: <div><h1>First</h1><h1 align='center'>Second</h1></div& ...

c#htmlasp.netregex

Unable to append item to JavaScript Map

Currently, I am attempting to insert an item into a Map (similar to a dictionary) using JavaScript within a React Native environment. import React, { Component } from 'react'; import { AppRegistry, View, Button, } from 'react-native& ...

javascriptreactjsreact-nativedictionary

Is a missing dependency causing an issue with the React Hook useEffect?

I've encountered an issue with the following code snippet, which seems to only depend on [page]. Despite this, I am receiving the error message: React Hook useEffect has a missing dependency I've come across similar discussions suggesting to com ...

javascriptreactjs

Direct back to the current page post deleting entry from mongodb

After removing data from MongoDB, how can I redirect to the same view (handlebar)? I tried using res.render, but it shows that the website cannot be reached. Thank you for your assistance. Controller Logic var express = require('express'); va ...

javascriptnode.jsmongodbmongoosehandlebars.js

What is the reason for using grid-lines instead of row and column numbers to position an item on the CSS grid?

During a recent tech presentation I delivered at my workplace on the new CSS grid spec, my manager posed an intriguing question that left me stumped. He wanted to know why elements positioned within a grid are identified based on the grid lines they fall b ...

csscss-grid

Retrieving information from CRM online utilizing the Web API

Recently, I developed a webpage to serve as a survey for end users to provide feedback on the helpdesk technician's performance in resolving tickets. The webpage was constructed using HTML, CSS, JS, and PHP. Currently, the page requires access to two ...

javascripthtmldynamics-crm

Is it possible to modify a dependency import based on the specific request?

How can I switch between test mode and live mode using Stripe's SDK based on a query parameter in my internal form service for collecting payments? For example, consider this route: router.post("/:formId", function(req, res, next) { let isTest ...

javascriptnode.jsexpress

Navigate to a new webpage using a string of characters as a legitimate web address

When a user performs a search, I pass the search term as a string to direct them to a new page. How can I create a valid URL (e.g., remove spaces from the string)? It's crucial that the next page can recognize where any spaces were in the search word ...

javascriptjquery

Tips for keeping a div centered even when the window is resized to smaller than the background width

I need help with centering a background image within a content div that is inside a wrapper container. When the browser window is resized to less than 500px, the background image starts to cut off from the right side. How can I ensure the background image ...

htmlcss

Are you looking to work with an ASMX web service and navigate JSON utilizing JavaScript or

Currently, I am using asmx to fetch data from a database. public class TestPage1 { public int UserID { get; set; } public string UserName { get; set; } public string Password { get; set; } public string FirstName { get; set; } public ...

asp.netjqueryjsonasmx

What's the rationale behind receiving the second before the first?

I've been digging into ES6 promises, and I thought I had a handle on it for a moment. However, it seems like I may have hit a roadblock. What I'm aiming to do is handle a series of file operations where each operation depends on the completion o ...

javascriptnode.jses6-promise

Check to see if it is possible to click an HTML div

Currently, I am engaged in Selenium and Robot Framework automated testing and in search of a method to automatically locate div tags that are capable of being clicked. The keyword Click Element works well when provided with a specific CSS selector, but ho ...

javascriptdomseleniumlistenerrobotframework

Update the content according to the size of the screen

I'm currently working on a project where I need to redirect pages based on screen sizes. I have separate index files for the mobile and web versions of the website. In the web version's index file, I've added the following script: <scri ...

javascripthtmlmedia-querieswindow.location

List of duplicated BLE devices detected in network scanning

Greetings! I am currently working on an Ionic project named BLE Scanner. After facing some challenges, I finally managed to connect to the devices. Below is the code snippet that I discovered online: home.ts (please ignore the DetailPage) import { Compon ...

javascriptangularionic-frameworkionic2ionic-native

Tables inserted via ckeditor do not preserve the style attribute

After incorporating ckeditor into my web page along with the table plugin, I noticed that sometimes the width of tables created in the editor window extends beyond the boundaries of the webpage when displayed. To address this issue, I made some adjustments ...

javascriptcsshtml-tableckeditor

Is there a way to attach a hidden input to the file input once the jquery simpleUpload function is successful?

Attempting to add a hidden form field after the file input used for uploading a file through the simpleUpload call. Here is the HTML (loaded dynamically): <div class="col-md-6"> <div class="form-group"> ...

javascriptjqueryajax