OnMouseOver in an <area> tag

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.
LVL 3
ESIAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
knightEknightConnect With a Mentor Commented:
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
 
jbirkCommented:
Try this:
<area shape="rect" coords="286,3,367,21" href="somewhere.htm" OnMouseOver="return mover('blabla...');" OnMouseOut="return mout('');">


-Josh
0
 
jbirkCommented:
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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
ESIAuthor Commented:
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
 
knightEknightCommented:
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
 
knightEknightCommented:
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
 
jbirkCommented:
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
 
knightEknightCommented:
.. 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
 
knightEknightCommented:
In English now:

>> "and now you can PUT this back in:"
0
 
jbirkCommented:
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
 
knightEknightCommented:
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
 
jbirkCommented:
NN 4.7  I didn't set the mouseOut code though.  Only mouseover.
0
 
ESIAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.