hi,
I have implemented BOldChat in my sharepoint 2010 web application.How can i change the images of live chat button whenever operator is available or away in javascript.I have 2 images called available and unavailable in sp 2010 image gallery.I have written the code in javascript so that when i click on chat button(that is available symbol))and i wanted to change image whenever operator is away(Unavailable symbol)Just assume that you two images and has to be changed based on the status of the operator...Please reply as soon as possible.The code as follows...

<asp:HyperLink runat="server" ID="btnLiveChat" ImageUrl="~/PublishingImages/btnSmallLiveChat.png"
ToolTip="Chat" BorderWidth="0" CssClass="HeaderButton" onclick="getChatSite();">Chat</asp:HyperLink>


<script language="javascript" type="text/javascript">
function getChatSite()
{
window.open("https://livechat.boldchat.com/aid/5841406484897312464/bc.chat?cwdid=1759868703890805207&amp;url='" + escape(document.location.href) + "'", "chat", "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=640,height=480');this.newWindow.focus();this.newWindow.opener=window;return false") }
</script>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-13227431-1");
pageTracker._trackPageview();
} catch (err) { }
</script>
<!-- Bold Software Visitor Monitor HTML v2.00 (Website=- None -,ChatWindow=My Chat Window,ChatInvitation=My Invite Ruleset) -->
<script language="JavaScript" type="text/javascript">
document.write(unescape('%3Cscript language="JavaScript" type="text/javascript" src="http://vms.boldchat.com/aid/id/bc.vms2/vms.js"%3E%3C/script%3E'));
</script>
<script language="JavaScript" type="text/javascript">
try {
var pageViewer = _bcvm.getPageViewer("5841406484897312464");
pageViewer.setParameter("ChatWindowDefID", "1759868703890805207");
pageViewer.setParameter("ChatWidth", "640");
pageViewer.setParameter("ChatHeight", "480");
pageViewer.setParameter("InvitationDefID", "4643103440904555620");
pageViewer.setParameter("WindowScheme", "http");
pageViewer.pageViewed();
} catch(error) {}
</script>
<noscript>
<a href="http://www.boldchat.com" title="Live Chat Software" target="_blank"><img alt="Live Chat Software" src="http://vms.boldchat.com/aid/5841406484897312464/bc.vmi" border="0" width="1" height="1" /></a>
</noscript>


I have this code which will change images when operator is available and away

function bt_showChatHTML(bt_available,bt_unavailable) {
document.write(bt_unavailable);
}
bt_chatAvailable = false;


Where should i add this code or how can i do this task??

thanks