2016-11-21
<!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" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>CSS3实现换图片</title> <meta name="keywords" content="关键字列表" /> <meta name="description" content="网页描述" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> /* 鼠标经过的时候触发的事件*/ table:hover{ background-image:url(jd2.png); /*换图片*/ } table{ transition:all 1s; /*触发延迟的时间为1秒*/ } </style> <script type="text/javascript"></script> </head> <body> <table width="160" height="170" background="jd1.png"> <tr> <td></td> </tr> </table> </body> </html>
上面是用CSS3实现的换图片
<!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" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>JavaScript实现换图片</title> <meta name="keywords" content="关键字列表" /> <meta name="description" content="网页描述" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"></style> </head> <body> <img src="jd1.png" id="ImgId"/> <script type="text/javascript"> var imgid = document.getElementById("ImgId"); imgid.onmouseover = function (){ ImgId.src="jd2.png"; } imgid.onmouseout = function (){ ImgId.src="jd1.png"; } </script> </body> </html>
上面是用JavaScript实现的 换图片