当前位置:主页 > 网页教程 > 网络编程 > JavaScript > 内容欢迎大家投稿

JavaScript的图像地图

时间:2009-10-11 07:44来源:未知 作者:大宝库 点击:读取中
阅读工具:字体:

图像地图指的是带有可点击区域的图像。

实例

简单的的HTML图像映射
本例演示一幅没有添加的JavaScript的图像映射。
添加了JavaScript的的图像映射
本例演示一幅添加了JavaScript的的图像映射,当鼠标浮动于某个热点上时,会调用JavaScript的函数来显示热点所对应的星球的简介。

JavaScript的图像地图

我们已经从的HTML教程中了解到,图像地图是带有可点击区域的图像。通常情况下,每个区域是一个相关的超级链接。单击某个区域,就回到达相关的链接。

实例

下面的例子演示如何创建带有可点击区域的的HTML图像地图:

“IMG的src =”planets.gif“宽度=”145“高=”126“ 
按ALT =“行星”usemap =“#planetmap”/“ 

 <map编号="planetmap" name="planetmap"> 
 “区域的形状=”矩形“coords =”0,0,82,126的“href =”sun.htm“目标=”_blank“ 
  按ALT =“太阳”/“ 
 “区域的形状=”圆“coords =”90,58,3的“href =”mercur.htm“目标=”_blank“ 
  按ALT =“水星”/“ 
 “区域的形状=”圆“coords =”124,58,8的“href =”venus.htm“目标=”_blank“ 
  按ALT =“维纳斯”/“ 
 “/图” 

结果

添加的JavaScript

我们可向图像地图内部的<area>标签添加(能调用的JavaScript的)事件。<area>标签支持以下事件:onclick,而onDblClick,onMouseDown,onMouseUp,通过鼠标,onMouseMove,鼠标移开,onKeyPress,onKeyDown,onKeyUp,onFocus和的onblur。

这是添加了JavaScript的的上面的例子:

<html> 
的<head> 
 <script type="text/javascript"> 
功能WRITETEXT语句(本文档) 
 ( 
 document.getElementById(“降序”)。的InnerHtml =本文档
 ) 
 “/脚本” 
 “/头” 

的<Body> 
 “IMG的src =”planets.gif“宽度=”145“高=”126“ 
按ALT =“行星”usemap =“#planetmap”/“ 

 <map编号="planetmap" name="planetmap"> 
 “区域的形状=”矩形“coords =”0,0,82,126“
通过鼠标=“WRITETEXT语句('太阳和天然气巨头
类似木星的行星是迄今最大的对象
在我们的太阳系。')“ 
的HREF =“sun.htm”目标=“_blank”按ALT =“太阳”/“ 

 “区域的形状=”圆“coords =”90,58,3“
通过鼠标=“WRITETEXT语句('水星的非常
难以从地球上的研究,因为它是
总是如此接近太阳。')“ 
的HREF =“mercur.htm”目标=“_blank”按ALT =“水星”/“ 

 “区域的形状=”圆“coords =”124,58,8“
通过鼠标=“WRITETEXT语句('直到20世纪60年代,维纳斯
经常被认为是孪生姐妹,因为对地球
金星是最接近地球给我们,因为
两颗行星似乎有许多共同的特点。')“ 
的HREF =“venus.htm”目标=“_blank”按ALT =“维纳斯”/“ 
 “/图” 

 <p id="desc">“/页” 

 “/体” 
 “/的HTML”
(责任编辑:大宝库)


------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接