Chinese
Sign in / Sign up

工具提示/高亮框

一个易于使用的 ajax 工具提示弹出脚本，当用户把鼠标指针移到项目上时，不需要点击即可提供更新信息。这是一个小的 "高亮框"，带有当前高亮项目的信息。

特点

  • 完全可定制的工具提示。您可以进一步修改的背景颜色/个人工具提示的宽度。
  • Hoverbox内容可以包括图片，文字图片和标题，以及其他丰富的HTML。
  • 在弹出通常用于提供指针和按钮之间的接口。
  • 支持所有现代浏览器。

预览


Basta con mover el cursor del raton sobre el boton o imagen.




LINK

代码

Javascript 代码
<!-- Script by hscripts.com -->
<!-- Copyright of HIOXINDIA -->
<!-- More scripts @www.hscripts.com -->
<style type = "text/css">
#bubble_tooltip{
width:210px;
position:absolute;
display: none;
}
#bubble_tooltip .bubble_top{
position:relative;
background-image: url(htooltip/bubble_top.gif);
background-repeat:no-repeat;
height:18px;
}
#bubble_tooltip .bubble_middle{
position:relative;
background-image: url(htooltip/bubble_middle.gif);
background-repeat: repeat-y;
background-position: bottom left;
}
#bubble_tooltip .bubble_middle div{
padding-left: 12px;
padding-right: 20px;
position:relative;
font-size: 11px;
font-family: arial, verdana, san-serif;
text-decoration: none;
color: red;
text-align:justify;
}
#bubble_tooltip .bubble_bottom{
background-image: url(htooltip/bubble_bottom.gif);
background-repeat:no-repeat;
height:65px;
position:relative;
top: 0px;
}
</style>
<script type="text/javascript" src="htooltip/ajax.js"></script>
<!-- Script by hscripts.com -->

HTML 代码
<!-- Script by hscripts.com -->
<table id="bubble_tooltip" align=center border=0 cellpadding=0 cellspacing=0>
<tr class="bubble_top"><td></td></tr>
<tr class="bubble_middle"><td><div id="bubble_tooltip_content"></div></td></tr>
<tr class="bubble_bottom"><td colspan=5></td></tr>
</table>
<br><br><br> Basta con mover el cursor del raton sobre el boton o imagen. <br><br><br>
<input type="button" id="b1" value="BUTTON" style='cursor:pointer;' onmouseover="showToolTip('htooltip/tooltip1.html','bubble_tooltip_content',event)" onmouseout="hideToolTip()"></input>
<br><br> <a href="#" onmouseover="showToolTip('htooltip/tooltip2.html','bubble_tooltip_content',event)" onmouseout="hideToolTip()"> LINK </a>
<div align=center style='font-size: 10px; color: #dadada;' id="dumdiv">
<a href="https://www.hscripts.com" id="dum" style='text-decoration:none; color: #dadada;'>Ã��ïÿýÃ��Ã�Ã&copy; hscripts.com</a>
</div>
<!-- Script by hscripts.com -->
  • 发行日期 - 2011-06-22
  • 获得免费版本无版权链接只 $5/-
  • 关于脚本的定制或者任何脚本的开发，请联系我们, support@hscripts.com

用法

  • 下载并解压缩文件。您将获得所需的文件。
  • 上面的代码复制并粘贴到您的网页了。
  • 该文件包含在这个工具提示脚本中使用的图像。
  • 你可以在 tooltip.html 和 tooltip2html 文件中修改高亮框的信息。
  • 你的信息会作为参数传递给函数 showtooltip('tooltip1.html','bubble_tooltip_content',even
  • 当把鼠标指针放置到按钮或链接上时， 函数 showtooltip('tooltip2.html','bubble_tooltip_content',even
  • 被触发并且弹出框将显示出来。

牌照

  • 本Ajax脚本/ HTML代码是GPL许可下给予.
  • 即免费使用那些谁使用，因为它是它.
  • 免费的，如果你的修改不会删除我们的版权信息和链接.
  • 详细许可证资料可在这里找到
  • 你可以购买脚本如果你的要求不符合GPL授权条款.

Ajax 脚本