如何在html页面上随着鼠标的位置显示浮动层图片或别的东东？（附代码）

最新推荐文章于 2023-11-03 10:29:29 发布

jamex

最新推荐文章于 2023-11-03 10:29:29 发布

阅读量5.1k

点赞数

分类专栏： JS/VbS/Css/DHtml 文章标签： html border function 电话 table 交通

本文链接：https://blog.csdn.net/jamex/article/details/1560280

版权

JS/VbS/Css/DHtml 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

改了一下网上的一个例子，使之更好用了。粗题字是精华！！！

！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>客运站查询</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="style_sbtc.css" rel="stylesheet" type="text/css">
</head>
<body topmargin="0">
<div id=overDiv style="LEFT: 20px; POSITION: absolute; Z-INDEX: 1; visibility: hidden; top: 64px" 42px;37px 14px;top:2px></div>
<script language=JavaScript>

// Main background color (the large area)
// Usually a bright color (white, yellow etc)
if (typeof fcolor == 'undefined') { var fcolor = "#edf5fe";}

// Border color and color of caption
// Usually a dark color (black, brown etc)
if (typeof backcolor == 'undefined') { var backcolor = "#2a83a1";}

// Text color
// Usually a dark color
if (typeof textcolor == 'undefined') { var textcolor = "#13214a";}

// Color of the caption text
// Usually a bright color
if (typeof capcolor == 'undefined') { var capcolor = "#ffffff";}

// Color of "Close" when using Sticky
// Usually a semi-bright color
if (typeof closecolor == 'undefined') { var closecolor = "#d0e6fd";}

// Width of the popups in pixels
// 100-300 pixels is typical
if (typeof width == 'undefined') { var width = "220";}

// How thick the border should be in pixels
// 1-3 pixels is typical
if (typeof border == 'undefined') { var border = "1";}

// How many pixels to the right/left of the cursor to show the popup
// Values between 3 and 12 are best
if (typeof offsetx == 'undefined') { var offsetx = 10;}

// How many pixels to the below the cursor to show the popup
// Values between 3 and 12 are best
if (typeof offsety == 'undefined') { var offsety = 10;}

// END CONFIGURATION

ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

// Microsoft Stupidity Check.
if (ie4) {
if (navigator.userAgent.indexOf('MSIE 5')>0) {
ie5 = true;
} else {
ie5 = false; }
} else {
ie5 = false;
}

var x = 0;
var y = 0;
var snow = 0;
var sw = 0;
var cnt = 0;
var dir = 1;
var tr = 1;
if ( (ns4) || (ie4) ) {
if (ns4) over = document.overDiv
if (ie4) over = overDiv.style
document.onmousemove = mouseMove
if (ns4) document.captureEvents(Event.MOUSEMOVE)
}

// Public functions to be used on pages.

// Simple popup right
function drs(text) {
dts(1,text);
}

// Caption popup right
function drc(text, title) {
dtc(1,text,title);
}

// Sticky caption right
function src(text,title) {
stc(1,text,title);
}

// Simple popup left
function dls(text) {
dts(0,text);
}

// Caption popup left
function dlc(text, title) {
dtc(0,text,title);
}

// Sticky caption left
function slc(text,title) {
stc(0,text,title);
}

// Simple popup center
function dcs(text) {
dts(2,text);
}

// Caption popup center
function dcc(text, title) {
dtc(2,text,title);
}

// Sticky caption center
function scc(text,title) {
stc(2,text,title);
}

// Clears popups if appropriate
function nd() {
if ( cnt >= 1 ) { sw = 0 };
if ( (ns4) || (ie4) ) {
if ( sw == 0 ) {
snow = 0;
hideObject(over);
} else {
cnt++;
}
}
}

// Non public functions. These are called by other functions etc.

// Simple popup
function dts(d,text) {
txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=/""+backcolor+"/"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=/""+fcolor+"/"><TR><TD>"+text+"</TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;
disp();
}

// Caption popup
function dtc(d,text, title) {
txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=/""+backcolor+"/"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD>"+title+"</TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=/""+fcolor+"/"><TR><TD>"+text+"</TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;

disp();
}

// Sticky
function stc(d,text, title) {
sw = 1;
cnt = 0;
txt = "<TABLE WIDTH="+width+" BORDER=0 CELLPADDING="+border+" CELLSPACING=0 BGCOLOR=/""+backcolor+"/"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD>"+title+"</TD><TD ALIGN=RIGHT><A HREF=/"//" onMouseOver=/"cClick();/" ID=/"PCL/">Close</A></TD></TR></TABLE><TABLE WIDTH=100% BORDER=0 CELLPADDING=2 CELLSPACING=0 BGCOLOR=/""+fcolor+"/"><TR><TD>"+text+"</TD></TR></TABLE></TD></TR></TABLE>"
layerWrite(txt);
dir = d;
disp();
snow = 0;
}

// Common calls
function disp() {
if ( (ns4) || (ie4) ) {
if (snow == 0) {
if (dir == 2) { // Center
moveTo(over,x+offsetx-(width/2),y);
}
if (dir == 1) { // Right
    if (x>document.all['overDiv'].offsetWidth)
    {
        x=x-document.all['overDiv'].offsetWidth-offsetx;
    }
    else
    {
        if (document.documentElement.clientWidth -x > document.all['overDiv'].offsetWidth)
        {
            x=x+offsetx;
        }
        else
        {
           x=x-document.all['overDiv'].offsetWidth* (x/document.documentElement.clientWidth);
        }
    }

    if (y>document.all['overDiv'].offsetHeight)
    {
        y=y-document.all['overDiv'].offsetHeight-offsetx;
    }
    else
    {
        if (document.documentElement.clientHeight -y > document.all['overDiv'].offsetHeight)
        {
            y=y+offsetx;
        }
        else
        {
           //y=y-document.all['overDiv'].offsetHeight* (y/document.documentElement.clientHeight) ;
    if (document.documentElement.clientHeight -y > y)
  y=y+offsetx;

    else
  y=y-document.all['overDiv'].offsetHeight-offsetx;
        }
    }

    x=x+document.documentElement.scrollLeft;
    y=y+document.documentElement.scrollTop;

    moveTo(over,x,y);
}
if (dir == 0) { // Left

    moveTo(over,x-offsetx-width,y);
}
showObject(over);
snow = 1;
}
}
// Here you can make the text goto the statusbar.
}

// Moves the layer
function mouseMove(e) {
if (ns4) {x=e.pageX; y=e.pageY;}
if (ie4) {x=event.x; y=event.y;}
if (ie5) {x=event.x+document.body.scrollLeft; y=(document.body.scrollTop+200);}
if (snow) {
if (dir == 2) { // Center
moveTo(over,x+offsetx-(width/2),y);
}
if (dir == 1) { // Right

if (x>document.all['overDiv'].offsetWidth)
    {
        x=x-document.all['overDiv'].offsetWidth-offsetx;
    }
    else
    {
        if (document.documentElement.clientWidth -x > document.all['overDiv'].offsetWidth)
        {
            x=x+offsetx;
        }
        else
        {
           x=x-document.all['overDiv'].offsetWidth* (x/document.documentElement.clientWidth);
        }
    }

    else
  y=y-document.all['overDiv'].offsetHeight-offsetx;
        }
    }

    x=x+document.documentElement.scrollLeft;
    y=y+document.documentElement.scrollTop;
    moveTo(over,x,y);
}
if (dir == 0) { // Left
moveTo(over,x-offsetx-width,y);
}
}
}

// The Close onMouseOver function for Sticky
function cClick() {
hideObject(over);
sw=0;
}

// Writes to a layer
function layerWrite(txt) {
if (ns4) {
var lyr = document.overDiv.document
lyr.write(txt)
lyr.close()
}
else if (ie4) document.all["overDiv"].innerHTML = txt
//if (tr) { trk(); }
}

// Make an object visible
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}

// Hides an object
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}

// Move a layer
function moveTo(obj,xL,yL) {
obj.left = xL
obj.top = yL
}

//function trk() {
// if ( (ns4) || (ie4) ) {
// nt=new Image(32,32); nt.src="http://www.nedstat.nl/cgi-bin/nedstat.gif?name=ol2t";
// bt=new Image(1,1); bt.src="http://www.bosrup.com/web/overlib/o2/tr.gif";
// refnd=new Image(1,1); refnd.src="http://www.nedstat.nl/cgi-bin/referstat.gif?name=ol2t&refer="+escape(top.document.referrer);
//
// }
// tr = 0;
//}
</script> 
<table width="670" height="198" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
 <td width="11"> </td>
 <td width="188" valign="top"><table width="188" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><img src="images/btn_home0.gif" width="181" height="23" border="0" usemap="#Map8"></td>
 </tr>
 <tr>
 <td height="5"><img src="images/000.gif" width="1" height="1"></td>
 </tr>
 <tr>
 <td><img src="images/btn_banxian0.gif" width="181" height="21" border="0" usemap="#Map9"></td>
 </tr>
 <tr>
 <td height="5"><img src="images/000.gif" width="1" height="1"></td>
 </tr>
 <tr>
 <td><img src="images/btn_dingdan0.gif" width="181" height="21" border="0" usemap="#Map2"></td>
 </tr>
 <tr>
 <td height="5"><img src="images/000.gif" width="1" height="1"></td>
 </tr>
 <tr>
 <td><img src="images/btn_keyunzhan1.gif" width="181" height="21" border="0"></td>
 </tr>
 <tr>
 <td height="5"><img src="images/000.gif" width="1" height="1"></td>
 </tr>
 <tr>
 <td><img src="images/btn_faq0.gif" width="181" height="21" border="0" usemap="#Map5"></td>
 </tr>
 <tr>
 <td height="5"><img src="images/000.gif" width="1" height="1"></td>
 </tr>
 <tr>
 <td><img src="images/btn_daili0.gif" width="181" height="21" border="0" usemap="#Map7"></td>
 </tr>
 <tr>
 <td height="5"><img src="images/000.gif" width="1" height="1"></td>
 </tr>
 <tr>
 <td><img src="images/btn_fankui0.gif" width="181" height="21" border="0" usemap="#Map5">
 </td>
 </tr>
 <tr>
 <td height="5"><img src="images/000.gif" width="1" height="1"></td>
 </tr>
 <tr>
 <td><img src="images/btn_guanyu0.gif" width="181" height="21" border="0" usemap="#Map5"></td>
 </tr>
 </table>

 </td>
 <td><img src="images/pic_keyunzhan.jpg" width="471" height="198"></td>
</tr>
</table>
<table width="670" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
 <td height="7"><img src="images/000.gif" width="1" height="1"></td>
</tr>
</table>
<table width="670" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
 <td width="11"> </td>
 <td width="659" valign="top"><table width="659" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><img src="images/title_keyunzhan.gif" width="659" height="31"></td>
 </tr>
 <tr>
 <td background="images/bg_fr_all.gif"><table width="640" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td colspan="2"><a name="info"></a></td>
 </tr>
 <tr>
 <td colspan="2" align="center">各客运站地址</td>
 </tr>
 <tr>
 <td colspan="2"> </td>
 </tr>
 <tr>
 <td> <ul>
 <li> <a href="#" onMouseOver="drc('<img src=images/map_zhongxinglu.jpg>','客运总站：');return true;" onMouseOut="nd();return true;">客运总站</a> 
 全称：上海长途汽车客运总站有限公司 
 地址：中兴路1662号（交通路） 
 直线电话：66299116 
 上班时间：5：00-23：00</li>
 <li> <a href="#" onMouseOver="drc('<img src=images/map_zsbl1015.jpg>','巴士沪太：');return true;" onMouseOut="nd();return true;">巴士沪太</a> 
 全称：上海巴士高速客运有限公司沪太站 
 地址：中山北路1015号（沪太站） 
 直线电话：56528400 
 上班时间：5：00-20：30</li>
 <li> <a href="#" onMouseOver="drc('<img src=images/map_gongxinglu.jpg>','长途北区：');return true;" onMouseOut="nd();return true;">长途北区</a> 
 全称：上海市长途汽车运输公司北区客运站 
 地址：公兴路88号（中兴路） 
 直线电话：56638631 
 上班时间：8：30-17：00</li>
 <li><a href="#" onMouseOver="drc('<img src=images/map_shnanzhan.jpg>','徐汇上海南站：');return true;" onMouseOut="nd();return true;">徐汇上海南站</a> 
 全称：上海南站长途客运有限公司 
 地址：石龙路666号（柳州南路） 
 直线电话：54353535 
 上班时间：6：00-20：30</li>
 <li><a href="#" onMouseOver="drc('<img src=images/map_hengfenglu258.jpg>','交运高速：');return true;" onMouseOut="nd();return true;">交运高速</a> 
 全称：上海交运高速客运站有限公司 
 地址：恒丰路258号（汉中路） 
 直线电话：63175757 
 上班时间：5：30-20：30</li>
 <li><a href="#" onMouseOver="drc('<img src=images/map_wuzhongdonglu.jpg>','三汽西区：');return true;" onMouseOut="nd();return true;">三汽西区</a> 
 全称：上海大众三汽公共交通有限公司西区汽车站 
 地址：吴中东路555号（中山西路） 
 直线电话：64645587 
 上班时间：5：40-16：00</li>
 <li><a href="#" onMouseOver="drc('<img src=images/map_wuzhonglu.jpg>','吴中站：');return true;" onMouseOut="nd();return true;">吴中站</a> 
 全称：上海吴中长途汽车站 
 地址：吴中路16号（中山西路宋园路） 
 直线电话：64648888 
 上班时间：6：00-20：00</li>
 <li><a href="#" onMouseOver="drc('<img src=images/map_zsbl806.jpg>','中山交通：');return true;" onMouseOut="nd();return true;">中山交通</a> 
 全称：上海中山交通客运有限公司 
 地址：中山北路806号（共和新路） 
 直线电话：56557926 
 上班时间：5：00-18：00</li>
 <li><a href="#" onMouseOver="drc('<img src=images/map_zhongninglu.jpg>','武宁长途：');return true;" onMouseOut="nd();return true;">武宁长途</a> 
 全称：上海武宁长途汽车站 
 地址：中宁路230号（武宁路） 
 直线电话：62055923 62050613 
 上班时间：5：00-18：30</li>
 <li><a href="#" onMouseOver="drc('<img src=images/map_guoweilu.jpg>','五角场：');return true;" onMouseOut="nd();return true;">五角场</a> 
 全称：上海五角场长途汽车客运有限公司 
 地址：国伟路456号（闸殷路） 
 直线电话：55239006 
 上班时间：5：00-17：00</li>
 <li><a href="#" onMouseOver="drc('<img src=images/map_taihelu.jpg>','吴淞长途：');return true;" onMouseOut="nd();return true;">吴淞长途</a> 
 全称：上海吴淞口长途汽车客运服务有限公司 
 地址：泰和路5号（化成路） 
 直线电话：56575016 
 上班时间：5：40-16：45</li>
 </ul>
 </td>
 <td valign="top"><ul>
 <li> <a href="#" onMouseOver="drc('<img src=images/map_dongdaminglu.jpg>','沪东客站：');return true;" onMouseOut="nd();return true;">沪东客站</a> 
 全称：上海交运高速客运有限公司东大名路站 
 地址：东大名路959号（丹徒路公平路） 
 直线电话：65416002 65415869 
 上班时间：6：00-19：00</li>
 <li><a href="#" onMouseOver="drc('<img src=images/map_hengfenglu783.jpg>','沪铁长途：');return true;" onMouseOut="nd();return true;">沪铁长途</a> 
 全称：上海沪铁长途客运有限责任公司 
 地址：恒丰路783号　 
 直线电话：51005131 63535375 
 上班时间：5：30-18：00</li>
 <li><a href="#" onMouseOver="drc('<img src=images/map_taopulu.jpg>','交通大众：');return true;" onMouseOut="nd();return true;">交通大众</a> 
 全称：上海交通大众客运有限责任公司 
 地址：桃浦路168号（桃浦东路） 
 直线电话：52858818 
 上班时间：5：15-17：30</li>
 <li><a href="#" onMouseOver="drc('<img src=images/map_hengfenglu710.jpg>','太平洋：');return true;" onMouseOut="nd();return true;">太平洋</a> 
 全称：上海锦江太平洋客运服务有限公司 
 地址：恒丰路710号　 
 直线电话：63179821 63170440 
 上班时间：6：00-23：00</li>
 <li> <a href="#" onMouseOver="drc('<img src=images/map_waimalu.jpg>','南浦大桥：');return true;" onMouseOut="nd();return true;">南浦大桥</a> 
 全称：上海南浦大桥长途旅游客运站有限公司 
 地址：外马路1588号（南浦大桥） 
 直线电话：63765128 
 上班时间：5：30-17：30</li>
 <li> <a href="#" onMouseOver="drc('<img src=images/map_pudongnanlu.jpg>','白莲泾站：');return true;" onMouseOut="nd();return true;">白莲泾站</a> 
 全称：上海浦东交通巴士长途客运有限公司白莲泾站 
 地址：浦东南路3843号（高科西路） 
 直线电话：962168 58836840 58802983 
 上班时间：5：00-19：00</li>
 <li> <a href="#" onMouseOver="drc('<img src=images/map_huyigonglu.jpg>','嘉定客运：');return true;" onMouseOut="nd();return true;">嘉定客运</a> 
 全称：上海嘉定汽车客运场站管理有限公司 
 地址：沪宜公路3205号（福海路） 
 直线电话：59162764 
 上班时间：6：00-17：20</li>
 <li> <a href="#" onMouseOver="drc('<img src=images/map_miaojinglu.jpg>','强生川沙：');return true;" onMouseOut="nd();return true;">强生川沙</a> 
 全称：上海强生长途客运有限公司川沙汽车站 
 地址：妙境路998号（川周路） 
 直线电话：50921565 50921537 
 上班时间：4：30-16：30</li>
 <li> <a href="#" onMouseOver="drc('<img src=images/map_renminnanlu.jpg>','松江旅行社：');return true;" onMouseOut="nd();return true;">松江旅行社</a> 
 全称：上海松江旅行社有限公司 
 地址：人民南路31号（中山中路） 
 直线电话：57819611 
 上班时间：4：30-21：00</li>
 <li><a href="#" onMouseOver="drc('<img src=images/map_nanqiaozhen01.jpg>','浦江汽运：');return true;" onMouseOut="nd();return true;">浦江汽运</a> 
 全称：上海浦江汽车运输有限公司 
 地址：奉贤区南桥镇沪杭公路2198号 
 直线电话：67191917 
 上班时间：5：15-16：30</li>
 </ul>
 </td>
 </tr>
 </table></td>
 </tr>
 <tr>
 <td height="12" valign="top"><img src="images/fr_bot_all.gif" width="659" height="12"></td>
 </tr>
 </table></td>
</tr>
</table>
<table width="670" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
 <td height="7"><img src="images/000.gif" width="1" height="1"></td>
</tr>
</table> 
<map name="Map9">
<area shape="rect" coords="61,4,144,17" href="order.asp">
</map>
<map name="Map8">
<area shape="rect" coords="61,6,85,20" href="index.asp">
</map>
<map name="Map5">
<area shape="rect" coords="61,5,109,17" href="fankui.asp">
</map>
<map name="Map7">
<area shape="rect" coords="62,5,110,17" href="daili.asp">
</map>
<map name="Map">
<area shape="rect" coords="64,25,76,37" href="index.asp">
<area shape="rect" coords="94,24,106,38" href="">
</map>
<map name="Map2">
<area shape="rect" coords="60,4,130,17" href="dingdan.asp">
</map>
</body>
</html>