Link to home
Start Free TrialLog in
Avatar of janeb
janeb

asked on

Usemap with javascript

Javascript version : 1.1
Target Browser : MSIE 4 and above

I have a client-side map (listed below) on my HTML page.
When I click on the second hotspot, a new window will be opened as intended, BUT the main page will go to a new page with the URL as the javascript and a "[object]" word on the new page. How do I prevent the main page from going to the second page? I want it to remain as it is.

<MAP NAME="bar">
      <AREA SHAPE="RECT" COORDS="4,5,232,35" HREF="file.exe">
      <AREA SHAPE="RECT" COORDS="161,43,411,66" HREF="javascript:window.open ('viewpoint.htm', 'vpwindow', config='WIDTH=260, HEIGHT=350, scrollbars=no, resizable=no,toolbar=no, menubar=no, location=no, directories=no, status=no')">
</MAP>
<IMG SRC="download.gif" USEMAP="#bar" border=0>

Thks and happy holidays!

Avatar of janeb
janeb

ASKER

Edited text of question
Avatar of janeb

ASKER

Edited text of question
ASKER CERTIFIED SOLUTION
Avatar of Quixote
Quixote

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You know, as soon as I submitted that, I realized I forgot to make a change I meant to do.  Here's the revised bit:

<AREA COORDS="161,43,411,66"
     HREF="viewpoint.htm"
     TARGET="vpwindow"
     onClick="window.open ('', 'vpwindow', 'WIDTH=260, HEIGHT=350');return true;">


Sorry.  Hope that does it.

-Quixote
I have had this problem myself in the past. Is it a browser bug?
Avatar of janeb

ASKER

Thanks Quixote, it works!
One question though, why would we need the "return true" ? Coz I have tried both your answers, and both work!

Regards,
Janeb.

The difference between the answers is like this:

1) the first will work only if javascript is active and the pic with the usemap is near the top of the page (because the url is being passed via javascript only, and the default url of "#" in some browsers will scroll to the null anchor which is the top of the page)

2) the second version uses a default url of the destination for the opened window, and a target of that window -- if javascript fails to open a window of that name (because their javascript is turned off, or they have a well-known IE4 bug preventing javascript window.open, caused by installing the final version over the beta version), then the html href and target will still open a window wil that name -- you just don't have control over the size and features.  This is because the javascript does what it does best (openeing a controlled window), and the html does the rest (sends the url to that window).

I understand that in some cases a designer will not want any window to open unless they have javascript control over it -- if that is the case, go with my first answer.


*****


It's not really a bug so much as simply the way JavaScript works: it thinks you are telling it to do this.

The reason this is happening in the first place is that the window.open command returns a value to reference the window created.  Normally, a url does a handful of things when clicked: it triggers and waits for the Click event to return a value, then sends the page to that value.  If you substitute an onClick handler for the Click event, then you need to return true for the default url to take place.  In situations like this, your Click event is executing javascript code, and a window object is being returned.  If a url was in place for the window to go to, then it would go there.  But you've sent the url to a new window and so the current window displays the returned value: "[Object]"


Cheers,
-Quixote
Avatar of janeb

ASKER

Hi Quixote, thks for the enlightenment!
Today I had the chance to try the page on a IE 3.02 browser, and it failed to work like in a IE4 !! :( When I click on the hotspot, it does not open a new window, and there are some funny characters appending to the current URL. However if I tried my original version on IE 3.02, it works. Is there anyway that I can create a version that works on BOTH ??

Thks for helping, let me how I can give you more points!!
Avatar of janeb

ASKER

Sorry pls ignore the above comment!
Here's what really happens when I used it on IE3.02. The new window is opened alright, and the main window remains as it is, however the new window is opened at its full size. Using the WIDTH and HEIGHT doesn't seem to help. Any idea how I can overcome this??
In the original code, you had:

('viewpoint.htm','vpwindow', config='WIDTH=260, HEIGHT=350,...


Make sure you have removed the "config=" bit, since that may be causing an error.  Also, although MSIE uses VBScript (which is not case-sensitive) as well as JavaScript (or, as Microsoft sez, "JScript"), it is possible that IE is case-sensitive in regard to the window parameters.  Try putting them all in lower-case.

Another problem that may be rising up is that IE3 has only a partial implementation of the "area" tag as a link, and so may be having trouble with implementing the onClick event handler.  Remember, the default HTML-only-without-javascript action is to open a new named window, unsized or modified by javascript.  It sounds like you are getting the default action.

Cheers.
-Quixote
So, by introducing the return true you prevent it from returning [Object] to the current window?

I have had this behaviour in the past when using a javascript URL but not using onclick. It also seems only to have happened on specific browsers or installations.
Naw -- the "return true" in the onClick handler simply tells the browser it's okay to perform the link's default action.

If you want to use a "javascript:window.open()" type of url, then you would want to use a "return false" so the default action (displaying the returned value "[Object]") doesn't happen.

Of course, I avoid the use of the "javascript:" type of url in general just cuz it's weird.  Sorry for getting technical there -- but I believe javascript should stay where javascript belongs: in the event handlers, not the href.  Everything else is weird.

Cheers.
-Quixote