"Enhanced interactivity: Hover effects and selection states on an image map

Hello there, I need assistance with my code. Here it is:

<img id="body_image" usemap="#body_map" src="assets/images/body.jpg" alt="">

<map name="body_map">
   <area shape="poly" alt="d" href="#body_chart" name="ad" coords="153, 153, 145, 164, 150, 175, 163, 165, 163, 157" />
</map>

I would like to add hover and selected states for the map area. Additionally, I am looking to create more areas with the ability to select multiple areas at once.

Could you please assist me by providing the complete code for the hover and selected state?

javascriptjqueryhtmlcssimage

Answer №1

Check out the JQuery version below:

$(document).ready(function() {
    if($('#location-map')) {
        $('#location-map area').each(function() {
            var id = $(this).attr('id');
            $(this).mouseover(function() {
                $('#overlay'+id).show();

            });

            $(this).mouseout(function() {
                var id = $(this).attr('id');
                $('#overlay'+id).hide();
            });

        });
    }
});

I hope this code is helpful for your project! :)

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

What occurs when multiple HTML tags are assigned the same string as their ID attribute value?

While browsing a html page, I stumbled upon several tags that I thought had the same id. It turns out they were unique, but it got me thinking - what would happen if multiple tags actually shared the same id? I've always heard that the id attribute o ...

javascriptjqueryhtmlcross-browser

I'm having trouble figuring out why this React Router setup is not functioning properly. Can anyone provide any insights

As I delve into react routing practice, I've put together a geography-based web app. Starting off, I configured the router paths: import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { BrowserRo ...

javascriptreactjsreact-routerreact-router-dom

Troubleshooting Issue with jQuery replaceWith in Loop

Trying to make it so that when the update button is clicked, the text on the left side becomes an input box: Click the update button and the text on the left will be an input box However, instead of just one input box appearing, all the text on the left s ...

javascriptjqueryhtmlmysqlcss

Troubleshooting Cross-Origin Resource Sharing (CORS) problem in Jquery

When using AJAX post from jQuery to call two REST services on different domains for business logic, a CORS issue arises. By setting crossDomain: true in my AJAX call following Google references, it works fine without specifying headers. However, if I inc ...

javascriptjqueryhtmlajaxjsp

Issue with Struts 2 tag causing malfunction in validating the collection

When iterating through a list in a JSP file using Struts 2 tags, the code below is used: <%@ taglib prefix="s" uri="/struts-tags"%> <head> ... The issue arises with date validation. The following line of code does not work: <td><s:d ...

javascriptjquerystruts2

Unable to render gif on website with PHP and AJAX

index.html: <html> <head> <script type="text/javascript" src = "jquery-1.10.1.js"></script> <script type="text/javascript" language = "javascript"> console.log("mm"); function swapContent(cv) { ...

phpjqueryajax

Using PHP and Ajax to retrieve a distinct string prior to executing a time-consuming script

It's a question that comes up often. In short, I want to display progress to the user while a lengthy script is running. This is my approach: store "progress" in mysql so that Ajax can access it (via PHP). "progress()" is the lengthy script being te ...

javascriptphpjqueryajax

The content is not adapting properly for mobile devices (Bootstrap)

Currently, I am in the midst of a project and require assistance in ensuring an element on my webpage is responsive. Specifically, I need the text within a box to overlap the accompanying image when the browser window is resized. Should I add a class to th ...

htmlcsstwitter-bootstrapbootstrap-4

Embedding a picture logo within a CSS-designed content box

I am trying to create a unique layout for my website that reveals content using labelled radio buttons, without the use of scripts. Instead of using <a href='#'>, I want to achieve a specific layout like the one shown in this example. When ...

htmlcsstabs

Creating multiple synchronous loops within a Vue component using JavaScript

I'm dealing with a JavaScript loop that processes data from an Excel file. The loop loops through the results and retrieves a list of PMIDs. If the PMIDList has more than 200 items, it needs to be split into segments of 200 for processing due to restr ...

javascriptvue.js

What is Mozilla's reasoning for deeming Conditional catch-blocks as non-conventional?

I recently came across a document on Mozilla that described the try...catch conditional as "non-standard and is not on a standards track. Do not use it in production" However, I am curious to understand the reason behind this statement. I also want t ...

javascriptnode.jsvalidationadonis.js

Automatic Addition of Row Numbers Enabled

I'm currently exploring coding and experimenting with creating a scorekeeper for family games. I've managed to add rows dynamically and automatically sum up the entered information in the "total" row at the bottom. However, I'm facing an iss ...

javascriptjqueryhtmlcss

Aligning variable width numbers within a div container

Currently experimenting with CSS to create a calendar design that mimics the look of a traditional paper calendar. One issue I've encountered is the alignment of numbers within boxes, especially when dealing with double digits. When displaying a sing ...

htmlcss

What is the recommended approach for linking CSS files when utilizing ASP.NET URL routing?

Within my URL routing setup, I have a master page content template that references a stylesheet on the destination page: <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> <link href="css/actionmenu.css" rel="stylesheet" t ...

asp.netcssurl-routing

The button I have controls two spans with distinct identifiers

When I press the player 1 button, it changes the score for both players. I also attempted to target p2display with querySelector("#p2Display"), but it seems to be recognized as a nodeList rather than an element. var p1button = document.querySelector("# ...

javascripthtml

Adding a third-party script after closing the body tag on specific pages in NextJS can be achieved by using dynamic imports and

In my NextJS application, a third-party script is currently being loaded on all pages when it's only needed on specific pages. This has led to some issues that need to be addressed. The script is added after the closing body tag using a custom _docum ...

javascriptreactjsnext.js

How can you start a jQuery script following a triumphant Ajax callback?

Having some trouble getting jQuery to execute after a successful Ajax response. Even though I have it in the success callback, it doesn't seem to be working as expected. I came across a potential solution here, but I'm having difficulty understan ...

javascriptjqueryajaxresponse

What is the optimal unit to employ in CSS - percentages or pixels?

As someone who is not well-versed in CSS, I strive to create a design that will appear visually appealing across all browsers and screen resolutions. I have observed that certain websites construct their designs using percentages for properties like width, ...

cssresolution

CSS Table Style Chaos

When styling a table using CSS, I encountered this line within the code: .pricing tr td:last-child { text-align: right; } This particular line ensures that the text in the last column of the table aligns to the right. The class "pricing" is applied to th ...

htmlcsscss-tables

svg viewbox cannot be adjusted in size

Struggling with resizing an SVG to 20px by 20px. The original code size of the SVG is quite large at 0 0 35.41 35.61: <!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG</title> ...

htmlcsssvg