JS动态设置热区

daneen173 2008-05-18 02:06:25

已经在第一张图片上设置了若干热区

现在要求放大或缩小图片，热区比例随图片相应变化
在JS中如何实现动态设置热区？
另外为什么我对热区层做透明处理去还是无法看到背景层图片？
部分代码如下

//热区层

<div id="HotAreaDiv" style="z-index:1" filter:alpha(opacity=0)>	    	

   <img src="resources/A.jpg" width="800" height="560" border="0" usemap="#map" style="filter:alpha(opacity=0) z-index:1">

    <map name="map" id="map" >

      <area shape="poly" id="NO1Dinner" coords="210,496,10" onMouseOver="showtrail('NO1dinner')" style="border: 1px solid rgb(119,119, 119);" onMouseOut="hidetrail()">

      ...

      <area shape=""...>

    </map>

<div>

//背景图片层：该层图片为动态填充的

<div id="ImgDiv" style="z-index: 0">                

</div>

...全文

923 20 打赏收藏转发到动态举报

写回复

用AI写文章

20 条回复

切换为时间正序

请发表友善的回复…

发表回复

joegu 2008-05-27

打赏
举报

<div style="width:200px;filter:alpha(opacity=30);opacity: 0.5;-moz-opacity:0.5;">半透明</div>
这个div是半透明的

daneen173 2008-05-24

打赏
举报

谢谢[Quote=引用 18 楼 zengxie 的回复:]
我写过一篇BLOG,不过我的实现是用两张图片,你可以看看
http://blog.csdn.net/zengxie/archive/2008/05/16/2450933.aspx
[/Quote]

zengxie 2008-05-21

打赏
举报

我写过一篇BLOG,不过我的实现是用两张图片,你可以看看
http://blog.csdn.net/zengxie/archive/2008/05/16/2450933.aspx

daneen173 2008-05-21

打赏
举报

tantaiyizu
谢谢指教

tantaiyizu 2008-05-20

打赏
举报

<div id="mask">
<img src="img/1.jpg" border="0" usemap="#Map">
<map name="Map1" id="Map1"> //要注意这里好不好 ,你怎么能这么马虎，还什么dreamweaver ，dreamweaver能用来做网页吗？dreamweaver是用来做垃圾的
<area shape="circle" coords="166,225,101" href="#">
</map>
</div>

daneen173 2008-05-20

打赏
举报

这个应该没错
下面是我用Dreamweaver图形化操作生成的
<div id="mask">
<img src="img/1.jpg" border="0" usemap="#Map">
<map name="Map">
<area shape="circle" coords="166,225,101" href="#">
</map>
</div>

用弹出窗口单步调试似乎都没有问题但最终就是感应不到热区是不是存在逻辑错误

loveyunwt 2008-05-20

打赏
举报

hotarea.setAttribute("id","Map1");

tantaiyizu 2008-05-20

打赏
举报

hotarea.setAttribute("id","Map1");

daneen173 2008-05-20

打赏
举报



<html >

    <head>   

        <script type="text/javascript">

		 function abc(){

           	   hotimg= document.createElement("img");   //添加图片

		   hotimg.src="img/1.jpg"; 

		   hotimg.usemap="#Map1";

		   hotimg.setAttribute("id", "himg");

                   document.getElementById('mask').appendChild(hotimg);

		   

		   hotarea=document.createElement("map");  //添加map标签

		   hotarea.name="Map1";

		   hotarea.setAttribute("id","harea");

		   document.getElementById('mask').appendChild(hotarea);

		  

		   area_a=document.createElement("area");  //添加热区

		   area_a.shape="circle";

		   area_a.coords="262,437,80";

		   area_a.href="#";

		   area_a.setAttribute("id", "area_1");

                   document.getElementById('harea').appendChild(area_a);

		  

		 }     

         </script>

    </head>

    <div id="mask">

            <input type="button"    value="set" onclick="abc()">

    </div>     

</html>