Solved

OnMouseOver in an <area> tag

Posted on 2000-04-27
13
454 Views
Last Modified: 2012-06-21
G'day all experts in there !

I have an <AREA> map, and I try to put a MouseOver that display a related text in the status bar, but it seems OnMouseOver isn't recognised in an <area> tag.

I have :
<SCRIPT LANGUAGE="JavaScript">  <!--
function mover(text) { window.status = text;  return true; }
function mout()   { window.status = '';    return true; }
//-->  </SCRIPT>

and
<area shape="rect" coords="286,3,367,21" href="somewhere.htm" OnMouseOver="mover('blabla...');" OnMouseOut="mout('');">

Why doesn'it work ?

What alternative solutions do you propose experts ?

Thanks in advance for your precious time and your help.
0
Comment
Question by:ESI
  • 6
  • 5
  • 2
13 Comments
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
Try this:
<area shape="rect" coords="286,3,367,21" href="somewhere.htm" OnMouseOver="return mover('blabla...');" OnMouseOut="return mout('');">


-Josh
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
I guess I could explain.  The onmouseover and mouseout events are getting called for you but since you don't return true from them, the browser ignores what changes you made to the status bar.  If you return true, it leaves it alone and you can make changes.  Returning true from your function does not return true from the mouseover and out events, unless you tell it to return as I did above...

-Josh
0
 
LVL 3

Author Comment

by:ESI
Comment Utility
Hi jbirk,

Yes, sorry but actually I put the return in the calls (just forhot to put it in the question text), and it doesn't work..

I guess the OnMouseOver is not recognized by the <area> tag, as that tag doesn't correspond to any graphical page element.

So, what the solution ? (if any ;))
0
 
LVL 33

Expert Comment

by:knightEknight
Comment Utility
Try it with just the mouseover  (this worked for me) :


<HTML>
<HEAD>
<TITLE></title>

<SCRIPT LANGUAGE="JavaScript">  
<!--
  function mover(text) { window.status = text;  return true; }
  function mout()   { window.status = '';    return true; }
//-->
</script>

</head>

<BODY>

<MAP name="options">
<AREA shape="rect" coords="  0,  0, 99, 99"  alt="hello"   href="somewhere.htm" onMouseOver="mover('blah');">
<AREA shape="rect" coords="100,100,199,199"  alt="goodbye" href="somewhere.htm" onMouseOver="mover('bunk');">
</map>

<IMG name='mymapimg' src='dot.gif' USEMAP="#options" BORDER="1" WIDTH="200" HEIGHT="200">

</body>
</html>


My theory is that the mouseover and mouseout handlers are cancelling each other out.
0
 
LVL 33

Expert Comment

by:knightEknight
Comment Utility
When I added  onMouseOut="mover('');"  ... it acted like nothing was happening.  I'm not sure why that is, but the <AREA tag definitely supports both handlers (in NS3+ and IE4+).

__________________________________________________________________________________________
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
Try putting an alert in the onmouseover.  You'll find that that works.  I assure you onmouseover and out work in areas.  Go to: http://aegis.mcs.kent.edu/~jbirk/beta2.html and you'll see proof of this.  The menu on top left is done with maps...

Try doing this instead:
<area shape="rect" coords="286,3,367,21" href="somewhere.htm" OnMouseOver="window.status='blabla...'; return true;" OnMouseOut="window.status=''; return true;">


-Josh
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 33

Accepted Solution

by:
knightEknight earned 100 total points
Comment Utility
I think I've got it!


<HTML>
<HEAD>
<TITLE></title>

<SCRIPT LANGUAGE="JavaScript">  
<!--
  var stattxt="";

  function mover(txt)
  {
    stattxt = txt;
    setTimeout("top.status=stattxt",10);
  }
//-->
</script>

</head>

<BODY>

<MAP name="options">
<AREA shape="rect" coords="  0,  0, 99, 99"  alt="hello"   href="somewhere.htm" onMouseOver="mover('blah');if(document.all)this.focus();">
<AREA shape="rect" coords="100,100,199,199"  alt="goodbye" href="somewhere.htm" onMouseOver="mover('bunk');if(document.all)this.focus();">
</map>

<IMG name='mymapimg' src='dot.gif' USEMAP="#options" BORDER="1" WIDTH="200" HEIGHT="200">

</body>
</html>
0
 
LVL 33

Expert Comment

by:knightEknight
Comment Utility
.. and now you can out this back in:
   onMouseOut="mover('');"

Also, you may want to remove the "this.focus()" code I put in for IE -- I did this just for testing and forgot to remove it.


___________________________________________________________________________________________________________________________
0
 
LVL 33

Expert Comment

by:knightEknight
Comment Utility
In English now:

>> "and now you can PUT this back in:"
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
Kek, why did you need the setTimeout?  Does IE need that or something?  I did a test with netscape and it worked without any timeouts.

-Josh
0
 
LVL 33

Expert Comment

by:knightEknight
Comment Utility
I was surprised to find that I needed it too -- and I don't know why for sure, but it looked like the map was setting the status to the value of the HREF for that area, thus overriding the status set in the mover function, so I just delayed it a bit.  I found that I needed this in both NS and IE -- but I was very surprised to find this to be the case, since it seems obvious that setting the status whould be something anyone might want to do in a mouseOver event.  What version of NS are you using?  I could not get it to work without setTimeout in 4.08.
0
 
LVL 8

Expert Comment

by:jbirk
Comment Utility
NN 4.7  I didn't set the mouseOut code though.  Only mouseover.
0
 
LVL 3

Author Comment

by:ESI
Comment Utility
Thanks knightEknight !

And your pertinent comment is exact, I can't understand why & how such a basic thing like a window status text is NOT easily handled by the browsers....

Anyway, the setTimeout trick is good, thanks again for that.

CU around, and have several nice days.
ESI
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

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…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

728 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

14 Experts available now in Live!

Get 1:1 Help Now