打印

漂亮的提示信息(带箭头)

以前见过一个很漂亮的网页提示信息,就是把鼠标放到网页的文字或者图片上面就会有提示的那种,透明的,还带个箭头,很漂亮,不知道谁在哪见过没有,感谢了。
子叶:子乌的叶子
帅哥们,美女们,新的一年终于来了,祝贺你们...终于又老了一岁~
看看这个!


<HTML>

<HEAD>

<title>一种很酷的文字提示效果演示</title>

<style>
.tableBorder7{width:800;solid; background-color: #000000;}
TD{font-family: 宋体;font-size: 12px;line-height : 15px ;}
th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;}
th.th1{background-color: #333333;}
td.TableBody7{background-color: #B1EA45;}
</style>
<script language="JavaScript">
//more javascript from http://www.51it.org
<!--
var pltsPop=null;
var pltsoffsetX = 10;   // 弹出窗口位于鼠标左侧或者右侧的距离;3-12 合适
var pltsoffsetY = 15;  // 弹出窗口位于鼠标下方的距离;3-12 合适
var pltsPopbg="#FFFFEE"; //背景色
var pltsPopfg="#111111"; //前景色
var pltsTitle="";
document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');

function pltsinits()
{
    document.onmouseover   = plts;
    document.onmousemove = moveToMouseLoc;
}

function plts()
{  var o=event.srcElement;
    if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
    if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
    pltsPop=o.dypop;
    if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
    {
       pltsTipLayer.style.left=-1000;
       pltsTipLayer.style.display='';
       var Msg=pltsPop.replace(/\n/g,"<br>");
       Msg=Msg.replace(/\0x13/g,"<br>");
       var re=/\{(.[^\{]*)\}/ig;
       if(!re.test(Msg))pltsTitle="<font color=#ffffff>简介</font>";
       else{
         re=/\{(.[^\{]*)\}(.*)/ig;
           pltsTitle=Msg.replace(re,"$1")+" ";
         re=/\{(.[^\{]*)\}/ig;
         Msg=Msg.replace(re,"");
         Msg=Msg.replace("<br>","");}
         //var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");
              var content =
             '<table style="FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=135);" id=toolTipTalbe border=0><tr><td width="100%"><table class=tableBorder7 cellspacing="1" cellpadding="0" style="width:100%">'+
             '<tr id=pltsPoptop ><th height=18 valign=bottom class=th1 ><b><p id=topleft align=left><font color=#ffffff>↖</font>'+pltsTitle+'</p><p id=topright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>↗</font></b></th></tr>'+
             '<tr><td "+attr+" class=tablebody7 style="padding-left:14px;padding-right:14px;padding-top: 6px;padding-bottom:6px;line-height:135%">'+Msg+'</td></tr>'+
             '<tr id=pltsPopbot style="display:none"><th height=18 valign=bottom class=th1><b><p id=botleft align=left><font color=#ffffff>↙</font>'+pltsTitle+'</p><p id=botright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>↘</font></b></th></tr>'+
             '</table></td></tr></table>';
              pltsTipLayer.innerHTML=content;
              toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
              moveToMouseLoc();
              return true;
       }
    else
    {
           pltsTipLayer.innerHTML='';
             pltsTipLayer.style.display='none';
              return true;
    }
}



function moveToMouseLoc()
{
       if(pltsTipLayer.innerHTML=='')return true;
       var MouseX=event.x;
       var MouseY=event.y;
       //window.status=event.y;
       var popHeight=pltsTipLayer.clientHeight;
       var popWidth=pltsTipLayer.clientWidth;
       if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
       {
                popTopAdjust=-popHeight-pltsoffsetY*1.5;
                pltsPoptop.style.display="none";
                pltsPopbot.style.display="";
       }
        else
       {
                 popTopAdjust=0;
                pltsPoptop.style.display="";
                pltsPopbot.style.display="none";
       }
       if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
       {
              popLeftAdjust=-popWidth-pltsoffsetX*2;
              topleft.style.display="none";
              botleft.style.display="none";
              topright.style.display="";
              botright.style.display="";
       }
       else
       {
              popLeftAdjust=0;
              topleft.style.display="";
              botleft.style.display="";
              topright.style.display="none";
              botright.style.display="none";
       }
       pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
       pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
         return true;
}
pltsinits();
//-->
</script>

</HEAD>

<BODY>
<div title="醉别西楼醒不记,春梦秋云,聚散真容易。<br>斜月半窗还少睡。画屏闲展吴山翠。<br>衣上酒痕诗里字,点点行行,总是凄凉意。<br>红烛自怜无好计,夜寒空替人垂泪。">蝶恋花</div>
</BODY>
</HTML>

TOP

认证您的手机,获得手机认证图标, 更多手机认证的好处
[HTML]<style>
.tableBorder7{width:800;solid; background-color: #000000;}
TD{font-family: 宋体;font-size: 12px;line-height : 15px ;}
th{background-color: #f7f7f7;color: #000000;font-size: 12px;font-weight:bold;}
th.th1{background-color: #333333;}
td.TableBody7{background-color: #B1EA45;}
</style>
<script language="JavaScript">
//more javascript from http://www.51it.org
<!--
var pltsPop=null;
var pltsoffsetX = 10;   // 弹出窗口位于鼠标左侧或者右侧的距离;3-12 合适
var pltsoffsetY = 15;  // 弹出窗口位于鼠标下方的距离;3-12 合适
var pltsPopbg="#FFFFEE"; //背景色
var pltsPopfg="#111111"; //前景色
var pltsTitle="";
document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');

function pltsinits()
{
    document.onmouseover   = plts;
    document.onmousemove = moveToMouseLoc;
}

function plts()
{  var o=event.srcElement;
    if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
    if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
    pltsPop=o.dypop;
    if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
    {
       pltsTipLayer.style.left=-1000;
       pltsTipLayer.style.display='';
       var Msg=pltsPop.replace(/\n/g,"<br>");
       Msg=Msg.replace(/\0x13/g,"<br>");
       var re=/\{(.[^\{]*)\}/ig;
       if(!re.test(Msg))pltsTitle="<font color=#ffffff>简介</font>";
       else{
         re=/\{(.[^\{]*)\}(.*)/ig;
           pltsTitle=Msg.replace(re,"$1")+" ";
         re=/\{(.[^\{]*)\}/ig;
         Msg=Msg.replace(re,"");
         Msg=Msg.replace("<br>","");}
         //var attr=(document.location.toString().toLowerCase().indexOf("list.asp")>0?"nowrap":"");
              var content =
             '<table style="FILTER:alpha(opacity=90) shadow(color=#bbbbbb,direction=135);" id=toolTipTalbe border=0><tr><td width="100%"><table class=tableBorder7 cellspacing="1" cellpadding="0" style="width:100%">'+
             '<tr id=pltsPoptop ><th height=18 valign=bottom class=th1 ><b><p id=topleft align=left><font color=#ffffff>↖</font>'+pltsTitle+'</p><p id=topright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>↗</font></b></th></tr>'+
             '<tr><td "+attr+" class=tablebody7 style="padding-left:14px;padding-right:14px;padding-top: 6px;padding-bottom:6px;line-height:135%">'+Msg+'</td></tr>'+
             '<tr id=pltsPopbot style="display:none"><th height=18 valign=bottom class=th1><b><p id=botleft align=left><font color=#ffffff>↙</font>'+pltsTitle+'</p><p id=botright align=right style="display:none">'+pltsTitle+'<font color=#ffffff>↘</font></b></th></tr>'+
             '</table></td></tr></table>';
              pltsTipLayer.innerHTML=content;
              toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);
              moveToMouseLoc();
              return true;
       }
    else
    {
           pltsTipLayer.innerHTML='';
             pltsTipLayer.style.display='none';
              return true;
    }
}



function moveToMouseLoc()
{
       if(pltsTipLayer.innerHTML=='')return true;
       var MouseX=event.x;
       var MouseY=event.y;
       //window.status=event.y;
       var popHeight=pltsTipLayer.clientHeight;
       var popWidth=pltsTipLayer.clientWidth;
       if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
       {
                popTopAdjust=-popHeight-pltsoffsetY*1.5;
                pltsPoptop.style.display="none";
                pltsPopbot.style.display="";
       }
        else
       {
                 popTopAdjust=0;
                pltsPoptop.style.display="";
                pltsPopbot.style.display="none";
       }
       if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
       {
              popLeftAdjust=-popWidth-pltsoffsetX*2;
              topleft.style.display="none";
              botleft.style.display="none";
              topright.style.display="";
              botright.style.display="";
       }
       else
       {
              popLeftAdjust=0;
              topleft.style.display="";
              botleft.style.display="";
              topright.style.display="none";
              botright.style.display="none";
       }
       pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;
       pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;
         return true;
}
pltsinits();
//-->
</script>

</HEAD>

<BODY>
<div title="醉别西楼醒不记,春梦秋云,聚散真容易。<br>斜月半窗还少睡。画屏闲展吴山翠。<br>衣上酒痕诗里字,点点行行,总是凄凉意。<br>红烛自怜无好计,夜寒空替人垂泪。">蝶恋花</div>
</BODY>
</HTML>
[/HTML]
强!~这种效果爽。
研究研究

TOP

漂亮!

TOP

楼上都是牛人,研究中

TOP

不错,先收藏了

TOP

貌似在FF中不能显示.

TOP

还不错,支持了,不过不知道符合标准不
阿Q家园www.166s.com

TOP

别的不说在FF下就不显示...
心在那里...

TOP

在FF不行唉,没用...

在FF不行唉,没用...

TOP

很漂亮,收藏先~~~JS果然强大

TOP

很多论坛上都见过这种效果.

TOP

http://www.manoen.com/web2/home/

在下一页中点“友情互助 ”就可以看到。。

[ 本帖最后由 manoen 于 2007-2-27 11:37 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

这段代码如果现实的内容很长的话,就会显示不完全了,这个要怎么办呢?

而且还跑到上面去了。。。

 提示:您可以先修改部分代码再运行
[ 本帖最后由 compaq2800 于 2007-2-26 09:49 编辑 ]

TOP

效果不错~~早用上了~~
www.yule521.com

TOP

恩,很有实用价值哦!
穷追不舍 死缠烂打
软硬兼施 真相大白

TOP

确实是好东西

TOP

兄弟们,16楼那个怎么才能实现呢?

TOP

看看http://www.gzfangzi.com首面里面人信息标题提示。
设计天空:http://www.sjsky.net

TOP

真是强人。。收藏

TOP

回复 #15 manoen 的帖子

请问这个网页加载时部分栏目自动伸缩的功能是怎么实现的?
nextway.cn

TOP

引用:
原帖由 85cm 于 2007-3-26 09:18 发表
请问这个网页加载时部分栏目自动伸缩的功能是怎么实现的?
设置一个定时器。

TOP

别老是ff下不行的,ff对js的支持应该不是很好,这个ff本身的问题啊

TOP

FF是垃圾,不要管它。
设计天空:http://www.sjsky.net

TOP

代码有个缺点,如果它前后有字的话它会把它前后的文字自动分成上下两行显示了。

TOP

这个在FF下面不能显示,如果说是FF对JS支持不好,那如果别人用FF浏览你的网站的话那不就不能正常显示???晕  难道你做这个效果只是为了让用IE内核的人欣赏的???
摆pos抽香烟

TOP

后面的字显示不正常,只有3个字,碟恋花,我是用TT的,其他没试过

TOP

FF 也只显示  3个字,碟恋花,

TOP