<img src="........." width="354" height="500" border="0" usemap="#Map"/>
<map name="Map" id="Map"><area shape="rect" coords="116,300,206,359" href="#" onmousemove="alert(this)"/></map>在图片上建立热点后,在MAP标签上加事件..
<map name="Map" id="Map"><area shape="rect" coords="116,300,206,359" href="#" onmousemove="alert(this)"/></map>在图片上建立热点后,在MAP标签上加事件..
http://bt1.btchina.net/
鼠标放在一个链接上就出相应的介绍. 鼠标离开介绍就隐藏. 而且介绍中能出图片.
可是俺不会做, 所以想请教.
showDiv() 中以 Div.style.display = "inline";显示Div HiddenDiv() 中以 Div.style.display = "none";隐藏Div
ommouseover="showDiv()"
ommouseout = "HiddenDiv()"
<head><meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>show and hide</title>
</head>
<script>
function ShowDiv(){
test.style.top=event.clientY-2;
test.style.left=event.clientX+3;
test.style.visibility="visible";
}
function HiddenDiv(){
test.style.visibility="hidden";
}
</script>
<body>
<span onmouseover="ShowDiv()" onmouseout="HiddenDiv()">move here</span><div id="test" style="position:absolute;visibility:hidden;width:200;height:200;border:1 black solid;background-color:#FFFFCC" onmouseover="this.style.visibility='visible'" onmouseout="this.style.visibility='hidden'">i'm test</div>
</body>
</html>
参考一下吧
<TITLE>图像映射示例</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=gb2312">
<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"
LINK="#000000" VLINK="#808080" ALINK="#000000">
<BLOCKQUOTE CLASS="body">
<H1>图像映射示例</H1>
<P>请单击图像中的星球查看较大图像。</P>
<P><IMG SRC="solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0 ALT="太阳系" USEMAP="#SystemMap">
<MAP NAME="SystemMap">
<AREA SHAPE="rect" COORDS="0,0,82,126" HREF="sun.gif" alt="太阳">
<AREA SHAPE="circle" COORDS="90,58,3" HREF="merglobe.gif" alt="水星">
<AREA SHAPE="circle" COORDS="124,58,8" HREF="venglobe.gif" alt="金星">
<AREA SHAPE="circle" COORDS="162,58,10" HREF="earglobe.gif" alt="地球">
<AREA SHAPE="circle" COORDS="203,58,8" HREF="marglobe.gif" alt="火星">
<AREA SHAPE="poly" COORDS="221,34,238,37,257,32,278,44,284,60,281,75,288,91,267,87,253,89,237,81,229,64,228,54" HREF="jupglobe.gif" alt="木星">
<AREA SHAPE="poly" COORDS="288,19,316,39,330,37,348,47,351,66,349,74,367,105,337,85,324,85,307,77,303,60,307,50" HREF="satglobe.gif" alt="土星">
<AREA SHAPE="poly" COORDS="405,39,408,50,411,57,410,71,404,78,393,80,383,86,381,75,376,69,376,56,380,48,393,44" HREF="uraglobe.gif" alt="天王星">
<AREA SHAPE="poly" COORDS="445,38,434,49,431,53,427,62,430,72,435,77,445,92,456,77,463,72,463,62,462,53,455,47" HREF="nepglobe.gif" alt="海王星">
<AREA SHAPE="circle" COORDS="479,66,3" HREF="pluglobe.gif" alt="冥王星">
</MAP>
<CENTER>
</BODY>
</HTML>
<head>
<style type="text/css">
.cPopText
{
filter: Alpha(Opacity=0);
}
</style>
</head>
<body>
<table width="200px" onmouseover="showPopupText(event);" onmouseout="hidePopupText(event);" border="1">
<tr><td>line1</td></tr>
</table><br />
<table width="200px" onmouseover="showPopupText(event);" onmouseout="hidePopupText(event);" border="1">
<tr><td>line2</td></tr>
</table><br />
<table width="200px" onmouseover="showPopupText(event);" onmouseout="hidePopupText(event);" border="1">
<tr><td>line3</td></tr>
</table>
</body>
</html>
<script type="text/javascript">//***********默认设置定义.*********************
tPopWait=1; //停留tWait豪秒后显示提示。
tPopShow=60000; //显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=50;//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
MouseX=0;
MouseY=0;
popLeftAdjust=0;
popTopAdjust=0;function showPopupText(e)
{
e = window.event || e;
var o = e.srcElement || e.target;
MouseX=e.clientX ;
MouseY=e.clientY;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
curShow=setTimeout("showIt()",tPopWait);
}function showIt()
{
var odyp = document.getElementById('dypopLayer');
var popWidth = odyp.clientWidth;
var popHeight = odyp.clientHeight;
//alert('odyp.clientWidth= ' + odyp.clientWidth + ',body.clientWidth= ' + popWidth);
if(MouseX+12+popWidth > document.body.clientWidth)
{popLeftAdjust = -popWidth-24;}
else
{popLeftAdjust=0;}
if(MouseY+12+popHeight > document.body.clientHeight)
{popTopAdjust=-popHeight-24;}
else
{popTopAdjust=0;}
odyp.style.left = MouseX+12+document.body.scrollLeft+popLeftAdjust;
odyp.style.top = MouseY+12+document.body.scrollTop+popTopAdjust;
odyp.style.filter = "Alpha(Opacity=0)";
fadeOut();
}function fadeOut()
{
var odyp = document.getElementById('dypopLayer');
if(odyp.filters.Alpha.opacity<popOpacity)
{
odyp.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else
{
odyp.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}function fadeIn()
{
var odyp = document.getElementById('dypopLayer');
if(odyp.filters.Alpha.opacity>0)
{
odyp.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}function hidePopupText(e)
{
document.all.dypopLayer.style.display='';
}function showClick()
{
document.getElementById('dypopLayer').style.display='';
}
function hideClick()
{
document.getElementById('dypopLayer').style.display='none';
}-->
</script>
<script type="text/javascript">
function CreateDypopLayer()
{
var odiv = document.createElement("div");
odiv.id="dypopLayer";
odiv.style.position = "absolute";
odiv.style.zIndex = "1000";
odiv.style.width="112px";
odiv.style.height="29px";
odiv.className="cPopText";
odiv.innerHTML="<img src=\"http://zi.csdn.net/ebay_300.60.gif\" border=\"0\" />";
odiv.setAttribute("onmouseover", "showClick();");
odiv.setAttribute("onmouseout", "hideClick();")
odiv.style.display="none";
document.body.appendChild(odiv);
}CreateDypopLayer();</script>
div 里的onmouseover好像只能在ie里执行吧, firefox好像不支持啊.
谢谢大家的回复和实例.To zabcd117(菜园小哥) :
如何能够让你的代码也能运行在firefox里面呢?我发现在firefox里, onmouseover后面的函数不能带参数, 否则在浏览器里就没有onmouseover功能.如何解决呢?我借鉴了菜园小哥的代码, 在ShowDiv里加了参数:
function ShowDiv(countryid, vartop, varleft){
countryid.style.top=event.clientY + vartop;
countryid.style.left=event.clientX + varleft;
countryid.style.visibility="visible";
}
在onmouseover函数后面我又加上了onmouseover="ShowDiv(ID_PORTUGAL,-170,20)"
这么做是为了应对有多个热点分别要显示不同的信息.
可是, 就是因为加了参数, 于是在firefox中就显示不出来了.能否再给指点一下
firefox使用事件的时候需要注意的问题