下面是小图,点一下上面就会出现大图

http://bbs.blueidea.com/thread-2846567-1-1.html



<!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 http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
img
{ cursor:pointer}
#big img
{ width:100px; height:100px;}
</style>
</head>
<body>
<script type="text/javascript">
function change(a){
var bigpic = document.getElementById("bigpic");
if (a ==1){bigpic.setAttribute("src","http://www.chenbincb.com.cn/cnblogs/images/smile.gif")}
if (a ==2){bigpic.setAttribute("src","http://www.chenbincb.com.cn/cnblogs/images/frown.gif")}
if (a ==3){bigpic.setAttribute("src","http://www.chenbincb.com.cn/cnblogs/images/tongue.gif")}
}

</script>
<div id="big">
<img src="http://www.chenbincb.com.cn/cnblogs/images/smile.gif" alt="" id="bigpic">
</div>
<img src="http://www.chenbincb.com.cn/cnblogs/images/smile.gif" alt="" onclick="change(1)">
<img src="http://www.chenbincb.com.cn/cnblogs/images/frown.gif" alt="" onclick="change(2)">
<img src="http://www.chenbincb.com.cn/cnblogs/images/tongue.gif" alt="" onclick="change(3)">
</body>
</html>
原文地址:https://www.cnblogs.com/CB/p/1154254.html