JS怎么把一张图片隐藏在另一整张图片的一部分里，点击后会展开或者弹出，然后可以在这张图片选择连接?
展开全部
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<!--
设置css样式
-->
<style type="text/css">
.abc{
width: 500px;
height: 500px;
background: url('2.jpg');
position: relative;
}
.abc img{
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<!---
给document元素注册监听
具体的操作看http://jingyan.baidu.com/article/19192ad8364f61e53e5707ab.html
-->
<script type="text/javascript">
$(function(){
$(".abc > img").click(function(){
$(".abc").html("<img src='3.jpg' width='500' height='500' />")
});
});
</script>
</head>
<body>
<div class="abc">
<img src="1.jpg" width="100" height="100" />
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<!--
设置css样式
-->
<style type="text/css">
.abc{
width: 500px;
height: 500px;
background: url('2.jpg');
position: relative;
}
.abc img{
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<!---
给document元素注册监听
具体的操作看http://jingyan.baidu.com/article/19192ad8364f61e53e5707ab.html
-->
<script type="text/javascript">
$(function(){
$(".abc > img").click(function(){
$(".abc").html("<img src='3.jpg' width='500' height='500' />")
});
});
</script>
</head>
<body>
<div class="abc">
<img src="1.jpg" width="100" height="100" />
</div>
</body>
</html>
追问
能用我上传的图片做给我看看吗？我直接套用，如果行立马给分，谢谢。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
到w3c找到显示与隐藏就行，特别容易 ，就两行代码,
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});这是jQuery的
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});这是jQuery的
追问
我对代码不懂，我画图了，正常显示是A图，鼠标移到或点C图时会出现B图，同时B图覆盖A图，这时就可以在B图上操作了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果你能画出图来的话我就可以帮你实现这个功能！现在看不太懂你的需求~
更多追问追答
追问
点C就可以实现B在A图上显示，现在你看懂了吧?
追答
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
.abc{
width: 500px;
height: 500px;
background: url('2.jpg');
position: relative;
}
.abc img{
position: absolute;
bottom: 0px;
right: 0px;
}
</style>
<script type="text/javascript">
$(function(){
$(".abc > img").click(function(){
$(".abc").html("<img src='3.jpg' width='500' height='500' />")
});
});
</script>
</head>
<body>
<div class="abc">
<img src="1.jpg" width="100" height="100" />
</div>
</body>
</html>
自己改一下图片的路径就可以了~这个就是你要的效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
