今天做公司的企业网站要加上QQ在线客服,可是官方提供的几种样式和网站特别不协调,所以就在研究怎么自定义图标。找了很长时间的资料,也试了很多遍,还是不行,后来在一博友那里找到了答案,特分享给大家,如果有用就免费收藏吧!!!
我们使用自定义图片的时候怎么来根据不同的状态显示不同的图片呢,今天看了下QQ提供的图片,发现通过判断QQ提供的图片的宽度可以得到qq的状态。这个是QQ提供的图片地址SRC=http://wpa.qq.com/pa?p=1:28171291:4,p的最后一个参数要是4才可以判断,提供的别的图片,大小宽高都是一样的不能判断。
下边是示例代码,测试的时候可以换成自己的QQ,在线的时候显示QQ的logo,不在线显示百度的logo,
李伟的博客 <script type="text/javascript">// <![CDATA[ function showQQ() { var qq=document.getElementById("qq") if(qq.width<20) { qq.src="http://piao.hunbohui.com/qq11.gif" qq.alt="QQ不在线" } else { qq.src="http://piao.hunbohui.com/qq1.gif" qq.alt="罗威婚纱为您服务!" } var qq1=document.getElementById("qq1") if(qq1.width<20) { qq1.src="http://piao.hunbohui.com/qq11.gif" qq1.alt="QQ不在线" } else { qq1.src="http://piao.hunbohui.com/qq1.gif" qq1.alt="罗威婚纱为您服务!" } var qq2=document.getElementById("qq2") if(qq2.width<20) { qq2.src="http://piao.hunbohui.com/qq11.gif" qq2.alt="QQ不在线" } else { qq2.src="http://piao.hunbohui.com/qq1.gif" qq2.alt="罗威婚纱为您服务!" } var qq3=document.getElementById("qq3") if(qq3.width<20) { qq3.src="http://piao.hunbohui.com/qq11.gif" qq3.alt="QQ不在线" } else { qq3.src="http://piao.hunbohui.com/qq1.gif" qq3.alt="罗威婚纱为您服务!" } } // ]]></script> <a href="http://wpa.qq.com/msgrd?V=1&Uin=610477649&Exe=QQ&Site=im.qq.com&Menu=No" target="blank"> <img id="qq" src="http://wpa.qq.com/pa?p=1:610477649:4" border="0" alt="给我发消息" /></a> <a href="http://wpa.qq.com/msgrd?V=1&Uin=595312709&Exe=QQ&Site=im.qq.com&Menu=No" target="blank"> <img id="qq1" src="http://wpa.qq.com/pa?p=1:595312709:4" border="0" alt="给我发消息" /></a> <a href="http://wpa.qq.com/msgrd?V=1&Uin=1351962303&Exe=QQ&Site=im.qq.com&Menu=No" target="blank"> <img id="qq2" src="http://wpa.qq.com/pa?p=1:1351962303:4" border="0" alt="给我发消息" /></a> <a href="http://wpa.qq.com/msgrd?V=1&Uin=1061177270&Exe=QQ&Site=im.qq.com&Menu=No" target="blank"> <img id="qq3" src="http://wpa.qq.com/pa?p=1:1061177270:4" border="0" alt="给我发消息" /></a>