Netscape/IE Problem

[Mighty]

I have an image map and when the user mouses over certain sections of the image, I call the function below to display certain information.

function show(country, address){

// Set the left edge of the span
var left = event.clientX + document.body.scrollLeft - 2;
if (left > 600) left = left - 75;

with(document.getElementById('tooltip')) {
style.visibility = 'visible';
style.width = 160;
style.left = left;
style.top = event.clientY + document.body.scrollTop + 18;
innerHTML = "<FONT COLOR=\"BLUE\"><U>" + country + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</U></FONT><BR>" + address;
}

}

This function works perfectly well in IE6 but it doesn't work in Netscape 7. Can anyone tell me why??

Mighty

 

[BillyRayPreachersSon]

The event proprties aren't available in NN7, I believe... I think you need to access them in a different way. Perhaps someone else can help out more.

Dan

 

[jtaal]

in Mozilla (NS) events are called in a different way. The first parameter of an on... function has the event object, while IE has a (sortof) global event object.
use some what like this:

function fixEvent(evnt)
{
  if (typeof(evnt) == "undefined") evnt = window.event;
  if (typeof(evnt.layerX) == "undefined") evnt.layerX = evnt.offsetX;
  if (typeof(evnt.layerY) == "undefined") evnt.layerY = evnt.offsetY;
  return evnt;
}

and

function myOnMouseOver (evnt)
{
  evnt = fixEvent (evnt);
  show ('...', '...');
//  return ...; if you want a return value...
}

something.onMouseOver = myOnMouseOver;

 

[Mighty]

I'm not sure that I understand how to incorporate the code above into my current code. In a JavaScript include file, I have the Show function described above.

Then in the body of my code, I have a number of AREA tags within an image map like the following:

<AREA SHAPE="rect" onMouseOver="show('Country', 'Company Name<BR>Address 1<BR>Address 2<BR>Address 3<BR>Country<BR>Tel.:&nbsp;Number<BR>Fax:&nbsp;Number<BR>Email:&nbsp;Email Address<BR>Web:&nbsp;Wesbite')" onMouseOut="hide()" COORDS="163,39,167,43" HREF="#">

So how do I incorporate the code presented by jtaal into this??

Mighty

 

[Mighty]

I have now got this working in Netscape using the following changes:

function show(e, country, address)
{

if (document.all) { var e = window.event; }

// Set the left edge of the span
var left = e.clientX + document.body.scrollLeft - 2;
if (left > 600) left = left - 75;

with(document.getElementById('tooltip')) {
style.visibility = 'visible';
style.width = 160;
style.left = left;
style.top = e.clientY + document.body.scrollTop + 18;
innerHTML = "<FONT COLOR=\"BLUE\"><U>" + country + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</U></FONT><BR>" + address;
}

}

However, I have another problem. The POPup span is now appearing but it is behind the image map and hence I can't see it. The style properties of the span are shown below. Can anyone tell me what I can do to make this appear over the image.

#tooltip {
border:1px solid #AABBCC;
background-color:#DDEEFF;
color:#003366;
visibility:hidden;
font: 7pt Arial;
position:absolute;
padding:1px;
}

Mighty

 

[Mighty]

Got a solution to the problem. Just had to set the z-index to a high value and this worked.

Mighty