PDA

View Full Version : Image map status bar text

AdamC
11-06-2002, 01:54 PM
Does anyone know if its possible to control what appears in the status bar when hovering over a linked part of an image map?
I've tried the following, but it didn't work:

<map name="Map">
<area shape="rect" coords="119,83,195,97" href="about_us.html" onMouseOver="window.status='About Us'; return true" onMouseOut="window.status='';return true">
<area shape="rect" coords="220,81,297,97" href="contact-us.html" onMouseOver="window.status='Contact Us'; return true" onMouseOut="window.status='';return true">
</map>
beetle
11-06-2002, 04:00 PM
I've heard about a bug in IE that causes stuff like this to not occur correctly. The solution is to use a small timeout.....try something like this...function doStatus(e) {
var o = (document.all) ? e.srcElement : e.target;
if (!o.status) return;
setTimeout("top.status = o.status", 1);
return true;
}
function clearStatus() {
setTimeout("top.status = '';", 1);
return true;
}

<map name="Map" onMouseOver="doStatus(event)" onMouseOut="clearStatus()">
<area shape="rect" coords="119,83,195,97" href="about_us.html" status="About Us" />
<area shape="rect" coords="220,81,297,97" href="contact-us.html" status="Contact Us" />
</map>Of course....this example adds alot, but the setTimeout part is what may alleviate your headaches.
AdamC
11-06-2002, 05:04 PM
Thanks for your suggestion, but tried it and it didn't work. I'm not too hot with JavaScript so its possible I implemented it wrong. First I tried putting the script in an external *.js file, referenced in the <head> section, then just put the script directly into the head section, but got runtime errors both ways.

Any fixes, or other approaches?
beetle
11-06-2002, 05:54 PM
Wh00ps! I used a reserved word! :rolleyes:

Here you go, this *should* workfunction doStatus(e) {
var o = (document.all) ? e.srcElement : e.target;
if (!o.statustext) return;
setTimeout("top.status = o.statustext", 1);
return true;
}
function clearStatus() {
setTimeout("top.status = '';", 1);
return true;
}

<map name="Map" onMouseOver="doStatus(event)" onMouseOut="clearStatus()">
<area shape="rect" coords="119,83,195,97" href="about_us.html" statustext="About Us" />
<area shape="rect" coords="220,81,297,97" href="contact-us.html" statustext="Contact Us" />
</map>
glenngv
11-07-2002, 03:50 AM
with due respect to beetle, you can also use the title attribute so that it will serve as the tooltip and the text in the status bar.

<map name="Map" onMouseOver="doStatus(event)" onMouseOut="clearStatus()">
<area shape="rect" coords="119,83,195,97" href="about_us.html" title="About Us" />
<area shape="rect" coords="220,81,297,97" href="contact-us.html" title="Contact Us" />
</map>

then in beetle's code, you'd put:

o.title

in place of o.statustext
beetle
11-07-2002, 04:15 AM
glenngv

Now that's good thinkin! :thumbsup: