juery 飘窗制作，实现某一图片热点点击功能

     <style type="text/css">
        .float{
            width:260px;height:379px;
            z-index:100;right:2px;top:85px;
            position:absolute;visibility: visible;
           
        }
    </style>

<img id="float"  class="float"  src="../images/wk_help.jpg" width="260" height="379" usemap="#Map" border="0" />

  <map name="Map" id="Map">
   <area shape="rect" coords="5,7,106,74" href="${pageContext.request.contextPath}/jsp/front/wekuhelp/help_member.jsp" />
  <area shape="rect" coords="225,2,263,20" href="javascript:void(0);" οnclick='close_piao()' />
  <area shape="rect" coords="11,124,108,214" href="${pageContext.request.contextPath}/jsp/front/wekuhelp/help-shang.jsp" />
  <area shape="rect" coords="24,269,126,350" href="${pageContext.request.contextPath}/jsp/front/wekuhelp/help-xia.jsp" />
  <area shape="rect" coords="174,178,266,283" href="${pageContext.request.contextPath}/jsp/front/wekuhelp/help-jifenzhi.jsp" />
  <area shape="rect" coords="202,323,267,385" href="${pageContext.request.contextPath}/jsp/front/wekuhelp/help_member.jsp" />
  <area shape="rect" coords="189,50,263,142" href="${pageContext.request.contextPath}/jsp/front/wekuhelp/help-shou.jsp" />

</map>

<script type="text/javascript">
<!--

//-->

var floatObj = $("#float");
var xPos = 300;
var yPos = 200;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
floatObj.css("top",yPos);
function changePos()
{
    width = document.body.clientWidth;
    height = document.body.clientHeight;
    Hoffset = 700;
    Woffset = 700;
   // floatObj.style.left = xPos + document.body.scrollLeft;
    //floatObj.style.top = yPos + document.body.scrollTop;
    floatObj.css("left",xPos + document.body.scrollLeft);
    floatObj.css("top",yPos + document.body.scrollTop);
    if (yon){
      yPos = yPos + step;
      }else{
      yPos = yPos - step;
     }
   
    if (yPos < 0) {
      yon = 1;yPos = 0;
    }
    if (yPos >= (height - Hoffset)) {
      yon = 0;yPos = (height - Hoffset);
      }
    if (xon) {
       xPos = xPos + step;
    }else {
      xPos = xPos - step;
    }
    if (xPos < 0) {
       xon = 1;
       xPos = 0;
    }
    if (xPos >= (width - Woffset)) {      
      xon = 0;xPos = (width - Woffset);
      }
}
    
function start()
{
     floatObj.visibility = "visible";
     interval = setInterval('changePos()', delay);
}
function pause_resume()
{
    if(pause){
        clearInterval(interval);
        pause = false;
    }else {
        interval = setInterval('changePos()',delay);
        pause = true;
    }
}
start();
    
/*floatObj.mouseover=function(){
    alert("mouseover");
    clearInterval(interval)
    }*/
floatObj.mouseover(
     function (){
          //alert("mouseover");
          clearInterval(interval)
      
      }
     );
/*floatObj.οnmοuseοut=function(){
    interval=setInterval('changePos()', delay)
    }*/
floatObj.mouseout(function (){
        interval=setInterval('changePos()', delay);
    }
    
    
    );

</script>