onMouseOver not working in AREA tag

[AlistairH]

I've stared at this till I'm crossed-eyed and still cannot work it out. I have an image map where I'm using a number of AREA tags to provide links to various pages. I've inserted code as part of the tag to change the text in the statusbar of which the following example is typical:

onMouseOver="window.status='Review database services'; return true;" onMouseOut="window.status=''; return true;"

(Note that it's two ' marks after the status for the onMouseOut statement)

The onMouseOver doesn't work. Instead it displays the link destination URL.

Interestingly, the onMouseOut does work, having checked it by puting text inbetween the 's.

I cannot for the life of me see what's wrong. Help!

Cheers

[jscheuer1]

Well, obviously it is not the code in your post that is in error. Image maps can be funny. Is there someplace (a demo page) we can look to see this phenomenon you are describing?

[AlistairH]

Hi John

I've posted my website in draft form. You'll find it at http://alistairhamilton.homecall.co.uk

The problem lies on the main graphic on the first page. The following hotspots on the image all exhibit the same behaviour: 'Databases', 'Web Design', 'Networking', 'Support' and 'Training'

Substituting NOHREF for any of the HREF link declarations within an AREA tag allows the onMouseOver statement to do it's thing.

Cheers

Alistair

[jscheuer1]

Appears to be a 'feature' of IE only, fixing it for IE while not messing up Mozilla will be a challenge. I came up with:

        <a href="http://alistairhamilton.homecall.co.uk/databases.html"><area NOHREF onClick="location.href='http://alistairhamilton.homecall.co.uk/databases.html';return false;" onMouseOver="this.parentElement.parentElement.parentElement.style.cursor='pointer';window.status='Review database services'; return true;" onMouseOut="this.parentElement.parentElement.parentElement.style.cursor='';window.status=''; return true;" shape="rect" alt=
        "Database Services: Bespoke Access solutions with integration to other MS Office products or the Internet. Fully designed and tested to your specifications. Please call to discuss."
              coords='72, 120, 167, 145'></a>

A long way to go and still the cursor will not change onmouseover in Mozilla. Not even using 'document.documentElement.', hover class for area, or three 'parentNode.' instead of the three 'parentElement.' will change the cursor in Mozilla but, at least 'document.documentElement.' gives no error in Mozilla and still works in IE6 with your doctype. Errors of this type in Mozilla are less of a problem than in IE6, so I'd stick with the above code for backward compatibility with earlier IE's. Other than the cursor not changing onmouseover in Mozilla, works fine in both browsers but, as I said before, worked fine in Mozilla to begin with. If you want it perfect, I am afraid you may have to use conditional document.write statements to create two different maps.

[AlistairH]

Good old IE eh - don't you just love it? Nothing like a long way round for a short cut . This is the first time I've ever used an image map. Typical!

Thanks for your efforts John. Much appreciated.

Alistair

[MoFoQ]

I ran into this issue too.
What can I say? It's IE!

anyways...I did however find a way to get it to work in IE.
instead of assigning the value to window.status directly, we let settimeout do the dirty work (it's not that the onMouseover event doesn't work.....just setting the window.status in an onMouseover in an AREA tag).
And in the onMouseover, replace "window.status" with the function name or u can enter the setTimeout call there.

<script language="javascript">
function setStatus(text)
{
  setTimeout("window.status = \'" + text + "\';", 0);
  
  return true;
}
</script>

So,

onMouseOver="window.status='hello World!'; return true;"

Becomes

onMouseOver="return setStatus('hello World!');"

And it works fine in Firefox and in IE.