通过map热点实现鼠标点击弹出div的效果
我的图书馆
通过map热点实现鼠标点击弹出div的效果
&html&&head&&meta http-equiv="Content-Type" content="text/ charset=gb2312"&&title&新建网页 1&/title&&meta http-equiv="x-ua-compatible" content="ie=7" /&&style&*{padding:0;margin:0}&/style&&/head&&body&&div id="oMenu1" style="background:#border:solid 0px #666666;;position:top:-1000left:50width:300height:200display:" &图片热区1&/div&&div id="oMenu2" style="background:#border:solid 0px #666666;;position:top:-1000left:400width:300height:200;display:"&图片热区2&/div&&img src="" width=704 height=396 border="0" usemap="#Map"&&map name="Map"&& &area shape="rect" coords="0,0,250,396" href="#"alt="热区1" onMouseover="ShowDiv('oMenu1',this)" && &area shape="rect" coords="478,106,555,169" href="#"alt="热区2" onMouseover="ShowDiv('oMenu2',this)"&&/map&&script&function ShowDiv(id,obj){obj.onmouseout=function(e){& if (e)& e.stopPropagation();& else& window.event.cancelBubble =document.getElementById(id).style.top='-1000px';}document.getElementById(id).style.top='100px';document.getElementById(id).onmouseover=function(){this.style.top='100px';}document.getElementById(id).onmouseout=function(){this.style.top='-1000px';}}&/script&&/body&&/html&
TA的最新馆藏
喜欢该文的人也喜欢css3鼠标点击圆形波浪效果展开jQuery特效代码素材Material Design Hover & Click Effects Demo Page
发布时间： 14:08:57
Copyright @ 2014-, All Rights ReservedJS+DIV实现鼠标划过切换层效果的方法
作者：rubychen410
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JS+DIV实现鼠标划过切换层效果的方法,涉及javascript鼠标事件及页面元素操作的相关技巧,需要的朋友可以参考下
本文实例讲述了JS+DIV实现鼠标划过切换层效果的方法。分享给大家供大家参考。具体实现方法如下：
&title&DIV层切换&/title&
&script language="JavaScript" type="text/javascript"&
/*********************************************
通用DIV切换函数
divID --当前DIV的ID号；divName
--要改变的这一组DIV的命名前缀；zDivCount --这一组DIV的个数-1
JetKing 2007.06
*********************************************/
function ChangeDiv(divId,divName,zDivCount)
for(i=0;i&=zDivCi++)
document.getElementById(divName+i).style.display="none";
document.getElementById(divName+divId).style.display="block";
层切换示例：&br&By:JetKing()&br&
&span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',2)"
style="cursor:"&内容一&/span&
&span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',2)"
style="cursor:"&内容二&/span&
&span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',2)"
style="cursor:"&内容三&/span&
&div id="BigDIV"
style="border:solid 1px #width:460margin:10"&
&div id="JKDiv_0" style="font-size:14margin:20color:#FF0000;"&
内容部分第一区&br&&img src="images/common/watermark.gif"&&/div&
&div id="JKDiv_1"
style="display:font-size:14margin:10color:#FF0000;"&
内容部分第二区&br&&img src="logo.gif"&&/div&
&div id="JKDiv_2"
style="display:font-size:14margin:10color:#FF0000;"&
内容部分第三区&/div&
希望本文所述对大家的javascript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具所有回答(4)
$(function(){　
　　$(".demo div").click(function(){
　　　　$(".demo div").css("background-color","white");　　　　$(this).css("background-color","#149BDF");　　　　$(this).css("cursor","pointer")　　})
$(function(){　
　　$(".demo div").click(function(){ 　　　　$(this).css("background-color","#149BDF").siblings().css("background-color","white"); 　　　　$(this).css("cursor","pointer") 　　})
$(function(){　
　　$(".demo div").click(function(){　　　　$(this).css("background-color","#149BDF").siblings('div').css("background-color","white");　　　　$(this).css("cursor","pointer")　　})
楼上把答案都写了，我就不写源码了。
楼主想要【点击】事件，但自己的代码中却是【鼠标移入】和【移开】，这是问题所在；
对于楼主提及的效果，除了楼上的方法，还可以使用增删class的方法，不过楼主说不要那么 操作，那就复制楼上几位的方法就可以了。或者改自己的事件。
&&&您需要以后才能回答，未注册用户请先。}