有时候应客户要求,需要给客户网站上加上QQ在线图标。而QQ官方提供的图标客户往往不满意,需要用自定义的图片,这时候就遇到了一个问题,QQ官方提供的图片可以区分是否在线,这两种状态返回的图片不一样。
我们使用自定义图片的时候怎么来根据不同的状态显示不同的图片呢,今天看了下QQ提供的图片,发现通过判断QQ提供的图片的宽度可以得到qq的状态。<img border="0" SRC=http://wpa.qq.com/pa?p=1:28171291:4 alt="给我发消息" id="qq">这个是QQ提供的图片地址SRC=http://wpa.qq.com/pa?p=1:28171291:4,p的最后一个参数要是4才可以判断,提供的别的图片,大小宽高都是一样的不能判断。
下边是示例代码,测试的时候可以换成自己的QQ,在线的时候显示QQ的logo,不在线显示百度的logo,
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
<title>无标题文档</title>
6
<script language="javascript" type="text/javascript">
7
<!--
8
function showQQ()
9
{
10
var qq=document.getElementById("qq")
11
if(qq.width<20)
12
{
13
qq.src="http://www.baidu.com/img/logo-yy.gif"
14
qq.alt="QQ不在线"
15
}
16
else
17
{
18
qq.src="http://img1.qq.com/news/pics/6638/6638749.gif"
19
qq.alt="QQ在线呢,大哥大姐有事情来找我哈哈!"
20
}
21
}
22
-->
23
</script>
24
</head>
25
<body onload="showQQ()">
26
<a target=blank href=http://wpa.qq.com/msgrd?V=1&Uin=41593435&Exe=QQ&Site=im.qq.com&Menu=No>
27
<img border="0" SRC=http://wpa.qq.com/pa?p=1:41593435:4 alt="给我发消息" id="qq"></a>
28
</body>
29
</html>
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](/Images/OutliningIndicators/InBlock.gif)
8
![](/Images/OutliningIndicators/InBlock.gif)
9
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/InBlock.gif)
12
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
13
![](/Images/OutliningIndicators/InBlock.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
21
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
22
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
23
![](/Images/OutliningIndicators/None.gif)
24
![](/Images/OutliningIndicators/None.gif)
25
![](/Images/OutliningIndicators/None.gif)
26
![](/Images/OutliningIndicators/None.gif)
27
![](/Images/OutliningIndicators/None.gif)
28
![](/Images/OutliningIndicators/None.gif)
29
![](/Images/OutliningIndicators/None.gif)