Adjust the transparency level of the image's mapped area

I need help with changing the opacity of a specific area on an image map when clicked. The image has three areas, but I only want to target and change the opacity of the test2 area regardless of which area is clicked. Since my knowledge of jQuery syntax is limited, I would greatly appreciate any assistance on how to achieve this. Thank you.

<img src="testing.png" usemap"testing-map" />

<map name="testing-map">

    <area shape="rect" coords="426,274,456,300"  alt="test1" />
    <area shape="rect" coords="456,274,618,300"  alt="test2" />
    <area shape="rect" coords="618,274,678,300"  alt="test3" />

</map>

Jquery:

$('area').on('click', function() {
 --- no idea --- .css('opacity', '0.1');
});

Answer №1

$('map area').click(function() {
   $('area[alt="sample"]').css('opacity', '0.1');
});

or

$('map area').click(function() {
   $('area[alt="sample"]').attr('style', 'opacity:0.1');
});

Answer №2

 Give this a shot:

    $('section').on('click', function() {
      $("section[title=try1]").css('opacity', '0.6');
    });

When this is triggered, it will adjust the opacity of elements where the 'title' attribute matches "try1".

Answer №3

Consider utilizing

$('area[alt=test2]').css({'opacity':'0.1'});

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 is the best way to create titles with a background?

My goal is to have a title overlay an image with specific width and the text displayed in blocks. To better illustrate, here's an example: I prefer to achieve this effect using CSS; however, I am open to utilizing Javascript if needed. ...

Create a registration form that automatically redirects to the login page in case of authentication errors

I am currently working on an index page that features both a login and sign up functionality, each contained within separate divs being controlled by jQuery. One issue I have encountered is that when there are errors during the registration process, the p ...

Limit the option to check or uncheck all on the current page only

I am facing an issue with a select all checkbox that interacts with checkboxes in a paginated table. The problem arises when I check the select all box, as it selects all records instead of just those on the current page. For example, if there are 200 reco ...

Adding HTML content inside an iFrame at a specific cursor position in Internet Explorer

Does anyone know a method to insert HTML into an iFrame specifically for IE? I have been using execCommand insertHtml in Chrome and Firefox, but it doesn't seem to work in IE. I was able to paste HTML into a content editable div using pasteHTML, howe ...

Wordpress Debacle: Bootstrap Columns Clash

Currently, I am in the process of designing a unique theme. In my code, I have implemented a condition that generates an additional div with the class "row" after every three posts or columns are created. Everything seems to be working smoothly, except f ...

Issue with $.ajax({}) causing Express Session to fail saving

I'm facing an issue where I am trying to store data in an Express session, but it seems that Express is treating each AJAX request as a new session and not saving my data consistently. Here's the client-side code: $.ajax({ url: '/orders& ...

Creating individual components for <select> and <option> elements in ReactJS

I am uncertain about how references function when the select and option tags are used together. When I split them into separate React components, they stop working. How can I resolve this issue? Here is a basic example: <select> {() => ( ...

Is there a way to prevent HTML Tidy from inserting newlines before closing tags?

Have you ever noticed how HTML Tidy always seems to add an extra newline before the closing tag? It's so frustrating! For instance: <p>Some text</p> ends up looking like this: <p>Some text </p> Is there a way to make Tidy k ...

Oops! Looks like there was an error: weight is not defined when trying to calculate BMI with the HTMLButtonElement

I'm currently working on a project to create a BMI calculator following specific instructions. I've managed to follow all the guidelines except one regarding the letsCalculateBMI function. The instruction states: letsCalculateBMI should extrac ...

Is there a way to turn off alerts from Aspx files for HTML and CSS?

Dealing with annoying warnings in my aspx files has been a constant struggle. The "CSS Value is not defined" message pops up when I reference CSS files from different projects, causing unnecessary frustration. Even more frustrating are the warnings about i ...

Check out this stylish Twitter-inspired SVG text counter created with a combination of CSS and jQuery! See it in action here: https://jsfiddle.net/moss24

Looking to develop a text counter similar to Twitter that increases the width in green color up to 75%, then switches to yellow until 98%, and finally turns red if the input value is greater than or equal to 400. It should also add a "highlight" class when ...

Utilizing JavaScript for parallax horizontal scrolling (identifying optimal 50% of screen)

I have successfully implemented this code for vertical scrolling: $('.flapleftclass').css('top',(0+(scrolled*0.5))+'px'); This method works well because I am referencing to the top position. However, when it comes to horizon ...

How do I reference this span object using jQuery?

My HTML code includes the following: <span id="enterStreamName" style="display:none"> <input type="text" id='Stream' class="fullRowTextBox" value="" name="Stream" /> <button class="SaveStreamButton">Save</butto ...

Printing content using JavaScript on a point of sale (POS) printer with

I need to print a specific div on my POS printer named Optimuz. I have attempted using the following code: <div id="printAreaInvoice" style="visibility: hidden;font-size:8px;width:200px;"></div> < ...

Show the output of JQuery in the text input area

Can anyone help me figure out how to display the value of #response in an input field instead of a div? I've tried using the code below, but it didn't work: <div id="response"></div> I attempted to use an input field like this, ...

Updating a div periodically with Ruby on Rails: The ultimate guide to implementing Ajax or alternative techniques

In my show.html.erb file, I have a div (with id "mydiv") that needs to be updated every few seconds with data from the server. To accomplish this, I am using AJAX with setInterval to fetch the latest information from the backend. However, I am unsure of ho ...

Tips for aligning my icon in the middle when I collapse my sidebar

Seeking assistance on centering the hamburger icon on my sidebar. Currently, when I adjust the width of the sidebar, the icon is not centered at all. Does anyone have a solution for achieving this? I attempted using justify-content: center in the main clas ...

Is jQuery validation compatible with mobile phone numbers?

Is there a way to verify an Iranian mobile phone number using jQuery with the input:text? Iranian mobile phone numbers follow a specific numeral system, such as: 091- --- ---- 093[1-9] --- ---- 092[1-9] --- ---- 090[1-9] --- ---- Here are some example pr ...

Updating serialized $_POST array with new key/value pair using jQuery AJAX

Is there a way to insert additional values into a serialized $_POST array before sending an AJAX request using jQuery? Here's the situation: $('#ajax-preview').on('click', function(e) { e.preventDefault(); var formData = ...

Using jQuery to update a specific item in a list

My current project involves developing an Image Gallery app. It uses <img> tags within li elements. The code snippet is as follows: var $slideR_wrap = $(".slideRoller_wrapper"); var $slidesRoller = $slideR_wrap.find(".slidesRoller"); var $slideR ...