Adding custom online/offline graphics for MSN IM control:

Querying with the Windows Live Presence AP

Add the following between your head tags and change the redirect pages:

<script type="text/javascript" language="javascript">
function showpresence(presence)
{
var innerFrame = document.getElementById('innerFrame');

//var statusIcon = document.createElement('img');
//statusIcon.style.border = 'none';
//statusIcon.src = 'online.gif'
//statusIcon.width = '93';
//statusIcon.height = '33';
//statusIcon.alt = presence.statusText;
//statusIcon.title = presence.statusText;

var displayName = document.createElement('span');
displayName.style.fontFamily = 'Tahoma, Verdana, sans-serif';
displayName.style.fontSize = '9pt';
displayName.title = presence.displayName;

var statusText = document.createElement('span');
statusText.style.fontFamily = 'Tahoma, Verdana, sans-serif';
statusText.style.fontSize = '9pt';
statusText.title = presence.statusText;

//var br = document.createElement('br');

// innerFrame.appendChild(statusIcon);
// innerFrame.appendChild(br);
// innerFrame.appendChild(displayName);
// innerFrame.appendChild(br);
// innerFrame.appendChild(statusText);

if ((presence.statusText == 'Offline'))
{
document.write('<a href="your_redirect_page"><img src="offline.jpg" width="93" height="33" border="0"></a>');
//displayName.innerText = presence.displayName;
//statusText.innerText = presence.statusText;
}
if ((presence.statusText == 'Online'))
{
//document.write('<IMG SRC="' +'online.gif'+ '">');
document.write('<a href="your_redirect_page"><img src="online.gif" width="93" height="33" border="0"></a>');
//displayName.innerText = presence.displayName;
//statusText.innerText = presence.statusText;
}
if ((displayName.innerText !== undefined)&&(statusText.innerText !== undefined))
{
//displayName.innerText = presence.displayName;
//statusText.innerText = presence.statusText;
}
else if ((displayName.textContent != undefined)&&(statusText.textContent !== undefined))
{

//displayName.textContent == presence.displayName;
//statusText.textContent == presence.statusText;

//document.write('<IMG SRC="' +'offline.jpg'+ '">');
}
}
</script>

 Step 2:

Add the following where you want the images to display:

<script type="text/javascript" language="javascript"
src="http://messenger.services.live.com/users/your_ID_Here@apps.messenger.live.com/presence/?cb=showpresence">
</script>

Step 3:

Download the following images:

Thats it I hope you enjoy: