`
jwfpd
  • 浏览: 127570 次
  • 性别: Icon_minigender_1
  • 来自: 中国安徽
社区版块
存档分类
最新评论

img标签的usemap的用法

阅读更多


 

java 代码
  1. <img src="/images/test.jpg" border="0" usemap="#Map1" name="flag"/>   
  2.   
  3. <map name="Map1">   
  4.   <area shape="rect" coords="0,0,386,27" style="cursor:hand" href="#" />   
  5.   <area shape="rect" coords="194,28,362,65" style="cursor:hand" href="#" />   
  6.   <area shape="rect" coords="197,165,362,199" style="cursor:hand" href="#"/>   
  7.   <area shape="rect" coords="0,196,387,223" style="cursor:hand" href="#"/>   
  8. </map>  
分享到:
评论

相关推荐

    图像的影像地图超链接(热点区域),map标签浅谈

    本文将详细介绍如何使用`&lt;img&gt;`、`&lt;map&gt;`以及`&lt;area&gt;`标签创建图像的热点区域,并探讨其实际应用。 #### 二、基础知识 ##### 2.1 `&lt;img&gt;`标签 `&lt;img&gt;`标签用于在HTML文档中嵌入图像。当结合`usemap`属性使用时,它...

    html map 标签使用

    本文将详细介绍`&lt;map&gt;`标签的基本概念、使用方法及其应用场景。 #### 二、`&lt;map&gt;`标签基本介绍 ##### 2.1 标签定义 `&lt;map&gt;`标签用于定义一个客户端图像映射,该映射由多个`&lt;area&gt;`标签组成,每个`&lt;area&gt;`标签定义...

    html图像地图map标签的使用

    在`&lt;img&gt;`标签中使用`usemap`属性来关联图像与对应的`&lt;map&gt;`标签。其值通常是一个以`#`开头的字符串,对应于`&lt;map&gt;`标签中的`name`或`id`属性值。例如: ```html &lt;img src="example.jpg" usemap="#exampleMap" /&gt; ...

    HTML给位图片上的指定区域(热点)添加超链接.zip

    在压缩包中的资源,"HTML 5 -img- usemap 属性.url"和"2.HTML -img- 标签的 usemap 属性.url"很可能是指向W3School或其他教程网站的链接,这些资源提供了更详细的教程和实例,帮助理解`usemap`属性的用法。...

    Html image 标签 配合 map使用

    以上就是关于HTML中`&lt;img&gt;`标签配合`&lt;map&gt;`使用的基础知识,包括它们的用法、属性以及如何创建交互式图像。在实际开发中,结合CSS和JavaScript,可以进一步增强图像映射的功能和效果,如添加动态反馈、高亮选中区域...

    html中map热点area的使用全部代码和效果,兼容所有浏览器

    首先,`&lt;map&gt;`元素定义了一个图像映射,它不直接显示在页面上,但与`&lt;img&gt;`标签配合使用,为图像提供可交互的区域。例如: ```html &lt;img src="image.jpg" usemap="#myMap" alt="Image with clickable areas"&gt; &lt;!-...

    36个非常重要但常被遗忘的HTML标签

    &lt;img src="logo.png" usemap="#logoMap" /&gt; ,29,135,99" href="#" /&gt; ,78,44" href="#" /&gt; ,137,195,154,135,207" href="#" /&gt; ``` ### 5. `&lt;base&gt;` `&lt;base&gt;` 标签用于指定文档中的所有相对URL的基础URL,...

    Web前端基础:HTML5图像标签.pptx

    &lt;img src="image.jpg" usemap="#planetMap" /&gt; ,0,82,126" href="venus.html" alt="Venus" /&gt; ,58,32" href="mercury.html" alt="Mercury" /&gt; ``` 在这个例子中,用户点击图像中的“金星”和“水星”区域,会被...

    第六课 图像与音视频标签-011

    插入视频的方法与音频类似,可以使用`&lt;object&gt;`标签或者直接使用`&lt;video&gt;`标签。以下是一个使用`&lt;object&gt;`标签插入网络视频的例子: ```html ``` 在这个过程中,保持持续学习的态度至关重要,因为前端技术不断...

    较全的html标签

    - 图像定义: `&lt;img src="map.jpg" usemap="#mapName"&gt;` - 地图定义: `&lt;map name="mapName"&gt;` - 区域定义: `坐标列表" href="URL"&gt;` - 形状可以是`rect`(矩形)、`circle`(圆形)、`poly`(多边形)。 以上...

    html标签使用

    `&lt;img&gt;`标签除了基本的`src`和`alt`属性,还可以设置`width`和`height`调整大小,`title`属性提供鼠标悬停提示,`usemap`用于创建图像映射。 HTML 使用技巧 - 保持代码结构清晰,使用缩进和空行。 - 遵循语义化原则...

    HTML标签大全无需资源分

    ### HTML标签大全详解 ... HTML文档的基本结构由`&lt;html&gt;`标签包裹,其中包含了头部信息(`&lt;head&gt;`)和主体内容...需要注意的是,随着HTML5的普及,一些过时或不推荐使用的标签已经被废弃,建议使用更新的标准来编写网页。

    前端项目-jQuery-rwdImageMaps.zip

    在传统的HTML中,`&lt;img&gt;` 标签可以配合 `usemap` 属性和 `&lt;map&gt;` 标签创建可点击的图像区域,但在响应式设计中,随着图像尺寸的变化,这些区域的坐标不再适应新的图像大小,导致交互失效。这个项目就是为了解决这个...

    html标签全集

    - **`usemap`**: 与 `&lt;map&gt;` 标签结合使用,定义图像上的热点区域。 - **`&lt;map&gt;`** 和 **`&lt;area&gt;`**: 用于定义图像地图中的热点区域。例如,在示例代码中,`&lt;map&gt;` 标签定义了一个名为 "planetmap" 的图像地图,...

    HTML5创建热点区域.pdf

    使用 `&lt;img&gt;` 标签,添加 `src` 属性指定图片路径,并使用 `usemap` 属性定义关联的热点地图。`usemap` 的值应该以 `#` 开头,后跟热点地图的名称,例如 `#pic`。 ```html &lt;img src="图片地址" usemap="#pic"&gt; ``` ...

    jquery.image-maps-master.zip

    5. **初始化插件**:在jQuery的`$(document).ready()`函数中调用插件方法,如`$('img[usemap]').imageMapPro();`。 6. **添加事件处理**:根据需求,可以使用jQuery的事件处理函数添加交互逻辑,如`$('area').on('...

    img

    可以采用以下方法: - 使用适当的文件格式:JPEG适用于照片,PNG适用于带有透明度的图像,SVG适用于矢量图形。 - 压缩图像:使用工具如TinyPNG或ImageOptim减少文件大小而不影响质量。 - 使用响应式图像:通过`...

    网页设计标签.doc

    以下是一些重要的HTML标签及其用法,这些都是网页设计的基础: 1. `&lt;html&gt;`: 这是HTML文档的根元素,它包含了整个网页的内容。 2. `&lt;head&gt;`: 包含文档的元数据,如标题、字符集声明等。 3. `&lt;title&gt;`: 定义浏览器...

    鼠标放在图片就放大,不用JS和CSS

    在HTML中,我们可以使用`&lt;img&gt;`标签来插入图像。例如: ```html &lt;img src="image.jpg" alt="图片描述"&gt; ``` 这里的`src`属性指定图片的URL,`alt`属性提供了一个替代文本,当图片无法显示时,或者对于屏幕阅读器的...

Global site tag (gtag.js) - Google Analytics