`
igogogo9
  • 浏览: 250853 次
  • 性别: Icon_minigender_1
  • 来自: 海口市
社区版块
存档分类
最新评论

HTML元素 - map

阅读更多
定义

包含客户端图像映射的坐标数据。

Contains coordinate data for client-side image maps.
注释

所谓图像映射,就是带有预先定义区域的图像,这些区域包含了指向其它文档或锚的链接。例如,你可以在一副太阳系的图像上创建用户点击后可浏览不同星球的链接。

map 对象由 IMG 元素的 USEMAP 属性引用,格式如下:

<IMG SRC="solarsys.gif" USEMAP="#SystemMap">

MAP 元素包含一组定义图像中链接区域的 AREA 元素。

例如,你可以在一副太阳系的图像上创建用户点击后可浏览不同星球的链接。This element。

此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用,在 Internet Explorer 4.0 及以上版本的脚本中可用。

此元素不会改变显示。

此元素需要关闭标签。

An image map is a graphic image, with predefined regions, that contains links to other documents or anchors. For example, you could create an image of the solar system containing links that the user can click to navigate to pages for the individual planets.

The map object is referenced with the USEMAP attribute in an IMG element, as follows:

<IMG SRC="solarsys.gif" USEMAP="#SystemMap">

A MAP element contains a set of AREA elements defining the linking regions in the image.

包含客户端图像映射的坐标数据。就是带有预先定义区域的图像,这些区域包含了指向其它文档或锚的链接。

This element is available in HTML as of Internet Explorer 3.0, and in script as of Internet Explorer 4.0.

This element is not rendered.

This element requires a closing tag.
示例代码

linking regions in the image.下面的例子提供了一个太阳系的图像映射代码。

下面的例子提供了一个太阳系的图像映射代码。该代码在 MAP 元素中使用 AREA 元素及其 COORDS 值和 SHAPE 标签属性创建了由图象映射指向单个行星图像的链接。用户可以点击太阳或其它星球来单独浏览单个星球的图像,要返回到太阳系图像映射,用户可以单击后退按钮。

This example provides the full code for an image map of the solar system. It creates links from the image map to individual images of the planets using the AREA element with the MAP element, COORDS value, and SHAPE attribute. The user clicks the sun or any planet to link to an individual image. To return to the solar system image map, the user clicks the Back button.

<P><IMG SRC="solarsys.gif" WIDTH=504 HEIGHT=126 BORDER=0 ALT="Solar System" USEMAP="#SystemMap">



<MAP NAME="SystemMap">

<AREA SHAPE="rect" COORDS="0,0,82,126" HREF="sun.gif" alt="sun">

<AREA SHAPE="circle" COORDS="90,58,3" HREF="merglobe.gif" alt="mercury">

<AREA SHAPE="circle" COORDS="124,58,8" HREF="venglobe.gif" alt="venus">

<AREA SHAPE="circle" COORDS="162,58,10" HREF="earglobe.gif" alt="earth">

<AREA SHAPE="circle" COORDS="203,58,8" HREF="marglobe.gif" alt="mars">

<AREA SHAPE="poly" COORDS = "221,34,238,37,257,32,278,44,284,60,281,75,288,91,267,87,253,89,237,81,229,64,228,54" HREF="jupglobe.gif" alt="jupiter">

<AREA SHAPE="poly" COORDS = "288,19,316,39,330,37,348,47,351,66,349,74,367,105,337,85,324,85,307,77,303,60,307,50" HREF="satglobe.gif" alt="saturn">

<AREA SHAPE="poly" COORDS = "405,39,408,50,411,57,410,71,404,78,393,80,383,86,381,75,376,69,376,56,380,48,393,44" HREF="uraglobe.gif" alt="uranus">

<AREA SHAPE="poly" COORDS = "445,38,434,49,431,53,427,62,430,72,435,77,445,92,456,77,463,72,463,62,462,53,455,47" HREF="nepglobe.gif" alt="neptune">

<AREA SHAPE="circle" COORDS="479,66,3" HREF="pluglobe.gif" alt="pluto">

</MAP>

分享到:
评论

相关推荐

    vue-baidu-map百度地图组件指南

    1. BaiduMap 组件容器本身是一个空的块级元素,如果容器不定义高度,百度地图将渲染在一个高度为 0 不可见的容器内。 2. 没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。当 center 属性为合法地名字符...

    前端项目-image-map-resizer.zip

    "前端项目-image-map-resizer.zip"就是针对这一问题的一个解决方案,它是一个专门用于使HTML图像映射响应式的工具。 HTML图像映射(image map)是通过`&lt;map&gt;`和`&lt;area&gt;`标签来定义图像的可点击区域。在传统的固定...

    echarts-mapJson-master2018.zip

    2. 准备地图容器:在HTML中创建一个用于展示地图的div元素,并设置好宽高。 3. 初始化ECharts实例:使用`echarts.init()`方法初始化ECharts实例,将创建的div元素作为参数传入。 4. 加载地图JSON数据:通过`echarts....

    echarts-map.zip

    - 引入ECharts库和地图资源:首先,你需要在HTML文件中引入ECharts的主库文件(如`echarts.min.js`)以及地图相关的JavaScript文件。 - 初始化容器:在页面上设置一个用于显示地图的div元素,并为其设置合适的宽高...

    bootstrap-map-js-master.zip_ArcGIS api for JS_arcgis bootstrap_a

    这个压缩包"bootstrap-map-js-master.zip"包含了用于实现这一目标的所有核心组件和示例。 ArcGIS API for JavaScript是Esri公司提供的一款强大的JavaScript库,主要用于创建交互式的地图应用程序。它提供了丰富的...

    echarts-mapJson-master.zip

    【标题】"echarts-mapJson-master.zip"是一个包含ECharts地图JSON数据的压缩包,主要用于在ECharts图表库中展示中国省市县级别的地理分布信息。ECharts是一个基于JavaScript的数据可视化库,广泛应用于Web应用程序中...

    jquery-china-map 地图插件

    `jquery-china-map`利用jQuery的这些特性,实现地图元素的选择、操作和事件响应。 ### 2. 地图插件原理 地图插件通常基于SVG(Scalable Vector Graphics)或Canvas绘制地图图形,`jquery-china-map`也不例外。SVG...

    image-map.zip

    4. **image-map.css**:这是CSS样式表,用于定义图像热区及其周围元素的样式。这可能包括热区形状的边框、填充颜色、过渡效果等,以提升视觉体验。 5. **btnsprite.png**:这通常是一个精灵图,包含多个按钮或图标...

    前端开源库-map-canvas

    5. **标记与图层管理**:在地图上添加标记(Marker)或图层(Layer)是常见的需求,Map-Canvas应该提供API来方便地创建、管理这些元素,比如设置标记的位置、样式,或者图层的可见性。 6. **地图瓦片支持**:为了...

    echarts-china-map点击显示省地图

    创建一个用于展示地图的`div`元素,并初始化ECharts实例。在JavaScript中,创建ECharts实例并传入配置项,例如: ```javascript var myChart = echarts.init(document.getElementById('main')); ``` 3. **地图...

    css-effect-map-collection-master.zip

    本篇文章将深入探讨名为"css-effect-map-collection-master.zip"的资源包,它是一个收集了多种美观CSS效果的集合,对于提升WebUI组件和框架的设计感具有重要意义。 首先,我们来看这个压缩包的名称——"css-effect-...

    详解在Angular4中使用ng2-baidu-map的方法

    -- 更多元素和事件绑定 --&gt; &lt;/baidu-map&gt; ``` 这里可以通过`[options]`属性传递地图选项,如中心点、缩放级别等。 4. **定义组件类中的相关数据和方法** 在`app.component.ts`中,导入需要的接口和类,并...

    travel-map.rar

    1. **设置地图容器**:首先在HTML中创建一个div元素作为地图容器,并为其分配一个ID,如 "mapid"。 2. **引入依赖库**:在页面头部引入Leaflet.js、Viewer.js及相关CSS样式文件。 3. **初始化地图**:使用Leaflet的L...

    china-map-xml.rar_map_map.swf xml

    本篇文章将围绕“china-map-xml.rar”这个压缩包中的“map_map.swf”文件和相关XML数据进行详细阐述,探讨如何通过Flash技术和XML数据实现中国地图的互动展示。 首先,"map_map.swf"是一个Flash动画文件,它通常...

    html5-echar-map.zip

    在地图应用中,HTML5的主要贡献在于其Canvas和SVG元素,它们允许开发者直接在浏览器中绘制图形和图像,这对于地图渲染至关重要。 1. **Canvas**:HTML5的Canvas元素是一个可编程的2D图形绘制区域,通过JavaScript ...

    echart-map省、市地图json数据

    2. 准备容器:创建一个HTML元素作为ECharts图表的容器,例如一个`&lt;div&gt;`标签,并设置合适的宽高。 3. 初始化ECharts实例:在JavaScript代码中,使用`echarts.init`方法初始化ECharts实例,传入上一步创建的容器元素...

    echarts-all-map.rar

    3. **初始化ECharts实例**:使用`echarts.init()`函数初始化ECharts实例,将该实例与上面创建的HTML元素关联起来。 4. **配置项设置**:通过`setOption()`方法设置ECharts的配置项,其中包括地图类型、地图数据源、...

    2020-new-coronavirus-live-map-master.zip

    此外,考虑到压缩包内的文件名为“2020-new-coronavirus-live-map-master”,我们可以推测这可能是一个GitHub项目的主分支,包含了一系列的源代码文件(如HTML、CSS、JavaScript)、数据文件(可能是CSV或JSON格式)...

    image-map-resizer:响应式HTML图像映射

    图像贴图调整 这是一个简单的库,可以使HTML Image Maps做出响应,从而使它们自动保持缩放... 此函数返回已绑定到的地图元素数组。 jQuery用法 包括和脚本,然后将以下调用添加到页面底部: $ ( 'map' ) . imageMapRe

Global site tag (gtag.js) - Google Analytics