带阴影效果的链接提示

答案：<!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>一个链接提示</title>
<style type="text/css">
#dhtmltooltip{
position: absolute;
left: -300px;
width: 150px;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
#dhtmlpointer{
position:absolute;
left: -300px;
z-index: 101;
visibility: hidden;
}

</style>
<script language="javascript">
if (window.Event) 
  document.captureEvents(Event.MOUSEUP); 
 
function nocontextmenu()
{
 event.cancelBubble = true
 
 alert("IE");
 event.returnValue = false;
 return false;
}
 
function norightclick(e) 
{
 if (window.Event) 
 {
  if (e.which == 2 || e.which == 3)//FF
  //	
   alert("FF");
   e.preventDefault();
   return false;
 }
}
document.oncontextmenu =norightclick;  // for IE5+
document.onmousedown = nocontextmenu;   // for all others
</script>
<script type="text/javascript">
var offsetfromcursorX=12
var offsetfromcursorY=10
var offsetdivfrompointerX=10
var offsetdivfrompointerY=14
document.write('<div id="dhtmltooltip"></div>')
document.write('<img id="dhtmlpointer" src="">')
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thewidth, thecolor){
   if (ns6||ie){
      if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px";
      if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor;
      tipobj.innerHTML=thetext;
      enabletip=true;
      return false
   }
}

function positiontip(e){
   if (enabletip){
      var nondefaultpos=false;
      var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
      var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
      var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20;
      var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20;
      var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX;
      var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY;
      var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000;
      if (rightedge<tipobj.offsetWidth){
         tipobj.style.left=curX-tipobj.offsetWidth+"px";
         nondefaultpos=true
      }
      else if (curX<leftedge)
         tipobj.style.left="5px";
      else{
          tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px";
          pointerobj.style.left=curX+offsetfromcursorX+"px";
		 }
      if (bottomedge<tipobj.offsetHeight)
	  {
          tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px";
          nondefaultpos=true;
       }
      else
	  {
          tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px";
          pointerobj.style.top=curY+offsetfromcursorY+"px";
	   }
      tipobj.style.visibility="visible";
      if (!nondefaultpos)
         pointerobj.style.visibility="visible";
      else
         pointerobj.style.visibility="hidden";
    }
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
pointerobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
</head>
<body>
<a onclick="ddrivetip('JavaScriptKit.com JavaScript tutorials', 300)" >鼠标放在这里</a>
<a href="http://www.zzzyk.com" onMouseover="ddrivetip('浏览站长资源库')";
 onMouseout="hideddrivetip()">Search Engine</a>
 <div onMouseover="ddrivetip('Yahoo\'s Site', 250)";
 onMouseout="hideddrivetip()">This is a DIV. This is a DIV.</div>
</body>
</html>
上一个：再发一个实现字体大中小方法的JavaScript代码
下一个：jQuery点击变色的效果
更多图片编程知识: