HTML 中图片的隐藏与显示
2013-10-31 16:51
288 查看
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="axon">
<img src='../0.jpg' id='img1' class="axon" width="120px;" /><br />
<img src='../0(1).jpg' id='img2' class="axon" /><br />
<img src='../0(2).jpg' id='img3' class="axon" /><br />
</div>
</body>
<script type="text/javascript">
var Con = document.body;
var Re = /(<img\s+.*?>)/gi;
Con.innerHTML = Con.innerHTML.replace(Re, "<a onclick='ControlImg(this);'><span style='font-size:12px;color:blue;'><u>显示图片</u></span></a><span class='imgs' style='display:none'><br/>$1</span>");//这里的abc.com可以换成你要的网址
function ControlImg(nowEle) {
var nextEle = nowEle.nextSibling;
if (nextEle.style.display == "none") {
nowEle.innerHTML = "<span style='font-size:12px;color:blue;'><u>隐藏图片</u></span>";
nextEle.style.display = "block";
}
else {
nowEle.innerHTML = "<span style='font-size:12px;color:blue;'><u>显示图片</u></span>";
nextEle.style.display = "none";
}
}
</script>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="axon">
<img src='../0.jpg' id='img1' class="axon" width="120px;" /><br />
<img src='../0(1).jpg' id='img2' class="axon" /><br />
<img src='../0(2).jpg' id='img3' class="axon" /><br />
</div>
</body>
<script type="text/javascript">
var Con = document.body;
var Re = /(<img\s+.*?>)/gi;
Con.innerHTML = Con.innerHTML.replace(Re, "<a onclick='ControlImg(this);'><span style='font-size:12px;color:blue;'><u>显示图片</u></span></a><span class='imgs' style='display:none'><br/>$1</span>");//这里的abc.com可以换成你要的网址
function ControlImg(nowEle) {
var nextEle = nowEle.nextSibling;
if (nextEle.style.display == "none") {
nowEle.innerHTML = "<span style='font-size:12px;color:blue;'><u>隐藏图片</u></span>";
nextEle.style.display = "block";
}
else {
nowEle.innerHTML = "<span style='font-size:12px;color:blue;'><u>显示图片</u></span>";
nextEle.style.display = "none";
}
}
</script>
</html>
相关文章推荐
- html先显示一张图片2秒后自动隐藏,用在游戏显示logo中
- Android TextView 显示HTML加图片
- webView接入本地html图片 解决不显示问题
- [Android]Html.from()中ImageGetter异步加载并显示图片和替换标签处理效果
- android的TextView使用Html(图片显示)格式
- HTML:把两张图片并排(行)显示
- 在HTML中显示中文名的图片
- 使用LevelListDrawable实现Html.fromHtml多张图片显示
- Android的TextView使用Html来处理图片显示、字体样式、超链接等
- login界面,判断是否是最后一个图片,如果不是则隐藏,是则显示
- TextView显示html图片点击图片放大等操作
- Html显示内存图片
- HTML Button 背景图片样式作为按钮显示
- 在html中,怎么设置背景图片不重复不平铺,只显示一张图片
- excel 转pdf html 图片显示问题
- asp.net mvc 使用Html.ActionLink显示图片链接
- html点击文字显示图片
- html截取显示部分的img图片
- HTML显示默认图片实现
- HTML基础——网站图片显示页面