zhaoying 发表于 2013-5-13 14:22:11

浮动图标如何集成乐语,QQ、微博及微信等工具的方法

浮动图标如何集成乐语,QQ、微博及微信等工具的方法

备注:此方法适用于大多数客户需求,请网站开发人员按如下方式加入代码

1、美工做好自定义的在线图标样式,例下图:
2、配置乐语探头,将该探头的在线图标设置成在线不显示的状态,但是监测功能要开启。
3、做好自定义的在线图标的面板背景图,qq图片,微博图片以及乐语图片。
4、可以设置一个div标签,将该标签的背景图设置成面板背景图。<div id=”cs” style=”background-image(面板别URL) width:面板宽;height:面板高:”>
</div>

不管是放qq图片还是微博图片,都是需要2个步骤:放置图片以及加链接。
1、怎么加qq图片:
在上面的div中在套一个div标签,放置a标签,在该a标签中放入img标签,该img标签链接qq图标,点击该图片链接到qq客服(a标签的herf可以链接到qq客服,至于链接到qq客服的链接地址,需要客户技术人员自己生成)。
<div id=”qq” syle=”width:qq图片宽度px;height:qq图片高度px;”>
<a href=”qq客服链接url” target=”_bank”><img src=”qq图片地址” /></a>
</div>
2、怎么加微博:
加微博的标签,放置图片的步骤和加qq图片相同。
放置微博标签的链接只要让a标签的herf指向微博地址即可,微博地址也需要客户自己生成。
<div id=”weibo” syle=”width:weibo图片宽度px;height:weibo图片高度px;”>
<a href=”weibo链接url” target=”_bank”><img src=”weibo图片地址” /></a>
</div>

3、在面板中加入乐语:
放置图片过程如上述步骤:
至于链接到乐语客服,提供两种方法:
第一种是在a标签的href指向乐语固定链接;
<a href=”乐语固定链接” target=”_bank”><img src=”乐语图片地址”></a>
第二种方法是在onclick事件中调用乐语的doyoo.util.openChat(gid)的函数(这个函数必须得嵌入乐语的监测代码才可以,gid为分组id)。
<a href=”#” onclick=”doyoo.util.openChat(gid)”><img src=”乐语图片地址”></a>


然后讲设置的div层浮动在网页上就行了。下面是给出的其中的一种显示浮动的方法:
<script language="javascript" type="text/javascript">
var MarginLeft = 30;   //浮动层离浏览器右侧的距离
var MarginTop = 100;   //浮动层离浏览器顶部的距离
var Width = 80;      //浮动层宽度
var Heigth= 309;      //浮动层高度

//设置浮动层宽、高
function Set()
{
    document.getElementById("浮动层divID").style.width = Width;
    document.getElementById("浮动层divID").style.height = Heigth;
}

//实时设置浮动层的位置
function Move()
{
document.getElementById("浮动层divID").style.top = document.documentElement.scrollTop + MarginTop;
document.getElementById("浮动层divID").style.left = document.documentElement.clientWidth - Width - MarginLeft;
setTimeout("Move();",100);
}

Set();
Move();
</script>

以上为我公司技术人员写的代码案例,如有任何疑问,请随时联系我公司开发人员:热线010-62984908-878   4000-789-818
页: [1]
查看完整版本: 浮动图标如何集成乐语,QQ、微博及微信等工具的方法