Modify the color of a hotspot area when the mouse is hovered over it

Question

Modify the color of a hotspot area when the mouse is hovered over it

I have a task of dynamically generating HotSpots on an Image Map control. Below is the code snippet that accomplishes this:

// Creating a RectangleHotSpot programmatically.
RectangleHotSpot Rectangle1 = new RectangleHotSpot();
Rectangle1.Top = 50;
Rectangle1.Left = 10;
Rectangle1.Bottom = 200;
Rectangle1.Right = 200;
Rectangle1.NavigateUrl = "http://stackoverflow.com";

ImageMap1.HotSpots.Add(Rectangle1);

The above code is executed during PageLoad. Now, I am looking to change the color of the hotspot when a user hovers their mouse over it. Ideally, the color should become somewhat transparent. How can I achieve this effect?

jquery asp.net css imagemap

Answer 1

Answer №1

Although I am not familiar with asp.net, I believe you can achieve the desired effect using CSS on the HTML output generated by your .NET code.

For example, if your output looks like this:

<div id="hotspot"></div>

You can style it with CSS like this:

#hotspot{
background:red;
width:20px;
Height:20px;
}
#hotspot:hover{
background:blue;
}

The same effect can also be achieved using background images in CSS:

Here's an example of how to do it:

#hotspot{
background:url('your img url')no-repeat;
width:20px;
Height:20px;
}
#hotspot:hover{
background:url('your hover img url')no-repeat;
}

Answer 2

Although I am not familiar with asp.net, I believe you can achieve the desired effect using CSS on the HTML output generated by your .NET code.

For example, if your output looks like this:

<div id="hotspot"></div>

You can style it with CSS like this:

#hotspot{
background:red;
width:20px;
Height:20px;
}
#hotspot:hover{
background:blue;
}

The same effect can also be achieved using background images in CSS:

Here's an example of how to do it:

#hotspot{
background:url('your img url')no-repeat;
width:20px;
Height:20px;
}
#hotspot:hover{
background:url('your hover img url')no-repeat;
}

Answer 3

Answer №2

If you're looking for a great plugin, I highly suggest checking out this one.

It delivers exactly what you need and the author is extremely helpful if you run into any issues.

Answer 4

If you're looking for a great plugin, I highly suggest checking out this one.

It delivers exactly what you need and the author is extremely helpful if you run into any issues.

Modify the color of a hotspot area when the mouse is hovered over it

Answer №1

Answer №2

Similar questions

How is it possible to retrieve the flex-direction property value of a div using JavaScript?

Issue with Firefox position: absolute not producing the desired outcome

Table that is sized to fit perfectly within the entire width of the viewport

Using jQuery to choose an option in a selection box based on the option's HTML content

Detect the entry during gridview inline editing and perform the update

JavaFX: Achieving uniform size for multiple circles

JavaScript causing Google custom search to not refresh results when updating search query

Need help with transferring regex from a SharePoint list to a JavaScript variable?

Encountering a Memory Error When Saving High Resolution Images at 300dpi

How can you alter each character when you hover over them?

jQuery: Maintain hover state regardless of browser's suggestions for input elements

What is the best way to retrieve TextArea content in IE without encountering any errors?

How to insert a div using jQuery into a sibling or children of a parent element

Pass a variable to PHP using AJAX

Generating dynamic JSON arrays to create multiple data tables

jQuery unable to find designated elements in uploaded templates

Every time I refresh the page, the button_click events are triggered as well

Is there a way to invoke a Python function from a Jquery script within a Django template?

Generate a createjs animation that tweens the position according to the user's current

What is the level of effectiveness demonstrated by WebMatrix?