移动鼠标实现链接文本框提示效果

rigger21

浏览: 134281 次
性别:
来自: 北京

最近访客更多访客>>

kidqhj

kalin001

wangdawei

zhutianfu

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (113)

社区版块

存档分类

CSS jQuery JavaScript IE HTML

效果图：

源代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>::TexoTela:: jQuery - tooltip demo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<STYLE type=text/css>@import url( /css/default.css );
</STYLE>

<SCRIPT src="TexoTela%20jQuery%20-%20tooltip%20demo_files/jquery-1.1.2.pack.js"
type=text/javascript></SCRIPT>

<SCRIPT type=text/javascript>
$(
function()
{
// drop shadow effect
var $outer = $("#outer");
var width = $outer.css("width");
var css = {
"margin": "12px auto",
"width": $outer.css("width"),
"background": "#073e8f"
}
$outer.css({"width": "auto", "left": -3, "top": -3, "margin": 0}).wrap(document.createElement("div")).parent().css(css).after(document.createElement("div"));
}
);
</SCRIPT>

<SCRIPT type=text/javascript>
$(document).ready(
function()
{
$("a,input").ToolTipDemo("#fef", "#e00");
}

);
</SCRIPT>

<META content="MSHTML 6.00.6000.16481" name=GENERATOR></HEAD>
<BODY>
<DIV id=outer>
<DIV id=header>
<H1> </H1></DIV>
<DIV id=inner><DIV id=contents>
<P>鼠标移动到这个链接和文本框上，看这个程序的效果</P>
<P><A
title="点击这个链接。。" href="http://hi.baidu.com/mahaibao">连接</A>. Text box:
<INPUT title="输入你的姓名，但是不好使，只是一个演示">
</P>
<P> </P>
</DIV>
<DIV id=navigation></DIV></DIV>
</DIV>
</BODY></HTML>

由于代码过多，请去http://dl2.csdn.net/down4/20070810/10170252823.rar 这里下载使用，，。。。

分享到：