Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Usemap with javascript

Posted on 1998-12-19
12
Medium Priority
?
918 Views
Last Modified: 2012-06-27
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!

0
Comment
Question by:janeb
  • 5
  • 5
  • 2
12 Comments
 

Author Comment

by:janeb
ID: 1275844
Edited text of question
0
 

Author Comment

by:janeb
ID: 1275845
Edited text of question
0
 
LVL 2

Accepted Solution

by:
Quixote earned 200 total points
ID: 1275846
Hey, Janeb-


This ought to do it for you:


<MAP NAME="bar">
    <AREA SHAPE="RECT" COORDS="4,5,232,35" HREF="file.exe">
    <AREA SHAPE="RECT" COORDS="161,43,411,66" HREF="#"
          onClick="window.open ('viewpoint.htm', 'vpwindow', 'WIDTH=260, HEIGHT=350')">
    </MAP>
    <IMG SRC="download.gif" USEMAP="#bar" border=0>

Note also that I removed the redundant "no" conffigurations for the window features: if you do not mention a feature, it is defined as "no" (so long as *some* feature is defined).


Cheers,
-Quixote
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Expert Comment

by:Quixote
ID: 1275847
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
0
 
LVL 4

Expert Comment

by:rafistern
ID: 1275848
I have had this problem myself in the past. Is it a browser bug?
0
 

Author Comment

by:janeb
ID: 1275849
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.

0
 
LVL 2

Expert Comment

by:Quixote
ID: 1275850
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
0
 

Author Comment

by:janeb
ID: 1275851
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!!
0
 

Author Comment

by:janeb
ID: 1275852
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??
0
 
LVL 2

Expert Comment

by:Quixote
ID: 1275853
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
0
 
LVL 4

Expert Comment

by:rafistern
ID: 1275854
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.
0
 
LVL 2

Expert Comment

by:Quixote
ID: 1275855
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
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

885 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question