I was hoping that the image's "location" property would be set appropriately based on the redirect from big.oscar, but unfortunately that's not the case. So the only thing I could think of was to have a tiny offline image, and use the image's "height" property to tell in the onload handler whether it was the online or offline image that loaded. Fortunately, this worked pretty well. Here's a simple example page that demonstrates this behavior:
<html>
<script language="javascript">
function imgload(e)
{
if (document.getElementById("i").height <= 2)
document.getElementById("s").style.fontStyle = "italic";
}
</script>
<body>
<img id="i" onload="imgload()" border="0" src="http://big.oscar.aol.com/nosuchuser?on_url=http://www.aol.com/aim/gr/online.gif&off_url=http://www.aol.com/aim/gr/offline.gif">
<span id="s">nosuchuser</span>
</body>
</html>
and the output:
nosuchuser
This italicizes the text if the user "nosuchuser" is offline. This is just a simple example, from here you can do lots of things, such as add/change a hyperlink, etc.
2 comments:
Thats pretty cool. I didn't implement the JavaScript to change the text, because I'm using it a slightly different way.
Instead of using an img tag, I have a CSS class that applies the big.oscar.aol.com image as a background-image to the link.
#aim_link
{ background-image: url("http://big.oscar.aol.com/AmericaOverLine?on_url=http://eclip5e.visual-assault.org/design/graphics/aim_online.gif&off_url=http://eclip5e.visual-assault.org/design/graphics/aim_offline.gif");
padding-right: 13px;
background-position: right;
background-repeat: no-repeat;
}
This way you can easily change the icons on the fly just by editing the CSS.
check it out here
http://eclip5e.visual-assault.org
This is wicked cool! Is there any way to query idle/away status too?
Post a Comment