网页关键词tooltip解释实现技术

tooltip.jsp文件：

代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>tooltips</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" language="javascript" charset="utf-8" src="tooltip.js"></script>
</head>
<script type="text/javascript">
//封装的tooltip

</script>
<body>
<br><br><br><br>放假啊得三路口<u class="hotspot" onmouseover=display(this); onmouseout=tooltip.hide();>附近放</u>假阿喀琉斯<u class="hotspot" onmouseover=display(this); onmouseout=tooltip.hide();>测试</u>
  年份是附近啊浪费骄傲的发掘的烦恼的发快睡觉大类飞<u class="hotspot" onmouseover="display(this);" onmouseout="tooltip.hide();">测试222</u>
   <hr>
  <input type="button" onclick="handle();" value="test"/>
</body>
</html>

style.css

代码

/*tooltip样式定义*/

#text {margin:50px auto; width:500px}
.hotspot {color:#900; padding-bottom:1px; border-bottom:1px #900; cursor:pointer}

#tt {position:absolute; display:block; background:url(images/tt_left.gif) top left no-repeat}
#tttop {display:block; height:5px; margin-left:5px; overflow:hidden}
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; background:#BBB; color:#111}
#ttbot {display:block; height:5px; margin-left:5px; overflow:hidden}

tootip.js文件：

代码

var tooltip=function(){
  var id = 'tt';//tooltip的id#tt
  var top = 3;
  var left = 3;
  var maxw = 300;
  var speed = 10;
  var timer = 20;//定时间隔20ms
  var endalpha = 95;//最终不透明度95%
  var alpha = 0;//不透明度
  var tt,t,c,b,h;
  var ie = document.all ? true : false;
  return {
    show:function(v,w){
      if(tt == null){
        tt = document.createElement('div');
        tt.setAttribute('id',id);//设置创建的div的id属性

        t = document.createElement('div');
        t.setAttribute('id',id + 'top');//#tttop

        c = document.createElement('div');
        c.setAttribute('id',id + 'cont');//内容部分#ttcont

        b = document.createElement('div');
        b.setAttribute('id',id + 'bot');//底部#ttbot

        tt.appendChild(t);
        tt.appendChild(c);
        tt.appendChild(b);

        //生成形式如下:
        /*
            <div >);
        }

后台tooltipDisplayAction Struts2

代码

package com.ajdc.tooltip;

import java.io.PrintWriter;
import java.util.Hashtable;
import java.util.Map;
import java.util.Vector;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.interceptor.ServletRequestAware;

import com.sys.CommonBean;
import com.sys.Security;
import com.web.ExtActionSupport;

public class TooltipDisplayAction extends ExtActionSupport implements
ServletRequestAware{

    @Override
    public String execute() throws Exception {HttpServletResponse response = ServletActionContext.getResponse();
        HttpServletRequest request = ServletActionContext.getRequest();
        String result = "";
        request.setCharacterEncoding("UTF-8");
        response.setHeader("Content-Type", "text/html;charset=UTF-8");
        String key = request.getParameter("key");

        key = key.trim();
        System.out.println("收到：" + key);
        String sql = "select distinct DESCRIPTION from GLOSSARY where KEYWORD like '%"+ key + "%' ";
        Vector vect = this.getDao().getDataBySql(sql);
        for(int j =0; j< vect.size();j++){
            Hashtable hash =(Hashtable)vect.get(j);
            result = hash.get("DESCRIPTION").toString();
        }
        if(vect.size() ==0)
            result="暂无解释";
        //result="数据库中的关键词解释";
        //System.out.println("结果：" + result);
        PrintWriter out = response.getWriter();
        out.print(result);
        out.flush();
        return SUCCESS;
    }
}