jQuery超链接提示 和 图片提示代码（源自锋利的JQUERY）

jquery和js 要想学好 还得是多用。

由此可以窥探学习所有技术的窍门-- 无他唯手熟尔！

代码如下：

<%--
Created by IntelliJ IDEA.

User: rjm

Date: 13-6-15

Time: 下午12:31

To change this template use File | Settings | File Templates.

–%>

%@ page contentType="text/html;charset=UTF-8" language="java" %




<title>Jquery Test</title>
 <style type = "text/css">
    .tooltips{
       background-color: coral;
    }

 </style>
  <script type = "text/javascript" src = "js/jquery-1.9.1.min.js"></script>
  <script type = "text/javascript">
      $(function(){
          var x = 10;
          var y = 20;
          $("a.tooltips").mouseover(function(e){
                this.myTitle = this.title;
                this.title = "";
                var imgTitle = this.myTitle?"<br/>"+this.myTitle:"";
                var tooltips = "<div id = 'tooltips' ><img src = '"+ this.href +" ' width = '200'' height = '400'/> "+imgTitle+"</div>";
                $("a.tooltips").after(tooltips);


                $("#tooltips").css({
                    "top":( e.pageY+y ) +"px",
                    "left":(e.pageX+x )+ "px"
                }).show("fast");
          }).mouseout(function(e){

                      this.title = this.myTitle;
                       $("#tooltips").remove();
                  }).mousemove(function(e){
                      $("#tooltips").css(
                              {
                                  "top":(e.pageY+y)+ "px",
                                  "left":(e.pageX+x)+ "px"
                              }
                      );
                  }) ;
      });

  </script>




       <p>
        <a href = "image/DSC01205.JPG" class = "tooltips" title = "身份证">
         <img src = "image/DSC01205.JPG" width = "50" height="40" />
        </a>
       </p>