Solved

OnMouseOver in an <area> tag

Posted on 2000-04-27
13
456 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 2
13 Comments
 
LVL 8

Expert Comment

by:jbirk
ID: 2755102
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
ID: 2755114
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
ID: 2755121
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
Industry Leaders: 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 33

Expert Comment

by:knightEknight
ID: 2755171
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
ID: 2755182
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
ID: 2755217
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
 
LVL 33

Accepted Solution

by:
knightEknight earned 100 total points
ID: 2755255
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
ID: 2755286
.. 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
ID: 2755296
In English now:

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

Expert Comment

by:jbirk
ID: 2755527
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
ID: 2755569
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
ID: 2755595
NN 4.7  I didn't set the mouseOut code though.  Only mouseover.
0
 
LVL 3

Author Comment

by:ESI
ID: 2756058
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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Suggested Solutions

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. …
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

696 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