Click to See Complete Forum and Search --> : onMouseOver, image map & xhtml in a .js file


roll the bones
02-05-2003, 09:55 PM
I have a site that I wrote in XHTML. I have an image map at the top of each page that serves as a nav bar. Rather than having that code in each page I have it in an external .js file. The code works fine but I want to add an onMouseOver for each of the area tags. When I add the code for the mouse over and mouse out events, the mouse out works but the mouse over does not. Can anyone see anything wrong with the code below? This is the full content of the .js file. I'm using "Out" in the onMuseOut event just for testing purposes.

var map;
map = "<map name='nav' id='navigationmap'>"
map = map + "<area shape='rect' coords='0,0,67,29' alt='News' href='/news/' onMouseover=\"window.status='News'; return true;\" onMouseOut=\"window.status='Out'; return true;\" />"
map = map + "<area shape='rect' coords='68,0,141,29' alt='History' href='/history/' onMouseOver=\"window.status='History'; return true\" onMouseOut=\"window.status='Out'; return true;\" />"
map = map + "<area shape='rect' coords='142,0,241,29' alt='Discography' href='/discography/' onMouseOver=\"window.status='Discography'; return true\" onMouseOut=\"window.status='Out'; return true;\" />"
map = map + "<area shape='rect' coords='242,0,338,29' alt='Biographies' href='/biographies/' onMouseOver=\"window.status='Biographies'; return true\" onMouseOut=\"window.status='Out'; return true;\" />"
map = map + "<area shape='rect' coords='589,0,651,29' alt='Links' href='/links/' onMouseOver=\"window.status='Links'; return true\" onMouseOut=\"window.status='Out'; return true;\" />"
map = map + "</map>"


document.write(map);

gil davis
02-06-2003, 06:10 AM
It works fine in NS 4.x. It's broken in IE 5.5 and NS 6.

roll the bones
02-06-2003, 08:14 AM
It actually does work in NS 7. Is there nothing I can do to get it to work in IE 5.5 or 6?

gil davis
02-06-2003, 08:44 AM
There seems to be a bug in NS 6 that you are supposed to be able to fix by using setTimeout() for setting window.status. I have not had any success with it. There is no consistency. Some pages work, some don't.

There seems to be a bug in IE 5.5 with the area map and window.status. The only way I have been able to make it work is to use:

<area nohref shape="..."
onclick="window.location='thepageyouwouldnormallygoto"
onmouseover="window.status='...';return true"
onmouseout="window.status=''" coords="...">

For an example, see http://gil.davis.home.att.net/020802.htm and pass the mouse over the crossword puzzle. The status represents the clue that corresponds to the mouse position. That is done using an image map created by document.write() in an external js. It has been successfully tested in NS 4 & 6, and IE 4 & 5.5.