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

可以把human1.gif设置成一个DIV的背景，用JS写DIV的onclick事件。
初始化时图片的display为不显示，点击DIV后显示图片。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<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>
<!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>
原来的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);
    });
});
但这个是小图片相对于整个页面的位置，不适用。
你的这个主要关键在于取小图片在打图片上的绝对位置这个记得之前讨论过了你的关键问题于
http://topic.csdn.net/u/20090302/20/de07a679-054b-4b4e-b0c5-6f90e2f30e39.html
是一样的
2楼3楼  ：
你们的方法是好用，但是小图片的坐标是基于页面的，而不是基于 <div class="left"> 和 <div id="back_human" class="left1">的  。
如果用IE浏览器，我在显示中的文字大小变更，改变文字大小，那么2个图片的相对位置就和原来不一样了。这个问题怎么解决。
放在两个div里面用z-index属性设置那个显示高点
问题的难点，不是怎么显示小图片，而是怎么把小图片显示在div上，从而达到在显示中改变文字大小，
2个图片的相对位置不变。
那就用相对位置, 这个可以.
<!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>
to Free_Wind22
测试好用  ，  我结合我代码改下  。多放一会，让大家看看你的方法哈，回头结帖。3Q 。
chinmo ,这贴分就给别人了 ,你的那有专门100分.