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" onmouseover="showTip()" onmouseout="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 onclick="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>