asp.net ImageMap - change image on mouse over

Question

1.00/5 (1 vote)

See more:

I'm trying to create an ImageMap that changes as users mouse over certain parts of the image. I have the following ImageMap where users are able to click on a color and go to a different page:

http://i.stack.imgur.com/hXJSC.png[^]

I created 4 additional images that are all the same size, and would like to swap out the image on mouseover. For example, when I mouseover the blue I want the image to look like this:

http://i.stack.imgur.com/gwb3q.png[^]

And when I mouse over the green part, I want it to look like this:

http://i.stack.imgur.com/EptjR.png[^]

What is the best way to accomplish what I'm trying to do? I planned on using asp.net for the implementation but have been unable to do so.

Here is the code for the ImageMap/hotspot:

ASP.NET

<asp:ImageMap ID="ImageMap1" runat="server" Height="300px" HotSpotMode="Navigate" ImageAlign="Middle" ImageUrl="~/images/hotspot-logo.png" Width="303px">
                            <asp:PolygonHotSpot AlternateText="orange" Coordinates="151,8,220,78,150,150,78,78" HotSpotMode="Navigate" NavigateUrl="~/orange.aspx" />
                            <asp:PolygonHotSpot AlternateText="red" Coordinates="220,78,150,150,222,222,292,150" HotSpotMode="Navigate" NavigateUrl="~/red.aspx" />
                            <asp:PolygonHotSpot AlternateText="green" Coordinates="78,78,150,150,78,222,8,150" HotSpotMode="Navigate" NavigateUrl="~/green.aspx" />
                            <asp:PolygonHotSpot AlternateText="blue" Coordinates="150,150,78,222,150,292,222,222" HotSpotMode="Navigate" NavigateUrl="~/blue.aspx" />
                        </asp:ImageMap>

Posted 26-Jun-15 12:39pm

Member 11795696

Updated 10-May-17 5:05am

Add a Solution

Comments

Member 11795696 26-Jun-15 18:47pm

It doesn't have to be asp.net if that's not possible. Does anyone have another suggestion I could use? All I need is for the image to change as the user mouses over each hotspot.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2015-06-26T13:00:00

The functionality you want has nothing to do with ImageMap.

You could use image map, but only for the hit test, which is actually the sole purpose of the image map. Unfortunately, your event is not click, but mouse over. Also, it's really bad to run it on server, because it will cause the postback, too slow for a click which is supposed to change image immediately. You really need to do it all on the client side using JavaScript.

The simple solution is: with JavaScript: handle the event mousemove. Depending on mouse coordinates, replace the current image with another image, via modification of the value of the src attribute. You will need a separate image for each combination you want to use.
Please see: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents[^].

It can be done easily if you use jQuery. You can use .attr("src") of the image jQuery wrapper and replace its value using .replace(). You can find a simple example here: http://stackoverflow.com/questions/11130008/dynamically-replace-image-source-with-jquery[^].

And this is how you handle the event using jQuery: https://api.jquery.com/mousemove[^].

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery,
http://jquery.com,
http://learn.jquery.com,
http://learn.jquery.com/using-jquery-core,
http://learn.jquery.com/about-jquery/how-jquery-works (start from here).

—SA

Shibiny · Answer 2 · 2015-06-26T19:59:00

Solution 3

please try java script or css.........................

Posted 26-Jun-15 19:59pm

Shibiny