一张图多个超链接

<map>图像映射三步走:

图像映射的实现需要三方面配合完成:

1、图像映射容器,就是一个img标签,需使用usemap属性与map标签建立联系

2、图像映射,就是一个map标签,需要使用name属性与map标签建立联系

3、热点区域,需要使用map标签的子标签area来建立热点区域

语法格式:

<img src="1.jpg" usemap="#Map" />

<map name="Map">

        <area shape="热点形状" coords="坐标" href="链接" alt="替代文字" />

</map>

属性介绍:

<img />需要使用的属性:

usemap:#map的名称

<map>的属性:

name:设置热点区域的名称

<area>的常用属性:

shape:设置热点区域的形状

rect(矩形)、

circle(圆形)、

polygon(多边形)

coords:热点区域的位置坐标,根据shape的不同而不同。

对于rect,坐标为(x1,y1,x2,y2),(x1,y1)矩形左上角,(x2,y2)右下角

对于circle,坐标为(x,y,r),(x,y)圆心坐标,r为半径

对于polygon,坐为(x1,y1,x2,y2,…xn,yn),(xn,yn)为第n个顶点坐标

举例:

  1. 矩形

  1. 圆形

  2. 不规则多边形

时间: 2024-08-09 23:50:33

一张图多个超链接的相关文章

20151008-20151101学习内容之二:用ps把一张图做成HTML页面

用ps把一张图做成HTML页面 table 表格 div+css 切图.切片工具.切图.文件.存储为web所用格式.修改图片大小.GIF.存储.格式: HTML和图像.选择存储位置 1.在ps中打开一个网页模板,利用切片工具进行剪裁 2存储方式是:存储为web所用格式 3设置存储像素1366.GIF格式 4保存到文件夹中以html+图像 的格式 5打开html,打开方式为DW方式打开 6根据网页在进行对其修改 设置超链接:加上超链接网址,然后设置boder="0" <td row

几张图帮你理解 docker 基本原理及快速入门

写的非常好的一篇文章,不知道为什么被删除了.  利用Google快照,做个存档. 快照地址:地址 作者地址:青牛 什么是docker Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linux 基金会,遵从了 Apache 2.0 协议,项目代码在 GitHub 上进行维护. Docker 自开源后受到广泛的关注和讨论,以至于 dotCloud 公司后来都改名为 Docke

一张图搞清楚PMBOK所有过程的使用

很多参加PMP培训的学员大概都会有一个感受,上课时似乎每个知识点都听懂了,大的知识框架也弄明白了,但是所有这些串起来在实践中怎么用呀!说的再直接一点,在考试的时候这些过程和活动是以怎样的逻辑来应用的.不用捉急,看完下面这张图,您就清楚了. (1)注意启动那一栏中的"理解商业论证",要理解成为"理解项目的商业论证"(商业论证是项目立项的原因),因为商业论证将指导项目的所有活动,以确保在项目结束的时候来所有的投资都是值得的.对于商业论证的重要性,很多考生在考试中都不太注

一张图说明环境变量

为了搞懂环境变量,做了一个小实验,体会到环境变量到底是什么样子的. [[email protected] ~]# cat 1.sh #!/bin/bash echo $n [[email protected] ~]# cat 22.sh #!/bin/bash export n=98 /root/1.sh 我在22.sh文件中定义了环境变量n,并且执行1.sh文件.在1.sh文件中执行echo $n  .然后我给两个文件都加上x权限,执行22.sh,我们将会得到什么呢? [[email prot

一张图看懂ANSYS17.0 流体 新功能与改进

一张图看懂ANSYS17.0 流体 新功能与改进 提交 我的留言 加载中 已留言 一张图看懂ANSYS17.0 流体 新功能与改进 原创2016-02-03ANSYS模拟在线模拟在线 模拟在线 微信号sim_ol 功能介绍这是数值模拟.仿真分析领域最大的公众号,没有之一!!! 点上方“模拟在线”查看更多“牛B”资讯! 感谢ANSYS公司对平台的友情支持,本次17.0的改进报告均为ANSYS提供(授权直接摘抄,确实给小编省事不少啊).本次首先带来是流体方面的改进和优化.后续陆续推送结构.电磁等各方

一张图让你明白IOS中bounds和frame的区别

很多人在学习的就搞混了bounds和frame的区别,大家可以看看这张图就会明白它俩的区别: frame: 该view在父view坐标系统中的位置和大小.(参照点是,父亲的坐标系统) bounds:该view在本地坐标系统中的位置和大小.(参照点是,本地坐标系统,就相当于ViewB自己的坐标系统,以0,0点为起点) center:该view的中心点在父view坐标系统中的位置和大小.(参照点是,父亲的坐标系统) 看上图中,如果将ViewA的bounds设置为(-200,-100,550,400)

两张图简说代理服务器和反向代理服务器

题记:今天给同事讲解代理服务器和反向代理服务器时,画了张图进行说明. 代理服务器通常分为两类,即转发代理(forward proxy)服务器和反向代理(reverse proxy)服务器.转发代理服务器又通常简称为代理服务器,我们常提到的代理服务器就指的是转发代理服务器. 转发代理服务器 普通的转发代理服务器是客户端与原始服务器之间的一个中间服务器.为了从原始服务器获取内容,客户端发送请求到代理服务器,然后代理服务器从原始服务器中获取内容再返回给客户端.客户端必须专门地配置转发代理来访问其他站点

疯狂Java学习笔记(60)----------8张图理解Java

1.字符串不变性 下面这张图展示了这段代码做了什么 1 2 String s = "abcd"; s = s.concat("ef"); 2.equals()方法.hashCode()方法的区别 HashCode被设计用来提高性能.equals()方法与hashCode()方法的区别在于: 如果两个对象相等(equal),那么他们一定有相同的哈希值. 如果两个对象的哈希值相同,但他们未必相等(equal). 3.Java异常类的层次结构 图中红色部分为受检查异常.它

Android Adapter应该记住的三张图

关于ListView GridView 等等 需要AdapterView去绘图的控件,无论是面试别人还是别人面试我 ,总是会提到的.其实只要三张图就可以把它们搞的很清楚. 这里做一下备份! 所谓温故而知新, 那么就是下面要分析的Recycler.后续会补上