OCS 2007 / LCS 2005 Presence on web application can easily enable collaboration between co-workers or peers.

Enclosed is an example for the same. To test it on your enviroment you can change the email Ids and take your mouse over the images.

<!--Sample.html--> 

<HTML>
<HEAD>
<title>OCS 2007 / LCS 2005 Presence On Web Application</title>
<script src="NameControl.js" type="text/javascript"></script>
</HEAD>
<BODY>
<table>
<tr>
<td>
<span>
<img src="namecontrol_images/unknown.gif" id="personid1" style=""border-width:0px;""/>
<script>PresenceControl(document.all.personid1, 'yasinm@microsoft.com');</script>
</span>
&nbsp;&nbsp;
<a class="link1" href="http://blogs.msdn.com/people/person_info.aspx">Yasin Mukadam</a>
</td>
</tr>
</table>
</BODY>
</HTML> 

<!--NameControl.js-->

var PresenceControlbrowseris = new PresenceControlBrowseris();
var PresenceControlObject = null;
var bPresenceControlInited = false;

var PresenceControlURIDictionaryObj = null;
var PresenceControlStatesDictionaryObj = null;

var PresenceControlOrigScrollFunc = null;
var bPresenceControlInScrollFunc = false;

//Added By Yasin Mukadam: MCS
//var namectrl = new ActiveXObject("Name.NameCtrl");

   
function EnsurePresenceControl()
{
    if (!bPresenceControlInited)
    {
        if (PresenceControlbrowseris.ie5up && PresenceControlbrowseris.win32)
        {
//@cc_on
//@if (@_jscript_version >= 5)
//@            try
//@            {
//@                PresenceControlObject = new ActiveXObject("Name.NameCtrl.1");
//@            } catch(e)
//@            {
//@               
//@            };
//@else
//@end
        }
        bPresenceControlInited = true;
        if (PresenceControlObject)
        {
            PresenceControlObject.OnStatusChange = PresenceControlOnStatusChange;
        }
    }
    return PresenceControlObject;
}

function PresenceControlOnStatusChange(name, state, id)
{
 
    if (PresenceControlStatesDictionaryObj)
    {
        var img = PresenceControlGetStatusImage(state);
        if (PresenceControlStatesDictionaryObj[id] != state)
        {
            PresenceControlUpdateImage(id, img);
            PresenceControlStatesDictionaryObj[id] = state;
        }
    }
}
   
function PresenceControlShowOOUIMouse()
{
 PresenceControlShowOOUI(0);
}
   
function PresenceControlShowOOUIFocus()
{
 PresenceControlShowOOUI(1);
}

function PresenceControlShowOOUI(inputType)
{
    if (PresenceControlbrowseris.ie5up && PresenceControlbrowseris.win32)
    {
        var obj = window.event.srcElement;
        var objSpan = obj;
        var objOOUI = obj;
        var oouiX = 0, oouiY = 0;
        if (EnsurePresenceControl() && PresenceControlURIDictionaryObj)
        {
            var objRet = PresenceControlGetOOUILocation(obj, false);
        
            objSpan = objRet.objSpan;
            objOOUI = objRet.objOOUI;
            oouiX = objRet.oouiX;
            oouiY = objRet.oouiY;
            var name = PresenceControlURIDictionaryObj[objOOUI.id];
            if (objSpan)
                objSpan.onkeydown = PresenceControlHandleAccelerator;
            PresenceControlObject.ShowOOUI(name, inputType, oouiX, oouiY);
        }
    }
}


    function PresenceControlHideOOUI()
    {
      PresenceControlObject.HideOOUI();
    }
   
    function PresenceControlGetStatusImage(state)
    {
        var img = "PresenceControlBLANK.GIF";
        switch (state)
        {
            case 0:
                img = "PresenceControlON.GIF";
            break;     
            case 1:
                img = "PresenceControlOFF.GIF";
            break; 
            case 2:
                img = "PresenceControlAWAY.GIF";
            break;
            case 3:
                img = "PresenceControlBUSY.GIF";
            break;
            case 4:
                img = "PresenceControlAWAY.GIF";
            break;
            case 5:
                img = "PresenceControlBUSY.GIF";
            break;
            case 6:
                img = "PresenceControlAWAY.GIF";
            break;
        }
        return img;
    }
   
    function PresenceControlUpdateImage(id, img)
    {
        var obj = document.images(id);
        if (obj)
        {
            var oldImg = obj.src;
            var index = oldImg.lastIndexOf("/");
            var newImg = oldImg.slice(0, index + 1);
            newImg += img;
            if (oldImg != newImg)
                obj.src = newImg;
            if (obj.altbase)
            {
                obj.alt = obj.altbase;
            }
        }
    }
   
function PresenceControlScroll()
{
    if (!bPresenceControlInScrollFunc)
    {
        bPresenceControlInScrollFunc = true;
        PresenceControlHideOOUI();
    }
    bPresenceControlInScrollFunc = false;
    return PresenceControlOrigScrollFunc ? PresenceControlOrigScrollFunc() : true;  
}

   
function PresenceControl(imgobj, uri)
{
 if (uri == null || uri == '')
        return;
   
    if(imgobj == null || imgobj == '')
    {
      return;
    }
    
    if (PresenceControlbrowseris.ie5up && PresenceControlbrowseris.win32)
 {
        //var obj = window.event.srcElement;
        var obj = imgobj
        var objSpan = obj;
        var id = obj.id;
        var fFirst = false;
        if (!PresenceControlStatesDictionaryObj)
        {
            PresenceControlStatesDictionaryObj = new Object();
            PresenceControlURIDictionaryObj = new Object();
            if (!PresenceControlOrigScrollFunc )
            {
                PresenceControlOrigScrollFunc = window.onscroll;
                window.onscroll = PresenceControlScroll;
            }
        }
        if (PresenceControlStatesDictionaryObj)
        {
            if (!PresenceControlURIDictionaryObj[id])
            {
                PresenceControlURIDictionaryObj[id] = uri;
                fFirst = true;
            }
            if (typeof(PresenceControlStatesDictionaryObj[id]) == "undefined")
            {
                PresenceControlStatesDictionaryObj[id] = 1;
            }
            if (fFirst && EnsurePresenceControl() && PresenceControlObject.PresenceEnabled)
            {
                var state = 1, img;
                state = PresenceControlObject.GetStatus(uri, id);
                img = PresenceControlGetStatusImage(state);
                PresenceControlUpdateImage(id, img);
                PresenceControlStatesDictionaryObj[id] = state;
            }       
        }
        if (fFirst)
        {
            var objRet = PresenceControlGetOOUILocation(obj,false);
            objSpan = objRet.objSpan;
            if (objSpan)
            {
                objSpan.onmouseover = PresenceControlShowOOUIMouse;
                objSpan.onfocusin = PresenceControlShowOOUIFocus;
                objSpan.onmouseout = PresenceControlHideOOUI;
                objSpan.onfocusout = PresenceControlHideOOUI;
            }
        }
     }
}

function PresenceControlHandleAccelerator()
{
    if (PresenceControlObject)
    {
       if (event.altKey && event.shiftKey &&
            event.keyCode==121)
        {
           PresenceControlObject.DoAccelerator();
        }
    }
}

function PresenceControlGetOOUILocation(obj, fprint)
{
    var objRet = new Object;
    var objSpan = obj;
    var objOOUI = obj;
    var oouiX = 0, oouiY = 0, objDX = 0;
    var fRtl = document.dir == "rtl";
    while (objSpan && objSpan.tagName != "SPAN" && objSpan.tagName != "TABLE")
    {
        objSpan = objSpan.parentNode;
    }
    if (objSpan)
    {
       var collNodes = objSpan.tagName == "TABLE" ?
                       objSpan.rows(0).cells(0).childNodes :
                       objSpan.childNodes;
       var i;
       for (i = 0; i < collNodes.length; ++i)
       {  
           if (collNodes.item(i).tagName == "IMG" && collNodes.item(i).id)
           {
               objOOUI = collNodes.item(i);
               break;
           }
       }
    }
    obj = objOOUI;
  
    while (obj)
    {
        if (fRtl)
        {
             if (obj.scrollWidth >= obj.clientWidth + obj.scrollLeft)       
                objDX = obj.scrollWidth - obj.clientWidth - obj.scrollLeft;            
             else
                objDX = obj.clientWidth + obj.scrollLeft - obj.scrollWidth;
    oouiX += obj.offsetLeft + objDX;
        }
        else
        {
            oouiX += obj.offsetLeft;
   oouiY += obj.offsetTop;
  }     
  if (fprint)
  {
  alert(obj.scrollTop);
  }
       
        obj = obj.offsetParent;           
    }
    try
    {
        obj = window.frameElement;
        while (obj)
        {
            if (fRtl)
            {
                if (obj.scrollWidth >= obj.clientWidth + obj.scrollLeft)       
                    objDX = obj.scrollWidth - obj.clientWidth - obj.scrollLeft;            
                else
                    objDX = obj.clientWidth + obj.scrollLeft - obj.scrollWidth;
                oouiX += obj.offsetLeft + objDX;
            }
            else
                oouiX += obj.offsetLeft - obj.scrollLeft;
           oouiY += obj.offsetTop - obj.scrollTop;
  if (fprint)
  {
  alert(obj.scrollTop);
  }
           
            obj = obj.offsetParent;
      }
    } catch(e)
    {
    };
         var scrOfX = 0, scrOfY = 0;
   if( typeof( window.pageYOffset ) == 'number' ) {

    scrOfY = window.pageYOffset;
    scrOfX = window.pageXOffset;
   } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {

    scrOfY = document.body.scrollTop;
    scrOfX = document.body.scrollLeft;
   } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
    scrOfY = document.documentElement.scrollTop;
    scrOfX = document.documentElement.scrollLeft;
   }
   
    objRet.objSpan = objSpan;
    objRet.objOOUI = objOOUI;
    objRet.oouiX = oouiX;
    objRet.oouiY = oouiY - scrOfY;
    if (fRtl)
        objRet.oouiX += objOOUI.offsetWidth;
       
    if (fprint)
    {
    alert(oouiY);
    }
       
    return objRet;
}
  

function PresenceControlBrowseris () {
 var agt = navigator.userAgent.toLowerCase();
        this.osver = 1.0;
        if (agt)
        {
            var stOSVer = agt.substring(agt.indexOf("windows ") + 11);
     this.osver = parseFloat(stOSVer);
        }
       
 this.major = parseInt(navigator.appVersion);
 this.nav = ((agt.indexOf('mozilla')!=-1)&&((agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible')==-1)));
  this.nav2 = (this.nav && (this.major == 2));
 this.nav3 = (this.nav && (this.major == 3));
 this.nav4 = (this.nav && (this.major == 4));
 this.nav6 = this.nav && (this.major == 5);
 this.nav6up = this.nav && (this.major >= 5);
 this.nav7up = false;
 if (this.nav6up)
 {
  var navIdx = agt.indexOf("netscape/");
  if (navIdx >=0 )
   this.nav7up = parseInt(agt.substring(navIdx+9)) >= 7;
 }
 this.ie = (agt.indexOf("msie")!=-1);
 this.aol = this.ie && agt.indexOf(" aol ")!=-1;
 if (this.ie)
  {
  var stIEVer = agt.substring(agt.indexOf("msie ") + 5);
  this.iever = parseInt(stIEVer);
  this.verIEFull = parseFloat(stIEVer);
  }
 else
  this.iever = 0;
 this.ie3 = ( this.ie && (this.major == 2));
 this.ie4 = ( this.ie && (this.major == 4));
 this.ie4up = this.ie && (this.major >=4);
 this.ie5up = this.ie && (this.iever >= 5);
 this.ie55up = this.ie && (this.verIEFull >= 5.5);
 this.ie6up = this.ie && (this.iever >= 6);
    this.win16 = ((agt.indexOf("win16")!=-1)
               || (agt.indexOf("16bit")!=-1) || (agt.indexOf("windows 3.1")!=-1)
               || (agt.indexOf("windows 16-bit")!=-1) );
    this.win31 = (agt.indexOf("windows 3.1")!=-1) || (agt.indexOf("win16")!=-1) ||
                 (agt.indexOf("windows 16-bit")!=-1);
    this.win98 = ((agt.indexOf("win98")!=-1)||(agt.indexOf("windows 98")!=-1));
    this.win95 = ((agt.indexOf("win95")!=-1)||(agt.indexOf("windows 95")!=-1));
    this.winnt = ((agt.indexOf("winnt")!=-1)||(agt.indexOf("windows nt")!=-1));
    this.win32 = this.win95 || this.winnt || this.win98 ||
                 ((this.major >= 4) && (navigator.platform == "Win32")) ||
                 (agt.indexOf("win32")!=-1) || (agt.indexOf("32bit")!=-1);
    this.os2   = (agt.indexOf("os/2")!=-1)
                 || (navigator.appVersion.indexOf("OS/2")!=-1) 
                 || (agt.indexOf("ibm-webexplorer")!=-1);
    this.mac    = (agt.indexOf("mac")!=-1);
    this.mac68k = this.mac && ((agt.indexOf("68k")!=-1) ||
                               (agt.indexOf("68000")!=-1));
    this.macppc = this.mac && ((agt.indexOf("ppc")!=-1) ||
                               (agt.indexOf("powerpc")!=-1));
    this.w3c = this.nav6up;
}

<!--Images-->

PresenceControlON: PresenceControlON

Unknown: Unknown

PresenceControlOFF:

PresenceControlBUSY:

PresenceControlBLANK:

PresenceControlAWAY: