Tuesday, March 8, 2005

AIM Web Presence Indicator, Extended

I got some responses to the last post asking if it was possible to do more than just change the image if the user was online or offline. Well, big.oscar.aol.com doesn't know to supply anything other than an image, but it is possible to use Javascript to get the desired result.

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:

americaoverline said...

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

ziahmed said...

This is wicked cool! Is there any way to query idle/away status too?