代码里的图片自行更换，记得引入下jquery。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="UTF-8" />
<script src="js/jquery-2.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试图片添加按钮</title>
<style>
img {
display: block
}
#imgBox li {
position: relative;
list-style-type: none;
border: 1px solid #ccc;
padding: 3px;
float: left
}
.toolbar {
position: absolute;
bottom: 252px;
right: 230px;
}
.toolbar2 {
position: absolute;
bottom: 155px;
left: 105px;
}
.toolbar3 {
position: absolute;
bottom: 550px;
left: 305px;
}
.toolbar4 {
position: absolute;
bottom: 650px;
left: 805px;
}
</style>
</head>
<body>
<ul id="imgBox">
<li>
<a target="_blank">
<img src="img/背景.jpg" width="1460" height="900" border="0" /></a>
<div class="toolbar" οnmοuseοver="printMsg('imgBox1');" οnmοuseleave="hideMsg('imgBox1');">
<div id="imgBox1" style="display: none;max-width: 300px;">
<h3 style="color: red;">百度（纳斯达克：BIDU），全球最大的中文搜索引擎、最大的中文网站。1999年底,身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力，抱着技术改变世界的梦想，他毅然辞掉硅谷的高薪工作，携搜索引擎专利技术，于 2000年1月1日在中关村创建了百度公司。</h3>
</div>
<a href="http://www.baidu.com" target="_blank">
<img src="img/button.png" border="0" align="right"></a>
</div>
<div class="toolbar2" οnmοuseοver="printMsg('imgBox2');" οnmοuseleave="hideMsg('imgBox2');">
<div id="imgBox2" style="display: none;max-width: 300px;"">
<h3 style="color: cornflowerblue;">京东JD.COM-专业的综合网上购物商城，销售超数万品牌、4020万种商品，囊括家电、手机、电脑、母婴、服装等13大品类。秉承客户为先的理念，京东所售商品为正品行货、全国联保、机打发票。</h3>
</div>
<a href="https://www.jd.com" target="_blank">
<img src="img/button.png" border="0" align="left"></a>
</div>
<div class="toolbar3" οnmοuseοver="printMsg('imgBox3');" οnmοuseleave="hideMsg('imgBox3');">
<div id="imgBox3" style="display: none;max-width: 300px;"">
<h3 style="color: blue;">新浪（NASDAQ：SINA），是一家网络公司的名称，成立于1998年12月，服务大中华地区与海外华人，新浪拥有多家地区性网站，通过旗下五大业务主线为用户提供网络服务，网下的北京新浪、香港新浪、台北新浪、北美新浪等覆盖全球华人社区的全球最大中文门户网站，2012年11月新浪注册用户已突破4亿。</h3>
</div>
<a href="http://www.sina.com.cn" target="_blank">
<img src="img/button.png" border="0" align="left"></a>
</div>
<div class="toolbar4" οnmοuseοver="printMsg('imgBox4');" οnmοuseleave="hideMsg('imgBox4');">
<div id="imgBox4" style="display: none;max-width: 300px;"">
<h3 style="color: red;">深圳市腾讯计算机系统有限公司成立于1998年11月[1] ，由马化腾、张志东、许晨晔、陈一丹、曾李青五位创始人共同创立。[1] 是中国最大的互联网综合服务提供商之一，也是中国服务用户最多的互联网企业之一。[2] </h3>
</div>
<a href="http://www.qq.com" target="_blank">
<img src="img/button.png" border="0" align="left"></a>
</div>
</li>
</ul>
<script>
function printMsg(id) {
$("#" + id).show("slow");
};
function hideMsg(id) {
$("div[id^='imgBox']").hide();
}
</script>
</body>
</html>
扫一扫
2378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
