动态创建Div层

[ws_hgo]

下面是个表格
编号 姓名
2 ws_hgo2
3 ws_hgo3
4 ws_hgo4
当我的鼠标划到ws_hgo2的时候
在ws_hgo2上面就有个Div层,里面有图片,描述等信息
鼠标离开的时候,Div层消失

同理鼠标划到ws_hgo3,ws_hgo4一样！

[s_liangchao1s]

<style>
#otbl {
	border: 1px solid #8F8F8F;
	border-collapse: collapse;
}
#otbl td {
	border: 1px solid #8F8F8F;
	width: 60px;
	height: 30px;
}
#odiv {
    width:200px;
    height:100px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;
}

</style>
<script type="text/javascript">
<!--
 var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
 var CancelBubble = function(e){
    var e = e || window.event;
    try{
        e.cancelBubble = true;
    }catch(ex){
        try{
            e.stopPropagation();
        }catch(e){}
    }
 }

 var getTarget = function(e){
    return e.srcElement || e.target;
 }

 var absPosition = function(element){
    var iTop = iLeft = 0;
    do{
        iTop += element.offsetTop;
        iLeft += element.offsetLeft;
    }while(element = element.offsetParent);
    return {'x': iLeft, 'y': iTop};
 }
 function showTip(e, obj){
        CancelBubble(e);
        var e = e || window.event
        var otarget = getTarget(e);
        $("odiv").style.display = "block";

        with($("odiv").style){
            display="block";top=absPosition(otarget).y+"px";left=(absPosition(otarget).x+otarget.offsetWidth)+"px";
        }
		$("odiv").innerHTML = obj.innerText || obj.textContent;
        document.onmouseover = function(){
            $("odiv").style.display = "none";
            document.onmouseover = null;
        }
        $("odiv").onmouseover = function(e){
            var e = e || window.event;
            CancelBubble(e);
        }

 }
//-->
</script>

<table id="otbl">
	<thead>
		<tr>
			<th>编号</th>
			<th>姓名</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2</td>
			<td onmouseover="showTip(event, this)">ws_hgo2 </td>
		</tr>
		<tr>
			<td>3</td>
			<td onmouseover="showTip(event, this)">ws_hgo3</td>
		</tr>
		<tr>
			<td>4</td>
			<td onmouseover="showTip(event, this)">ws_hgo4</td>
		</tr>
	</tbody>
</table>

<div id="odiv">

</div>

[KK3K2005]

基本每天都可以见到一个这样的问题

[xinyung]

更改一下位置就行了，借用1楼代码（未判断边界）

<style>
#otbl {
    border: 1px solid #8F8F8F;
    border-collapse: collapse;
}
#otbl td {
    border: 1px solid #8F8F8F;
    width: 60px;
    height: 30px;
}
#odiv {
    width:200px;
    height:100px;
    border: 2px solid #D0D0D0;
    background-color:#fff;
    position:absolute;
    display:none;
}

</style>
<script type="text/javascript">
<!--
 var $ = function(id) { return "string" == typeof id ? document.getElementById(id) : id };
 var CancelBubble = function(e){
    var e = e || window.event;
    try{
        e.cancelBubble = true;
    }catch(ex){
        try{
            e.stopPropagation();
        }catch(e){}
    }
 }

 var getTarget = function(e){
    return e.srcElement || e.target;
 }

 var absPosition = function(element){
 		var el = element;
    var iTop = iLeft = 0;
    do{
        iTop += element.offsetTop;
        iLeft += element.offsetLeft;
    }while(element = element.offsetParent);
    return {'x': iLeft - $("odiv").offsetWidth/2 - el.offsetWidth/2, 'y': iTop - $("odiv").offsetHeight};
 }
 function showTip(e, obj){
        CancelBubble(e);
        var e = e || window.event
        var otarget = getTarget(e);
        $("odiv").style.display = "block";

        with($("odiv").style){
            display="block";top=absPosition(otarget).y+"px";left=(absPosition(otarget).x+otarget.offsetWidth)+"px";
        }
        $("odiv").innerHTML = obj.innerText || obj.textContent;
        document.onmouseover = function(){
            $("odiv").style.display = "none";
            document.onmouseover = null;
        }
        $("odiv").onmouseover = function(e){
            var e = e || window.event;
            CancelBubble(e);
        }

 }
//-->
</script>
<br/><br/><br/><br/><br/><br/>
<table id="otbl" align="center">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2</td>
            <td onmouseover="showTip(event, this)">ws_hgo2 </td>
        </tr>
        <tr>
            <td>3</td>
            <td onmouseover="showTip(event, this)">ws_hgo3</td>
        </tr>
        <tr>
            <td>4</td>
            <td onmouseover="showTip(event, this)">ws_hgo4</td>
        </tr>
    </tbody>
</table>

<div id="odiv">

</div>

[ws_hgo]

感谢1楼兄弟写的代码
我的Div层是在鼠标划过的地方上面显示Div而不是右边

[yw1386]

学习了

[mingfish]

路过，超强的代码啊

[ws_hgo]

谢谢7楼的代码
还是有问题
当我鼠标离开的时候Div层并没有消失

[ziyuanxian]

因为没有onmouseout

[ws_hgo]

UP

[xinyung]

[Quote=引用 8 楼 ws_hgo 的回复:]
谢谢7楼的代码
还是有问题
当我鼠标离开的时候Div层并没有消失
[/Quote]
IE FF下可以消失

[ws_hgo]

UP

[ws_hgo]

我的那个值根据鼠标滑过去的值传给后台
根据值获取信息返回给
Div的innerHTML

但是上面
我测试了的达不到相应的效果
感觉写复杂啦

[kaizi_sun]

   
    function showTip(oEvent){
    var oDiv = document.getElementById("divTip1");
    oDiv.style.visibility="visible";
    oDiv.style.left = oEvent.clientX-25;
    oDiv.style.top =oEvent.clientY-35;
    }
    function hideTip(oEvent){
     var oDiv = document.getElementById("divTip1");
     oDiv.style.visibility = "hidden";
     }     }

<body>
<p>Move your mouse over the red square. </p>
<div id="div1"
      style="background-color:Red;height:50px;width:50px"
      onmouseover="showTip(event)" onmouseout="hideTip(event)"></div>
 <div id="divTip1"
       style="background:yellow; position:absolute; visibility:hidden; padding: 5px">
       <span style="font-weight:bold">Custom Tooltip</span><br /></div>
</body>

divTip1里面内容自己动态绑定。这个是书上的例子，看下合适你的需求吗

[yuxia1314741]

up

[wuzhilon88]

<script language=javascript>
function f_creatediv(divcnt){
for(var i=0;i<divcnt;i++){
var objdiv = document.createElement("DIV");
var objname="shop_" + i
objdiv.id = objname;
objdiv.style.top = 100 * i + 100;
objdiv.style.left = 100 * i + 100;
objdiv.style.background = '#FFFF00';
objdiv.style.visibility = 'visible';
objdiv.style.width = 100;
objdiv.style.height = 80;
objdiv.style.border = "5 groove black";
objdiv.innerHTML="SHOP_" + i;
document.body.appendChild(objdiv);
document.getElementById(objname).onmouseover = function()
{
alert(this.id);
};
}
}
</script>
<input type="button" onclick="f_creatediv(4)">