html点击文字显示图片

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

代码：

<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>

html点击文字显示图片相关推荐

html单击图片效果显示,html点击文字显示图片
这个是网页显示,图片是不需要下载的. 代码: 点击文字显示图片 ul { width: 400px; height: 600px; border-style: solid; border-width: ...
Android之按钮点击事件——显示图片隐藏图片
哈喽!时隔两个月,我又和大家见面啦! 今天,我要分享的内容一如既往的很基础,即关于Android的按钮点击事件--显示图片&&隐藏图片,它的执行过程比较简单,所以这里我就不放什么图片或 ...
python gui按顺序显示图片_python tkinter GUI绘制,以及点击更新显示图片代码
tkinter 绘制GUI简单明了,制作一些简单的GUI足够,目前遇到的一个问题是不能同时排列显示多幅图片(目前没找到同时显示解决方法), 退而求其次,改成增加一个update按钮,每次点下按钮自动更 ...
html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景 ...
android点击按钮弹出图片,用android做的一个简单的点击按钮显示图片的程序
其实,在这之前我已经做了一个点击按钮的小程序,只不过它只是用来在界面上显示一些文字或者是用一个对话框来显示内容.按理说,做显示图片应该是不会有太大的问题了,可是问题还是来了.在我把这些个问题解决之后, ...
Tkinter(二) ｜点击按钮显示图片
解决办法: 出现的问题 from tkinter import * from PIL import Image, ImageTkroot = Tk() root.title('按钮点击加载图片') d ...
html 文字显示图片左侧,CSS_如何让文字环绕图片显示？
总得来说,文字环绕图片显示的实现方式有这样两种: 通过img的 align 属性, 设置img的停靠位置,文字会环绕显示: 给img单独加一个父级div容器,设置css属性:float:left ; ...
python gui如何输入图片_python tkinter GUI绘制,以及点击更新显示图片代码
tkinter 绘制GUI简单明了,制作一些简单的GUI足够,目前遇到的一个问题是不能同时排列显示多幅图片(目前没找到同时显示解决方法), 退而求其次,改成增加一个update按钮,每次点下按钮自动更 ...
ppt点击文字出现图片,再次点击消失
实现效果:在PPT一个页面的任意位置,单击左键,出现图片:在图片上,单击左键,图片消失实现思路:给图片做两个动画,一个进入,文字作触发器,另一个退出,图片本身为触发器. 实现方法: 1.选中图片-- ...

html点击文字显示图片

html点击文字显示图片相关推荐

最新文章

热门文章