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 giant
planets like Jupiter are by far the largest objects
in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The planet Mercury is very
difficult to study from the Earth because it is
always 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 was
often considered a twin sister to the Earth because
Venus is the nearest planet to us, and because the
two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
<p id="desc"></p>
</body>
</html>
分享到：
相关推荐
观看方法：打开里面的html文件就可以观看学习了!! 本视频为系列教程【第一章】 本章内容介绍： 1_01：HTML背景知识 http://download.csdn.net/source/2788449 ...1_08：客户端图像地图 欢迎下载学习！~
百度地图JavaScript API是百度提供的一款强大的地图开发工具，主要用于在网页上实现地图的展示、交互以及自定义功能。离线版3.0主要是为了让开发者在没有网络连接的情况下也能使用地图服务，这对于那些需要在局域网...
ArcGIS API for JavaScript的核心功能包括地图创建、图层管理、地理编码、空间分析等，而将它与百度地图结合，可以利用百度地图丰富的服务，如卫星图像、街景视图、实时交通情况等。以下我们将详细探讨这一集成过程...
Google 地图 JavaScript API 是一个强大的工具，允许开发者在网页上集成交互式地图功能。这个API提供了丰富的功能，包括定位、地图显示、标记、信息窗口、路径绘制、地理编码、覆盖物以及各种事件处理等。下面我们将...
在GIS领域，ArcGIS API for JavaScript是一个强大的工具，它允许开发者构建交互式的地图应用程序。本文将深入探讨如何利用ArcGIS API for JavaScript 4.10版本加载天地图，包括其矢量底图、影像地图和地形图。我们将...
6. **性能优化**：如果地图包含大量图像或数据，直接缩放可能导致性能下降。可以考虑使用分块加载技术，只加载可视区域内的地图数据，或者使用WebGL等技术提高渲染效率。 7. **库和框架**：虽然这里讨论的是纯...
6. **地图渲染**：在用户端，JavaScript代码需要解析存储的瓦片数据，根据当前地图的中心点和缩放级别，正确地加载和显示相应的瓦片图像。同时，还需要处理地图的平移、缩放和其他交互操作。 7. **性能优化**：考虑...
"基于JavaScript实现离线电子地图" 电子地图是GIS的一种，它具备了地理信息系统的大多数功能。电子地图能够把数字信号（包括对数字地图、遥感数字图像及自行数字化采集的数据进行可视化处理后形成的数字信号）和...
JavaScript地图是一种基于JavaScript技术实现的交互式地理信息系统，它允许开发者在网页上创建动态、可交互的地图展示。这种技术广泛应用于网站、应用中，提供地理位置信息的可视化，如天气预报、交通状况、商业分布...
对于谷歌地图的影像，我们可以使用`esri.layers.OpenStreetMap`类，这是一个预设的图层类型，可以轻松地将开放街图数据，包括谷歌地图的卫星图像，加载到我们的地图上。以下是一个简单的示例代码： ```javascript ...
在百度地图API中，我们可以使用`BMap.Icon`类创建自定义图标，设置其大小、位置以及图像源（这里就是`person.png`）。 - 通过将这个自定义图标应用到`BMap.Marker`实例，我们可以在地图上显示个性化的标记。 3. **...
街景视图是 Google Maps API V3 中的一种组件，用于在地图上显示街景图像。开发者可以使用 StreetViewPanorama 对象来配置街景视图的基本属性，如位置、heading、pitch 等。 事件 事件是 Google Maps API V3 中的...
JavaScript REST地图与WMS地图的叠加是WebGIS应用中常见的技术操作，主要涉及SuperMap iClient 6R库以及WMS（Web Map Service）服务。本文将深入探讨这两种地图服务的叠加原理，以及如何在JavaScript环境中实现这一...
在本项目中，我们将探讨如何利用图片拼接技术和JavaScript实现地图的拖拽和缩放功能，并且会提及一个C#编写的图片切割程序。 首先，我们要理解瓦片地图的工作原理。瓦片通常以256x256像素的大小进行切割，基于Web ...
### ESRI解决方案：构建基于Flex API和JavaScript API的地图应用 #### 深入解析：ESRI解决方案中的核心要素 在当今数字化时代，地理信息系统（GIS）已成为各行各业不可或缺的一部分，尤其在城市规划、自然资源管理...
观看方法：打开里面的html文件就可以观看学习了!! 本视频为系列教程【第一章】 本章内容介绍： 1_01：HTML背景知识 http://download.csdn.net/source/2788449 ...1_08：客户端图像地图 欢迎下载学习！~
天地图是中国的一个权威地理信息系统，提供了丰富的地图数据服务，包括基础地图、卫星图像、地形图等。在内网环境下，由于网络限制，通常无法直接连接到天地图的在线服务，因此需要采用离线方式来使用其地图资源。 ...
首先，理解"天地图"是国家测绘地理信息局推出的一款免费的公开地图服务，提供了丰富的地理信息数据，包括矢量图层（道路、建筑等）、注记图层（地名、文字标注）和影像图层（卫星或航空遥感图像）。 加载天地图到...
标题 "类似谷歌地图javascript.rar" 暗示了这个压缩包包含的是与谷歌地图相关的JavaScript代码，用于实现类似于谷歌地图的交互功能，如滑动、定位等。这可能是一个自定义的地图库或者是一组用于增强谷歌地图API功能...