如题,想做成类似google搜索http://www.google.cn/页面中鼠标移动到“视频”时,弹出一个对话框来介绍该链接的主要内容。只需要弹出个对话框即可。这段代码应该并不难,本人不懂网页编程,既然网页编程高手这么多,我也不必花时间学javascript,请大家帮个忙,帖出实现了的代码,我先帖出html框架。
<html>
<head>
<title>
Hello World
</title>
</head>
<body>
<address>
<a href="http://www.december.com/john/">Hello World</a>
</address>
</body>
</html>
<html>
<head>
<title>
Hello World
</title>
</head>
<body>
<address>
<a href="http://www.december.com/john/">Hello World</a>
</address>
</body>
</html>
<head><title>网页title</title><script language="javascript">
<!--
document.write('<div id="ShoshTitleDiv" style="position:absolute;padding:1 2 0 4;left:0;top:0;visibility:hidden;background:yellow;border:red 1px solid;color:black;font-size:9pt;font-face:宋体"></div>')
var tempTitle='';
var titleMaxWidth=300; //提示条最大宽度,单位像素,可以在这里改
function showShoshTitle()
{
if(tempTitle != "")
return;
tempTitle=event.srcElement.title;
if(!tempTitle|| tempTitle.replace(/ /ig,"") == "")
{
tempTitle="";
return;
}
var shoshTitle=document.getElementById("ShoshTitleDiv");
if(!shoshTitle)
return;
event.srcElement.title="";
with(shoshTitle.style)
{
width=0;
visibility='hidden';
wordWrap='normal';
whiteSpace='noWrap';
}
shoshTitle.innerHTML=tempTitle;
var mesWidth=shoshTitle.offsetWidth;
var mesHeight=shoshTitle.offsetHeight;
if(mesWidth>titleMaxWidth)
{
shoshTitle.style.width=titleMaxWidth;
mesWidth=titleMaxWidth;
}
else
shoshTitle.style.width=mesWidth;
if(mesWidth<=document.body.clientWidth-event.x-4)
shoshTitle.style.left=event.x+document.body.scrollLeft+4;
else if(mesWidth<=document.body.clientWidth)
shoshTitle.style.left=document.body.clientWidth-mesWidth+document.body.scrollLeft;
else
shoshTitle.style.left=document.body.scrollLeft;
var i=Math.floor(Math.random()*24);
with(shoshTitle.style)
{
top=event.y+document.body.scrollTop+18;
whiteSpace='normal';
wordWrap='break-word';
filter='revealTrans(transition='+i+',duration=0.5) blendTrans(duration=0.5)';
}
with(shoshTitle)
{
filters.revealTrans.apply();
style.visibility='visible';
filters.revealTrans.play();
}
}
function releaseTitle()
{
if(tempTitle=='')
return;
event.srcElement.title=tempTitle;
tempTitle='';
document.getElementById("ShoshTitleDiv").style.visibility='hidden';
}
function moveTitle()
{
var shoshTitle=document.getElementById("ShoshTitleDiv");
if(shoshTitle.innerHTML=='')
return;
if(shoshTitle.style.visibility=='visible')
{
var mesWidth=shoshTitle.offsetWidth;
var mesHeight=shoshTitle.offsetHeight;
if(mesWidth<=document.body.clientWidth-event.x-4)
shoshTitle.style.left=event.x+document.body.scrollLeft+4;
else if(mesWidth<=document.body.clientWidth)
shoshTitle.style.left=document.body.clientWidth-mesWidth+document.body.scrollLeft;
else
shoshTitle.style.left=document.body.scrollLeft;
shoshTitle.style.top=event.y+document.body.scrollTop+18;
}
}
document.onmouseover=showShoshTitle
document.onmouseout=releaseTitle
document.onmousemove=moveTitle
//by shosh: http://www.cnitblog.com/shosh/-->
</script></head>
<body>
<a href="" tartget=_blank title="点击此链接打开以前使用的blog" >去老blog逛逛</a>
<br><br><br><br><br>
<a href="" tartget=_blank title="点击此链接打开现在使用的blog" >去新blog逛逛</a>
</body>
</html>
<head>
<title>
Hello World
</title>
</head>
<body>
<address>
<a href="http://www.december.com/john/" onmouseover="alert(this.href)">Hello World </a>
</address>
</body>
</html>
<address>
<a href="http://www.december.com/john/" title="这是鼠标移上来时显示的提示信息">Hello World</a>
</address>
添加一个title属性就可以了,如上所示。
呵呵,其实不是什么东西都要学的,本人能力有限,不能在20~30分钟内把html和javascript的语法都掌握个基本把问题解决。只是我只需要做一下这个验证就行,我基本(或者说是根本)不涉及网页编程,这样你觉的我花N个小时学以后N个月都不会用的东西,这样划算么。本人能力有限,大致看完网上找的一篇《javascript教程》也没能做出这个效果,这样我为什么不问一下这里的高手们呢。我对html编程很陌生,但你们这些高手只要说句话,帖段代码就行了,我也是在我自己擅长的领域回答一下新手的问题啊,很多也是在我看来很简单,而对方找不到解决问题的方向的问题。
添加js
function ToolTip(c,info,w,h)
{
var container = document.getElementById(c);
if(container == null)
return;
if(info == null || info == '')
{
info = container.title;
if(info == '')
return;
else
container.setAttribute('title','');
}
w = (w == null) ? 150 : w;
h = (h == null) ? 50 : h;
this.create(container, info, w, h, this);
}
ToolTip.prototype =
{
pos:function(e)
{
var ie = document.all ? true : false;
var x = (ie)? event.clientX + document.body.scrollLeft-document.body.clientLeft:e.pageX;
var y = (ie)? event.clientY + document.body.scrollTop-document.body.clientTop:e.pageY;
this.t.style.left = (x-10) +'px';
this.t.style.top = (y+10) +'px';
this.s.style.left = (x-6) +'px';
this.s.style.top = (y+14) +'px';
},
display:function()
{
this.t.style.display = 'block';
this.s.style.display = 'block';
},
hide:function()
{
this.t.style.display = 'none';
this.s.style.display = 'none';
},
create:function(c, info, w, h, self)
{
var wrap = document.createElement('div');
var tip = document.createElement('div');
var shadow = document.createElement('div');
tip.style.width = w;
tip.style.height = h;
tip.style.position = 'absolute';
tip.style.display = 'none';
tip.style.backgroundColor= '#E9EFF4';
tip.style.border = '1px solid #C4D5E3';
tip.innerHTML = info;
tip.style.zIndex = 999;
shadow.style.width = w;
shadow.style.height = h;
shadow.style.position = 'absolute';
shadow.style.display = 'none';
shadow.style.backgroundColor= '#eee';
shadow.style.zIndex = 998;
document.body.appendChild(tip);
document.body.appendChild(shadow);
this.t = tip;
this.s = shadow;
if(c != null)
{
c.onmouseover = function(){self.display();}
c.onmousemove = function(event){self.pos(event)};
c.onmouseout = function(){self.hide();};
}
}
}用的时候就直接
new ToolTip('m','ToolTip', 100, 100);
第一个是要添加tip的容器id,第二个是内容,后俩分别是高宽,内容可以是html的标签