Urgent! Problems with mouseover in netscape

[holty]

Hi,

I have a problem with some code that displays a nice little table display when a part of an imagemap is onmouse over. It works fine in IE but not in Netscape - any ideas?

<style>
.divstyle{position:absolute;
border:1px groove black;
width:150;
top:0;
left:0;
}

.pstyletitle{postion:absolute;
background:#0C5192;
color:white;
font-size:100%;
font-family:verdana;

heigth:50px;}

.pstylebody{postion:absolute;
background:#CBCBCB;
font-size:100%;
font-family:verdana;}

</style>
<script language="Javascript">
<!--

var IE = document.all?true:false

if (!IE) document.captureEvents(Event.MOUSEMOVE)

document.onmousemove = getMouseXY;

var tempX = 0
var tempY = 0


function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
obj_info = document.getElementById("info")
obj_info.style.top = tempY + 10;
obj_info.style.left = tempX + 10;
return true
}

function alert_msg(titletext,bodytext){
obj_info = document.getElementById("info")
obj_info.style.display = '';
obj_imagetitle = document.getElementById("imagetitle");
obj_imagetitle.innerHTML = titletext;
obj_imagebody = document.getElementById("imagebody");
obj_imagebody.innerHTML = bodytext;
}

function away()
{
obj_info = document.getElementById("info")
obj_info.style.display = 'none';
}



//-->
</script>

<div Class="divstyle" id="info" style='display:none;'>
<div id="imagetitle" class="pstyletitle" align="center"></div>
<div id="imagebody" class="pstylebody"></div>
</div>


<img src="images/image.gif" border="0" usemap="#image" width="450" height="550">
<map name="image">
<area shape="rect" coords="218,25,195,43" href="#" onmouseover="alert_msg('Title','Description')"; onmouseout="away()";>
</map>


I have more hotspots but I have removed to make the post shorter!

Any help would be superb!

[Roy Sinclair]

obj_info.style.display = '';

should be

obj_info.style.display = 'block';

[holty]

Roy,

Just got this error in netscape 4.8

document.getElementById is not a function.

Too many errors. No further JavaScript errors will be displayed for this
page.

I know my browser is old but it must work on 7.0 but I'm unable to test here

Any ideas?

[Roy Sinclair]

When you say Netscape without qualifying it I assume you mean a current version of Netscape and not an ancient defective bug-ridden kludge like Netscape 4.

Netscape 4 doesn't support document.getElementById and treats position:absolute items as "layers" which are closer to being like the IFRAME tag (which Netscape 4 doesn't support either) than a DIV tag.

Do you really have any Netscape 4 users (I do and dearly wish I didn't)? Make sure you're not developing for it on inertia only.

[holty]

Roy,

Does the above run ok on Netscape 7? I agree about the bug ridden Netscape 4, I haven't many on them users.

It runs fine on IE

Thanks

[Roy Sinclair]

With the change to set the display style to block as I first suggested it should work fine in Gecko based browsers.

If you still need to support NS 4 then you have to use document.layers["info"] to reference the div named info and then use that layer's document.open. document.write and document.close functions to replace the content of that layer with new content each time you want to change the content.