html点击文字显示图片

来源：互联网发布：非正式会谈oo的淘宝店编辑：程序博客网时间：2024/05/29 13:53

这个是网页显示，图片是不需要下载的。

代码：

<html><head><title>点击文字显示图片</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">ul {width: 400px;height: 600px;border-style: solid;border-width: 2px;border-color: #FF359A;border-style: solid;}li {list-style-type: none; /*去除列表符号*/position: relative; /*配合子标签使用*/}* { /*使所有的内容都紧靠在一起*/margin: 0px;padding: 0px;}img {width: 100px;height: 100px;display: block; /*图片保持显示状态*/}/*设置默认属性*/li:LINK {background-color: #28FF28;}li:VISITED {background-color: #0066CC;}li:HOVER {background-color: #FFC1E0;}li:ACTIVE {background-color: #d0d0d0;}/*设置关联属性*/#div_02 {display: none; /*初始不显示*/position: absolute; /*使图片脱离流*/left: 120px;top: 15px;}#div_02 img {display: block; /*一直显示*/}li:HOVER #div_02 {display: block; /*当鼠标悬停时，显示图片 */}</style></head><body><ul><li><div id="div_01">01 爱的纹身</div><div id="div_02"><img alt="图片不存在"src="http://imgcache.qq.com/music/photo/singer/54/singerpic_5554_0.jpg" /></div></li><li><div id="div_01">02 我还念的</div><div id="div_02"><img alt="图片不存在"src="http://imgcache.qq.com/music/photo/singer/9/singerpic_109_0.jpg" /></div></li><li><div id="div_01">03 累了</div><div id="div_02"><img alt="图片不存在"src="http://imgcache.qq.com/music/photo/singer/47/singerpic_6547_0.jpg" /></div></li><li><div id="div_01">04 漫漫 慢慢</div><div id="div_02"><img alt="图片不存在"src="http://imgcache.qq.com/music/photo/singer/61/singerpic_6361_0.jpg" /></div></li><li><div id="div_01">05 听,花期越来越近</div><div id="div_02"><img alt="图片不存在"src="http://imgcache.qq.com/music/photo/singer/33/singerpic_4733_0.jpg" /></div></li></ul></body></html>

1 0