javascript DOM应用-自定义鼠标提示及可折叠区域

  刚学javaScript不久，看到有两个有趣的DOM应用，一个是自定义鼠标提示，另一个是可折叠区域，不多说，先看看(请使用IE浏览器)：

 

  1、自定义鼠标提示。

  一般通过title属性，可以提供普通的文本鼠标提示，但是，仅有文本鼠标提示，可能还不够，我们想加入更多的元素，使它更酷！

  javascript代码：

//显示提示(divTip是要显示提示元素的id)

function showTip(){
 var odiv=document.getElementById("divTip");
 odiv.style.visibility="visible";
 odiv.style.left=window.event.clientX+5;
 odiv.style.top=event.clientY+5;
 }

function hiddenTip(){
 var odiv=document.getElementById("divTip");
 odiv.style.visibility="hidden";
 }

 

 body部分：

<div id="div1" style="background-color:red;height:50px;width:50px" οnmοuseοver="showTip()" οnmοuseοut="hiddenTip()">鼠标经过此</div>

 2、可折叠区域

<div id="divTip" style="background-color:yellow;position:absolute;visibility:hidden;padding:5px">

<span style="font-weight:bold"> 自定义鼠标提示</span><br />
更多信息(还可以加入图片)
<a href="http://www.baidu.com" ><img src="eye.gif"/></a>
</div>

 

 

 

 

---

 

 

 

   使用简单的技术，就可在网页上创建可折叠区域，代码如下

   javascript部分：

 

function toggle(sDivId){
  var oDiv=document.getElementById(sDivId);
  //oDiv.style.display=(oDiv.style.display=="none")?"block":"none";
  var ob=document.getElementById("control");
 if(oDiv.style.display=="none"){
 
  ob.innerText="显示";
  oDiv.style.display="block";
 }
 else{
  ob.innerText="隐藏";
  oDiv.style.display="none";
 }
}

 

body部分：

 

<div οnclick="toggle('Div')" style="cursor:pointer" id="control">隐藏</div>
<div style="border:1px solid #fefefe;height:100px;padding:10px;margin:10px"  id="Div">
显示内容
</div>
<div>out</div>