登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

面包会有的

... ...

 
 
 

日志

 
 

JavaScript 图像地图  

2008-08-11 09:27:04|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

实例

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

JavaScript 图像地图

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

实例

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

<img src ="planets.gif" width ="145" height ="126" alt="Planets"usemap ="#planetmap" /><map id ="planetmap" name="planetmap"><area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank" alt="Sun" /><area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank" alt="Mercury" /><area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venus" /></map>

结果

添加 JavaScript

我们可向图像地图内部的 <area> 标签添加(能调用JavaScript的)事件。<area> 标签支持以下事件:onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、onKeyDown、onKeyUp、onFocus和onBlur。

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

<html><head><script type="text/javascript">function writeText(txt){document.getElementById("desc").innerHTML=txt}</script></head><body><img src="planets.gif" width="145" height="126"alt="Planets" usemap="#planetmap" /><map id ="planetmap" name="planetmap"><area shape ="rect" coords ="0,0,82,126"

onMouseOver

="

writeText

('The Sun and the gas giantplanets like Jupiter are by far the largest objectsin our Solar System.')"href ="sun.htm" target ="_blank" alt="Sun" /><area shape ="circle" coords ="90,58,3"

onMouseOver

="

writeText

('The planet Mercury is verydifficult to study from the Earth because it isalways so close to the Sun.')"href ="mercur.htm" target ="_blank" alt="Mercury" /><area shape ="circle" coords ="124,58,8"

onMouseOver

="

writeText

('Until the 1960s, Venus wasoften considered a twin sister to the Earth becauseVenus is the nearest planet to us, and because thetwo planets seem to share many characteristics.')"href ="venus.htm" target ="_blank" alt="Venus" /></map> <p id="desc"></p></body></html>

  评论这张
 
阅读(534)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018