在javascript中编写代码使其实现点击图片显示另外一张大图 点击大图关闭该大图
我又四张图分别放在一个表格中我想分别点击这四张图分别在网页中显示另外四张图在同一个地方显示且有关闭的功能...
我又四张图 分别放在一个表格中 我想分别点击这四张图 分别在网页中显示另外四张图 在同一个地方显示 且有关闭的功能
展开
3个回答
展开全部
<script type="text/javascript">
function show(url){
document.getElementById("myimg").src=url;
document.getElementById("imgtab").style.display="";
}
function closeimg(){
document.getElementById("imgtab").style.display="none";
}
</script>
<body>
<center>
<table ><tr><td><img src="http://list.image.baidu.com/t/image_category/galleryimg/face/katong/you_xh.gif" onclick="show
(this.src)" width="50px" height="50px"></td><td><img
src="http://list.image.baidu.com/t/image_category/galleryimg/face/katong/sun_wk.gif" onclick="show(this.src)" width="50px"
height="50px"></td>
<td><img src="http://list.image.baidu.com/t/image_category/galleryimg/face/katong/xiao_ph.gif" onclick="show(this.src)"
width="50px" height="50px"></td>
<td><img src="http://list.image.baidu.com/t/image_category/galleryimg/face/katong/huo_yrz.gif" onclick="show(this.src)"
width="50px" height="50px"></td>
</tr>
</table>
<table id="imgtab" style="display:none;"><tr><td alitn="right" ><a onclick="closeimg()">关闭</a></td></tr>
<tr><td></td></tr><img src="" id="myimg"></table><center>
</body>
function show(url){
document.getElementById("myimg").src=url;
document.getElementById("imgtab").style.display="";
}
function closeimg(){
document.getElementById("imgtab").style.display="none";
}
</script>
<body>
<center>
<table ><tr><td><img src="http://list.image.baidu.com/t/image_category/galleryimg/face/katong/you_xh.gif" onclick="show
(this.src)" width="50px" height="50px"></td><td><img
src="http://list.image.baidu.com/t/image_category/galleryimg/face/katong/sun_wk.gif" onclick="show(this.src)" width="50px"
height="50px"></td>
<td><img src="http://list.image.baidu.com/t/image_category/galleryimg/face/katong/xiao_ph.gif" onclick="show(this.src)"
width="50px" height="50px"></td>
<td><img src="http://list.image.baidu.com/t/image_category/galleryimg/face/katong/huo_yrz.gif" onclick="show(this.src)"
width="50px" height="50px"></td>
</tr>
</table>
<table id="imgtab" style="display:none;"><tr><td alitn="right" ><a onclick="closeimg()">关闭</a></td></tr>
<tr><td></td></tr><img src="" id="myimg"></table><center>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员，对于Word文档生成PPT的操作，我们有以下建议：1. 使用另存为功能：在Word中编辑完文档后，点击文件->另存为，选择PowerPoint演示文稿（*.pptx）格式，即可将文档内容转换为PPT...
点击进入详情页
本回答由博思aippt提供
展开全部
不用那么麻烦，改成我写的：初始化隐藏用CSS，选择图片用函数，这样你可以任意增加图片
<style type="text/css">
.yincang
</style>
<script type="text/javascript">
function change(){
var name=document.form.Name.value;
var divs=document.getElementsByTagName("div");
var selName=document.getElementById("selName");
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
}
if(selName.selectedIndex!=0){
divs[selName.selectedIndex-1].style.display="block";
}
}
</script>
<body>
<form action="" method="post" name="form" id="form">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr style="font-size:24px; color:#0000FF " align="center"><td>精美人物图片选择</td></tr>
<tr style="font-size:12px; color:#FF0099; width:263" align="center" ><td>你要选择一张图片喔
<select id="selName" name="Name" onchange="change()">
<option >--选择人物</option>
<option value="我......">我......</option>
<option value="你......">你......</option>
<option value="她......">她......</option>
<option value="他......">他......</option>
</select></td></tr>
<tr><td>
<div id="divImg1" class="yincang" ><img src="images/thumb/3.jpg" width="199" height="148" /></div>
<div id="divImg2" class="yincang" ><img src="images/thumb/9.jpg" width="254" height="177" /></div>
<div id="divImg3" class="yincang" ><img src="images/thumb/12.jpg" width="250" height="176" /></div>
<div id="divImg4" class="yincang" ><img src="images/thumb/8.jpg" width="194" height="138" /></div>
</td></tr>
</table>
</form>
</body>
<style type="text/css">
.yincang
</style>
<script type="text/javascript">
function change(){
var name=document.form.Name.value;
var divs=document.getElementsByTagName("div");
var selName=document.getElementById("selName");
for(var i=0;i<divs.length;i++){
divs[i].style.display="none";
}
if(selName.selectedIndex!=0){
divs[selName.selectedIndex-1].style.display="block";
}
}
</script>
<body>
<form action="" method="post" name="form" id="form">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr style="font-size:24px; color:#0000FF " align="center"><td>精美人物图片选择</td></tr>
<tr style="font-size:12px; color:#FF0099; width:263" align="center" ><td>你要选择一张图片喔
<select id="selName" name="Name" onchange="change()">
<option >--选择人物</option>
<option value="我......">我......</option>
<option value="你......">你......</option>
<option value="她......">她......</option>
<option value="他......">他......</option>
</select></td></tr>
<tr><td>
<div id="divImg1" class="yincang" ><img src="images/thumb/3.jpg" width="199" height="148" /></div>
<div id="divImg2" class="yincang" ><img src="images/thumb/9.jpg" width="254" height="177" /></div>
<div id="divImg3" class="yincang" ><img src="images/thumb/12.jpg" width="250" height="176" /></div>
<div id="divImg4" class="yincang" ><img src="images/thumb/8.jpg" width="194" height="138" /></div>
</td></tr>
</table>
</form>
</body>
追问
可是 我只想要四张图片 是并排在网页中的 在一个表格中 我想实现的是 点击其中的一张图片 就可以在旁边显示另一个图片 且变大 点击这张大的图片就将这张大的图片隐藏起来了 要怎么做呢
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
像这个事，最简单且能解决问题的方式，就是去网上下一个js特效大全，也有flash的，肯定有你要的效果的，当然有可能不是完全吻合，但是你只要懂一些js，就可以通过修改搞定的，试试吧
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
