<map>标签：带有可点击区域的图像映射

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

效果图：

点击相应蓝色标签可进入详情页面浏览。

代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图像映射-Map</title>

</head>

<body>

    <h1>图像映射示例</h1>

    <img src="home.jpg" alt="" width="584px" height="399px" usemap="#homeMap"/>

    <map name="homeMap" id="homeMap">

        <area shape="circle" coords="160,270,20" href="coach.jpg" alt="沙发" target="_blank"/>

        <area shape="circle" coords="250,130,20" href="Painting.jpg" alt="挂画" />

        <area shape="circle" coords="160,370,20" href="carpet.jpg" alt="地毯" />

        <area shape="circle" coords="510,50,20" href="clapboard.jpg" alt="地毯" />

    </map>

</body>

</html>

讲解：

图像映射map的更多相关文章

  1. 图像映射<map>、<area>

    1.<map>定义图像映射,图像映射(image-map)指带有可单击区域的一幅图像. 2.<area>定义图像映射中的区域,area元素永远嵌套在map元素内部,area元素 ...

  2. HTML <map> 标签－创建带有可点击区域的图像映射

    定义和用法 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 所有主流浏览器都支持 <map> 标签. 注释:area 元素永远嵌套在 map 元素内部. ...

  3. 带有可点击区域的图像映射：HTML <map> 标签

    实例 带有可点击区域的图像映射: <img src="planets.jpg" border="0" usemap="#planetmap&qu ...

  4. html 图像映射（一个图像多个连接）

    以前就见过那种导航地图,点击地图的不同省份分别跳到不同的连接,现在用html实现一下,简单的. 图像映射是指一个图像可以建立多个连接,就是在图像上面定义多个区域,每个区域连接到不同的地址. 效果如图: ...

  5. html 图像映射

    个人先做而一个例子 <body> <img src="图像映射/enterdesk.com-D69055E2B422567CB273963EA05FF7D4.jpg&quo ...

  6. HTML图像映射

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. HTML <area> 标签 带有可点击区域的图像映射（图像映射指的是带有可点击区域的图像）

    例子: <img src="planets.gif" width="145" height="126" alt="Plane ...

  8. 图像热点&图像映射

    图像映射 图像映射也称为图像热点. 作用: 让同一张图片上的不同区域,可以实现多个不同的超链接功能. 图示: <map>图像映射三步走: 图像映射的实现需要三方面配合完成: 1.图像映射容 ...

  9. HTML <img>标签 创建图像映射

    初级前端一枚 下面代码是在图片上创建图像映射 自己整理了下 做个笔记 希望也可以帮助后来学习的朋友! <map name="planetmap"> <area s ...

随机推荐

  1. Jquery的multifile使用随记

    1.多文件上传: 2.如上几个验证不重复,和限制上传数量的验证显示的是英文,改成中文文本时,如果不用国标解码,到时候提示框会出现乱码现象.所以一般需要中文显示的时候,我们应该这样做: 拿denied做 ...

  2. BI先特技软件 Analyzer安装时的部分问题

    废话不多,先看第一个问题,我先运行了 Analyzer.3.0.2357b.64.exe 然后就是傻瓜式地下一步 好的,现在问题来了,当我运行安装完毕的Analyzer时,页面给了我这样的提示“ HT ...

  3. 03人人都应该了解的10个 jQuery 小技巧

    1  返回顶部按钮 你可以利用animate和scrollTop来实现返回顶部的动画,而不需要使用其他插件. // Back to top $('a.top').click(function () { ...

  4. 骨骼动画的实现(OpenGL实现)

    人物模型动画一直是游戏中最重要的组成部分, 因此这里我们研究骨骼动画是如何实现的. 原理 首先模型通常是由多个三角形形成的网格构成, 每个三角形有三个顶点, 因此动画的根本原理就在于不同时间内为每个顶 ...

  5. LIstView 滚动 异步 加载更多 mono for android ScrollStateChanged ScrollState.Idle; Fling;TouchScroll

    今天项目需要实现一下列表的分页加载 找到了Listview的ScrollStateChanged方法. 和大家分享一下 //先找到Listview ListView order = FindViewB ...

  6. vc编译 curl 7.36.0

    CURL邮件列表中提到官方最新版本的windows devel包中缺少文件,而我又用不到https,所以我就自己下载源码包来编译了 下载源码包:http://curl.haxx.se/download ...

  7. clearTimeout消除闪动

    需求:当鼠标放到父级菜单上面的时候,显示下方的子菜单.鼠标从子菜单或者父级菜单上面移开的时候,子菜单要收起来.最终效果如下: PS:这样需求很常见,最常见的做法是li元素下面再嵌套一个Ul元素来包含子 ...

  8. SpeechLib 语音播报

    SpeechLib这的dll专门用来播放语音,能够识别英语.简体和繁体.并且可以播放声音文件,支持WAV格式,但不支持MP3.在报警场合下已经够用了. 基本播放语音及文件.支持异步. using Sy ...

  9. C#调试入门篇

    DotNet程序的调试,是DotNet程序员必备的技能之一,开发出稳定的程序.解决程序的疑难杂症都需要很强大的调试能力.DotNet调试有很多方法和技巧.现在本文就介绍一下借助DebugView工具进 ...

  10. Open Source Cassandra Gitbook for Developer

    Just released an open source Cassandra Gitbook for developer. http://teddymaef.github.io/learncassan ...