Modal PopUp in Image map

Question

0.00/5 (No votes)

See more:

Hi,

I have 2 hot spots on image map .. on click(click event of image map) of hot spots i have to show popup... if i click on other area(except hot spots) of the image map popup should not show, how to handle it. how to avoid showing the popup on other places (except the hot spot). because the click event fires only when clicked on hot spots. I tried using

XML

<script type="text/javascript">
        function showModal() {

            var modal = $find("modalpopup");
            modal.hide(); }

By adding attribute to the image map control

Imagemap1.Attributes.Add("onclick", "showModal()");

when non hot spot area is clicked this java script gets executed even then the modal popup extender is displayed.Please do need help on this issue

Posted 3-Sep-12 18:53pm

thalir

Updated 5-Sep-12 19:37pm

v4

Add a Solution

3 solutions

Solution 1

hi,

I thing you want to click on some part of one image. If i click on X part of image then do something and if i click on Y part then it will do something.

you do that by setting the co ordinate of the image.

please see the below link. It will help you.

http://www.javascriptkit.com/howto/imagemap.shtml[^]

you can also user image map for that. see the below link.

http://www.developer.com/net/asp/article.php/3528986/Image-Maps-in-ASPNET-20.htm[^]
Image Map / Hot Spot _ Point Plotting[^]

Posted 3-Sep-12 19:29pm

VIPR@T

Comments

AmitGajjar 4-Sep-12 2:20am

nice links.5+

VIPR@T 4-Sep-12 2:25am

Thanks :)

Solution 2

I believe defining a click event for ImageMap will do what you seek. Click event defined for Imagemaps raise only when HotSpots objects are clicked.

Details here: MSDN: ImageMap.Click Event[^]
Go through the example and implement the steps in order to have click defined for hotspots only. Try!

Posted 3-Sep-12 19:47pm

Sandeep Mewara

Comments

AmitGajjar 4-Sep-12 2:19am

correct 5+

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)

thalir · Accepted Answer · 2012-09-05T23:17:00

Solution 3

Set Panel Visibility property to hidden

document.getElementById('pnlPopup').style.visibility = "hidden";

where "PnlPopUp" is Panel name which is used in modalpopupextender control

Posted 5-Sep-12 23:17pm

thalir