<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. [poi2007] biu

    题意:给定一个图,点n<=105,边m<=106,现在求它的补图有多少个联通分量.. 思路:很容易想到并查集,但是补图边太多了.. 于是只能优化掉一些多余的边.. 具体做法是用队列优化.. ...

  2. HashSet和HapMap取distinct value

    public class TestHashSetAndHashMap { private final int setNum=5000; @Test public void doTest(){ List ...

  3. FreeRTOS和Ucos在任务优先级的区别

    而ucos的任务优先级是任务优先级的数组越小,任务优先级越高.和STM32的中断优先级保持一样的分析,和freeRTOS相反.

  4. LINQ LINQ Operators and Lambda Expression - Syntax & Examples

    LINQ is a cool feature in C# 3.0. Most of the developers are struggling for the syntax and examples. ...

  5. 关于div弹出层的实际应用心得

    今天本人要做一个点击弹出的功能,因为这个功能是最后做的,所以写的时候很纠结, 因为本人小菜一枚, 开始尝试用 position:relative:来做一试不行呀 ,因为用这个来做的话 会打乱原有的布局 ...

  6. Java学习笔记:控制反转

    控制反转(Ioc)模式(又称DI:Dependency Injection)就是Inversion of Control,控制反转.在Java开发中,IoC意味着将你设计好的类交给系统去控制,而不是在 ...

  7. Rubinius 2.0 发布，Ruby 虚拟机

    Rubinius 2.0 发布了,官方发行说明请看这里. Rubinius是一个运行Ruby程序的虚拟机,其带有Ruby的核心库. Rubinius的设计决定了其调试功能的强大,使得在运行时常规的Ru ...

  8. WebRTC实现网页版多人视频聊天室

    因为产品中要加入网页中网络会议的功能,这几天都在倒腾 WebRTC,现在分享下工作成果. 话说 WebRTC Real Time Communication 简称 RTC,是谷歌若干年前收购的一项技术 ...

  9. java 多线程（threadlocal）

    package com.example; import java.util.Random; public class App { public static class MyRunnable1 imp ...

  10. 第二次作业：Github的使用

    Github的使用 一·注册:     要想使用github第一步当然是注册github账号了.之后就可以创建仓库了(免费用户只能建公共仓库),Create a New Repository,填好名称 ...