Solved

Usemap with javascript

Posted on 1998-12-19
12
888 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
Comment Utility
Edited text of question
0
 

Author Comment

by:janeb
Comment Utility
Edited text of question
0
 
LVL 2

Accepted Solution

by:
Quixote earned 50 total points
Comment Utility
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
 
LVL 2

Expert Comment

by:Quixote
Comment Utility
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
Comment Utility
I have had this problem myself in the past. Is it a browser bug?
0
 

Author Comment

by:janeb
Comment Utility
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 2

Expert Comment

by:Quixote
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now