asked on

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!

ASKER CERTIFIED SOLUTION

Rainer Jeschor

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Starr Duskk

ASKER

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.

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!