<!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>offsetLeft探讨</title>
<style type="text/css">
#divTest
{
width:600Px;
border:6px solid #393; }
*
{
margin:0;
padding:0;
}
html
{
background-color:#fff;
}
body
{
text-align:center;
width:1000px;
padding:50px 0;
background-color:#efeede;
border:5px solid red;
/*margin:5px 8px;*/
}
</style>
</head> <body>
<div id="divTest">
<div id="dd">呵呵</div>
<img id="pic" alt="" src="d:\gg.gif" />
</div>
</body>
<script type="text/javascript">
var elemTest=document.getElementById('pic');
document.write('<span id="idName" style="font-size:larger;position:absolute;left:'+(elemTest.offsetLeft)+'px;top:'+(elemTest.offsetTop)+'px" )">');
document.write('stationInfo.Rows[i][3');
document.write('</span>');
</script>
</html> 改一下图片链接就可以看效果
图片不要太大,宽度小于400,效果比较明显
我想把文字写在图片的左上角
怎么写得位置不对
需要怎么改,谢谢
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>offsetLeft探讨</title>
<style type="text/css">
#divTest
{
width:600Px;
border:6px solid #393; }
*
{
margin:0;
padding:0;
}
html
{
background-color:#fff;
}
body
{
text-align:center;
width:1000px;
padding:50px 0;
background-color:#efeede;
border:5px solid red;
/*margin:5px 8px;*/
}
</style>
</head> <body>
<div id="divTest">
<div id="dd" style="z-index: 99; position: absolute; top: 20; left: 30;">呵呵</div>
<div id="ddd" style="z-index: 99; position: absolute;">呵呵s</div>
<img id="pic" alt="" src="http://avatar.profile.csdn.net/9/7/A/2_ibm_hoojo.jpg" />
</div>
</body>
<script type="text/javascript">
var elemTest=document.getElementById('pic');
alert(elemTest.offsetLeft);
alert(elemTest.offsetTop);
document.write('<span id="idName" style="font-size:10;z-index: 9999;position:absolute;left:'+(elemTest.offsetLeft+200)+'px;top:'+(elemTest.offsetTop+50)+'px;">');
document.write('stationInfo.Rows[i][3');
document.write('</span>');
</script>
</html>