<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. MVVM和MVC的区别

    MVVM(Model-View-ViewModel) 优点:低耦合:可重用:独立开发:可测试 即,将页面与数据分离的模式:将数据绑定工作放到javaScript文件中实现,javaScript文件的主 ...

  2. 形参是ofstream

    今天写了一段代码报错 void GetEigenvalue(pcl::PointCloud<pcl::PointXYZ>::ConstPtr cloud, vector<int> ...

  3. 美帝的emal to message gateway

    Provider Email to SMS Address Format AllTel number@text.wireless.alltel.com AT&T number@txt.att. ...

  4. CSS浮动(float,clear)通俗讲解

    首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流.如下图: 可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为d ...

  5. 使用UG UISTYLER 窗体编辑器，创建对话框 part 2

    接下来看看自动生成的cs文件里的东西吧,下面是之前保存的窗体的cs文件: 如果仅仅做一些UG开发没有太多的语言基础,那并不需要去了解初始函数内的东西.只需要了解下3类入口函数如何修改和如何应用就可以了 ...

  6. MySQL 升级详细步骤 （包括 Percona)

    MySQL 升级步骤 MySQL 5.1.72 升级到 MySQL 5.5.36 鉴于我在升级的时候遇到的麻烦问题,我觉得有必要把一些细节说清楚,免得引起误解了.感觉官方文档上的升级步骤写的比较简单, ...

  7. Javascript 中的this 指向的对象，你搞清楚了吗？

    Javascript 中的this 总让人感到困惑,你能分清以下三种test1(),test2(),test3() 情况下的输出吗? 注:以下Javascript运行环境中为浏览器 //1 this在 ...

  8. Entity Framework 5.0系列之EF概览

    概述 在开发面向数据的软件时我们常常为了解决业务问题实体.关系和逻辑构建模型而费尽心机,ORM的产生为我们提供了一种优雅的解决方案.ADO.NET Entity Framework是.NET开发中一种 ...

  9. Linux vim命令

    介绍 vim命令和vi的操作基本一致,vim命令的参数很多,我在这里列出了一些平时需要用的一些参数,vim主要有两个界面一个是esc的操作界面还有一个是输入i的编辑界面. 移动光标 0 (零):将光标 ...

  10. [stm32] 一个简单的stm32vet6驱动的天马4线SPI-1.77寸LCD彩屏DEMO

    书接上文<1.一个简单的nRF51822驱动的天马4线SPI-1.77寸LCD彩屏DEMO> 我们发现用16MHz晶振的nRF51822驱动1.77寸的spi速度达不到要求 本节主要采用7 ...