怎么在一个图片上，显示另一个小图片? (挡住就行)

accomp 2009-03-16 02:47:30
上周问过的老问题 。今天重新整 。

  <div class="left">

                                                                    <div id="back_human" class="left1">

                                                                        <img src="/img/human1.gif" width="200" height="200" id="bui1" name="bui1" runat=server galleryimg="no" />

                                                                        <img src="/img/maru.gif" width="16" height="18" alt="受傷部位" id="maru1" class="maru" /></div>.......

</div>>

页面上有个人形图，human1.gif，当在人形图上点击时 ，"受傷部位"的小图，maru.gif要显示出来 ，显示在鼠标点击的位置 ， 都有什么好的解决方法么 ？

请给出代码 ，100分 ， 每个方案都有分 ，要是方案多 ，选用的再额外加分 。
...全文
219 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
accomp 2009-03-17
  • 打赏
  • 举报
 回复
chinmo ,这贴分就给别人了 ,你的那有专门100分.
一把编程的菜刀 2009-03-16
  • 打赏
  • 举报
 回复
也发现12楼非常聪明

呵呵
能很快从我给的例子里结合到他的程序里去

LZ应该多学习学习他

Sky_666 2009-03-16
  • 打赏
  • 举报
 回复
回帖是一种美德！每天回帖即可获得 10 分可用分！
一把编程的菜刀 2009-03-16
  • 打赏
  • 举报
 回复
呵呵
12楼结合我5楼的给的例子，结合的很好
accomp 2009-03-16
  • 打赏
  • 举报
 回复
to Free_Wind22
测试好用 ， 我结合我代码改下 。

多放一会 ，让大家看看你的方法哈 ，回头结帖 。

3Q 。
囧 2009-03-16
  • 打赏
  • 举报
 回复
那就用相对位置, 这个可以.



<!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=gb2312" />

<title>无标题文档</title>

<style type="text/css">

.left1{

	position:relative;

}

.maru{

	display:none; position:absolute;

}

</style>

<script type="text/javascript">

function $(id){

	return document.getElementById(id);

}

function getOffset (obj){

	var x = 0, y = 0;

	do{

		x += obj.offsetLeft;

		y += obj.offsetTop;

		

		obj = obj.offsetParent;

	}while(obj);

	return {x:x, y:y};

};

window.onload = function(){

	$("bui1").onclick = function(oEvent){

		oEvent = oEvent || window.event;

		$("maru1").style.display = "block";

		var parentOffset = getOffset($("back_human"));

		var eventX, eventY;

		if(document.all){

			eventX = document.body.scrollLeft + oEvent.clientX;

			eventY = document.body.scrollTop + oEvent.clientY;

		}else{

			eventX = oEvent.pageX;

			eventY = oEvent.pageY;

		}

		$("maru1").style.left = eventX - parentOffset.x - 2 + "px";

		$("maru1").style.top = eventY - parentOffset.y - 2 + "px";

	};

};

</script>

</head>



<body>

	<div class="left">

    	.......

        <div id="back_human" class="left1">

            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" width="200" height="200" id="bui1" name="bui1" runat=server galleryimg="no" />

            <img src="http://www.google.cn/intl/zh-CN/options/icons/finance.gif" width="16" height="18" alt="受傷部位" id="maru1" class="maru" />

        </div>.......

	</div>

</body>

</html>
一把编程的菜刀 2009-03-16
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 accomp 的回复:]
问题的难点 ，不是怎么显示小图片 ，而是怎么把小图片显示在div上， 从而达到 在 显示 中改变 文字大小 ，
2个图片的相对位置不变 。
[/Quote]
不是相对位置，而是绝对位置

请看5楼说明
一把编程的菜刀 2009-03-16
  • 打赏
  • 举报
 回复
[Quote=引用 7 楼 accomp 的回复:]
2楼3楼 ：
你们的方法是好用，但是小图片的坐标是基于页面的 ，而不是基于 <div class="left"> 和 <div id="back_human" class="left1">的 。
如果用IE浏览器 ，我在显示中的文字大小变更，改变文字大小 ，那么2个图片的相对位置就和原来不一样了 。这个问题怎么解决 。
[/Quote]

请看我5楼的说明
accomp 2009-03-16
  • 打赏
  • 举报
 回复
问题的难点 ，不是怎么显示小图片 ，而是怎么把小图片显示在div上， 从而达到 在 显示 中改变 文字大小 ，
2个图片的相对位置不变 。
liuhua19841201 2009-03-16
  • 打赏
  • 举报
 回复
放在两个div里面 用z-index属性设置那个显示高点
accomp 2009-03-16
  • 打赏
  • 举报
 回复
2楼3楼 ：
你们的方法是好用，但是小图片的坐标是基于页面的 ，而不是基于 <div class="left"> 和 <div id="back_human" class="left1">的 。
如果用IE浏览器 ，我在显示中的文字大小变更，改变文字大小 ，那么2个图片的相对位置就和原来不一样了 。这个问题怎么解决 。
luojihaidao 2009-03-16
  • 打赏
  • 举报
 回复
都不错， 还兼容！
一把编程的菜刀 2009-03-16
  • 打赏
  • 举报
 回复
你的这个主要关键在于取小图片在打图片上的绝对位置

这个记得之前讨论过了

你的关键问题于
http://topic.csdn.net/u/20090302/20/de07a679-054b-4b4e-b0c5-6f90e2f30e39.html
是一样的
accomp 2009-03-16
  • 打赏
  • 举报
 回复
原来的js写法 ：
function addKizu(i, e) {

    var $no = $('#no' + i);

    if ($no.val() > (5 * i)) {

        return;

    }

    $('#maru' + $no.val()).css({

        'left'    : (e.pageX - 8) + 'px',

        'top'     : (e.pageY - 9) + 'px',

        'display' : 'block'

    });

    $no.get(0).value++;

}



$(function() {

    $('#no1').val(1);

    $('#no2').val(6);

    $('#bui1').click(function(e) {

        addKizu(1, e);

    });

    $('#bui2').click(function(e) {

        addKizu(2, e);

    });

});

但这个是小图片相对于整个页面的位置 ，不适用 。
囧 2009-03-16
  • 打赏
  • 举报
 回复 




<!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=gb2312" />

<title>无标题文档</title>

<style type="text/css">

.maru{

	display:none; position:absolute;

}

</style>

<script type="text/javascript">

function $(id){

	return document.getElementById(id);

}

window.onload = function(){

	$("bui1").onclick = function(oEvent){

		oEvent = oEvent || window.event;

		$("maru1").style.display = "block";

		var eventX, eventY;

		if(document.all){

			eventX = document.body.scrollLeft + oEvent.clientX;

			eventY = document.body.scrollTop + oEvent.clientY;

		}else{

			eventX = oEvent.pageX;

			eventY = oEvent.pageY;

		}

		$("maru1").style.left = eventX - 2 + "px";

		$("maru1").style.top = eventY - 2 + "px";

	};

};

</script>

</head>



<body>

	<div class="left">

        <div id="back_human" class="left1">

            <img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" width="200" height="200" id="bui1" name="bui1" runat=server galleryimg="no" />

            <img src="http://www.google.cn/intl/zh-CN/options/icons/finance.gif" width="16" height="18" alt="受傷部位" id="maru1" class="maru" />

        </div>.......

	</div>

</body>

</html>
sd5816690 2009-03-16
  • 打赏
  • 举报
 回复 


<html>

<head>

<script language="javascript">

function init(){

	document.getElementById("bui1").onclick=function(e){

		e = e || window.event;

		var smallpic = document.getElementById("maru1");

		smallpic.style.top = (e.y || e.pageY);

		smallpic.style.left = (e.x || e.pageX);

		smallpic.style.display = "block";

	}

}

</script>



</head>



<body onload="init()">

<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" width="200" height="200" id="bui1" name="bui1" galleryimg="no"/>

<img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" style="position:absolute;display:none;" width="16" height="18" alt="受傷部位" id="maru1" class="maru" />

</body>

</html>
lichong876140 2009-03-16
  • 打赏
  • 举报
 回复
可以把human1.gif设置成一个DIV的背景，用JS写DIV的onclick事件。
初始化时图片的display为不显示，点击DIV后显示图片。
javaScript easyUI实现 图片预览功能（鼠标移动到图片上 显示大图在旁边）
最近博主在写一个上传图片的界面，然后想到了这样一个需求，就是，当图片在界面上显示时，有些图片由于博主加了限制显示图片的尺寸，看起来很小，无法看到细节。  因此博主想实现这样一个功能，就是当鼠标移动到...
【菜鸟手打js】@弹出遮罩层显示大图之一
需求：页面上有图片列表，排列显示产品小图片，希望点击时像QQ空间查看相片一样出一个遮罩层，显示大图出来。 分析： 1.需要一个小图点击事件，触发遮罩层的显示。 2.遮罩层默认隐藏，用绝对定位，完全挡住页面...
html图片去除边框,CSS去掉图片img边框及如何防止图片撑破DIV
我们常常会遇到以下情况：1、img图片多了边框，特别是链接后的图片带边框2、图片超出撑破DIV查看 CSS设置图片宽度高度下面我们通过CSS来解决这2个问题。1、img图片多了边框，特别是链接后的图片带边框有边框的图片...
PPT多个图片重叠但不覆盖的做法
1.选中图形或图片，右击，选择设置形状格式，在右侧填充里将透明度或不透明度调至50% 2.如果没有出现想要得效果，那就是这些图片叠放顺序问题，同样，选择设置了透明度的图形，右击，选择置于顶层即可 ...
使用CSS3书写多背景时注意的问题
在CSS3中 我们可以添加多背景 就是多重背景叠加的效果 常用在背景 按钮 等图片上面 比如按钮上面的某个小图片不同 但是按钮整个背景是一样的 例(ps：例子可能不太好,因为小图片插入进去也可以，不一定非要用多背景...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章