Using an onclick or javascript in area shape

In this post, it says that I can use an onclick event in an area shape. However, it seems to require a URL, and my onclick event is handling the URL (a popup window). So the second solution shows how to use the javascript in the URL:
http://www.irt.org/script/1609.htm

<area shape="circle" coords="150,50,35" href="default.htm"
   onClick="alert('circle');return false">

<area shape="circle" coords="150,50,35" href="javascript:alert('circle')"

Open in new window


But it didn't work. The first I clicked and nothing happened. So I setup the javascript with just a simple alert until I could get that to work and that errors.

Here is my code behind:
<area shape="rect" coords="528,178,777,341" href="javascript:alert('circle')" >

Open in new window


I tried it with a semicolon at the end, etc. still same error.
The error is:
JavaScript critical error at line 1, column 6 in (unknown source location)

SCRIPT1002: Syntax error

Open in new window


How can I use javascript or an onclick event without a URL in an area shape?

thanks!
LVL 2
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?
 
Rainer JeschorCommented:
Hi,
hm, the following works exactly as you want it, or?

https://jsfiddle.net/EE_RainerJ/je6ubx6p/

HTH
Rainer
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Okay after further investigation, I found that if I put a 1 in the alert: alert(1) instead of alert('color')  it works. So the apostrophe's are evidently choking another portion of my code.

choke
I am using an image map library which is taking my commands and recoding it into this:
               $('#map').append("<a id='newImg' style='top:" + coords[1] + "px;left:" + coords[0] + "px' onClick='" + $(this).attr('onClick') + "' ><img width='" + (coords[2] - coords[0]) + "' height='" + (coords[3] - coords[1]) + "' src='Images/" + images[idx] + "' alt='' /></a>");

Open in new window


You can see from the picture that it is trying to create the alert but can't handle the apostrophe.
When I build my string for my literal, this works:
onClick=""alert(1);return false""
This does not
onClick=""alert('circle');return false""

But if I swap my apostrophe with my quotes, it seems to work fine now:
onClick='alert(""circle"");return false'

I'll see if I can't get that to work with my real code. thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.