tip的问题,请大家帮忙看下

请大家看
http://web.mapabc.com/localsearch/thememap.jsp

类似这个上面的热区功能,鼠标移进去的时候会弹出一个有内容可以点击的小tip,移开的时候就没了,而且这个tip在图的上面,这样的功能怎么实现

这个源文件的js代码太多了,看不懂,请各位帮忙,给个简单的示例就好,谢谢

8 个解决方案

#1

<html><head><title>层与按钮对齐</title></head><body>
<div align=left><table border=1 width=600 height=50>
<tr align=center>
  <td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息一"
     onmouseout="document.all.pop.style.display='none'">
  </td><td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息二"
     onmouseout="document.all.pop.style.display='none'">
  </td><td>
    <input type=button value=ok onmouseover="cc(this)" alt="提示信息三"
     onmouseout="document.all.pop.style.display='none'">
  </td></tr>
</table><div>

<div id=pop style="
  position: absolute;
  width: 120;
  height: 30;
  z-index: 99;
  display: none;
  background-color: #FF0000"
>
图层文字</div>

<script language=javascript>
function cc(tt)
{
  var hint = tt.getAttribute("alt");
  var e  = document.getElementById("pop");
  var t  = tt.offsetTop;     //TT控件的定位点高
  var h  = tt.clientHeight;  //TT控件本身的高
  var l  = tt.offsetLeft;    //TT控件的定位点宽
  var ttyp  = tt.type;       //TT控件的类型
  while (tt = tt.offsetParent){t += tt.offsetTop; l += tt.offsetLeft;}
  e.style.top  = (ttyp=="image")? t + h : t + h + 6; //层的 Y 坐标
  e.style.left = l + 1;      //层的 X 坐标
  e.style.display = "block"; //层显示
  e.innerHTML = hint; //author: meizz
}
</script>
</body></html>

#2

meizz(梅花雪)
你好

这个tip的属性在外面是怎么定义呢,从this传过来和我的要求有点不符合

#3

var e  = document.getElementById("pop");

  e.style.top  = y + 6; //层的 Y 坐标
  e.style.left = x + 1;      //层的 X 坐标
  e.style.display = "block"; //层显示
  e.innerHTML = Info;

我改成这样了,x和y分辨为鼠标的位置,info是自己写的字符串.

但是tip会被原来的图层挡住,请问怎么办呢

#4

#5

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>自定义title - 5iuu.com</title>
</head>
<body>
<p><B>自定义title</B>(IE)：把鼠标放在下面的文字上查看效果</p>
<span title="Javascript" title="">默认效果</span><br><br>
<span title="<marquee style='width:100px;'>www.5iuu.com</marquee>" altbg="red" altcolor="yellow" altborder="yellow">滚动字幕</span><br><br>
<span title="<img src='http://www.85815.com/logo/logo_02.gif' border='0'>" altbg="#F7F7F7" altcolor="#999999" altborder="#CCCCCC">图片</span><br><br>
<span title="<i style='font-size:24pt;font-family:verdana;'>www.5iuu.com</i>" altbg="green" altcolor="yellow" altborder="darkgreen">大字体</span><br><br>
<div style="display:none;border:1px solid #000000;background-color:#FFFFCC;font-size:12px;position:absolute;padding:2;" id=altlayer></div>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</body>
</html>

#6

AppleBBS(Dicky)

你好

你这个鼠标的位置哪是在哪控制的?不好意思我看的不是很懂

#7

AppleBBS(Dicky)

你这个效果和我说的还是有很大差别的啊,你可以去http://web.mapabc.com/localsearch/thememap.jsp看看

#8

现在最主要的问题就是tip总是被地图挡住了,大家帮帮忙啊

#1

#2