HTML图片映射

<img>图片映射

<map>与<area>一起使用来定义一个图像映射(一个可点击的链接区域).

<img src="cat.jpg" alt="圣诞猫" usemap="#catmap">

  <map name="catmap">

      <area shape="" coords="" href="" target="_blank" alt="">

      <area shape="" coords="" href="" target="_blank" alt="">

  </map>

<map>中name属性：

name属性给map一个名字用来查询，这个属性是必须的，值必须不能为空并且不能带空格。name属性不准与同文档中其他map元素的值相同，如果id属性也被添加，name属性和id属性的值必须相同。

<area>元素必须拥有一个<map>元素祖先元素，但不一定是直接的父元素。只允许有开始标签不允许有结束标签。

<area>中坐标从左上角(0,0)点起，向右x轴，向下y轴，（中心点获取可用qq的截图功能，从左上角开始截图，长宽即为中心点坐标）

shape属性：“circle”、“rect”、“poly”，

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>图片映射</title>

</head>

<body>

  <img src="cat.jpg" alt="圣诞猫" usemap="#catmap">

  <map name="catmap">

      <area shape="circle" coords="204,511,40" 
href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541497764763&di=f515456a13384605e140751e455323d9&imgtype=0&src=http%3A%2F%2Fpic21.photophoto.cn%2F20111125%2F0017030594470929_b.jpg" 
target="_blank" alt="">

      <area shape="rect" coords="287,486,359,545" 
href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541497911660&di=59b640621e3342303cfbbef44685075a&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3414111129%2C2073799617%26fm%3D214%26gp%3D0.jpg" 
target="_blank" alt="">

  </map>

</body>

</html>

HTML图片映射的更多相关文章

HTML CSS简介与图片映射
1. CSS 入门内联样式:在 HTML 元素中使用 “style” 属性,需要将表现与内容混在一起: 内部样式表:在 HTML 文档头部 <head> 区域使用 <style&g ...
css图片映射
a <div class="imagemap"> <img src="img/map.png" width="496px" ...
HTML图片映射实用
大图的不同点击区域实现不同的超链接: <img src="planets.gif" width="145" height="126" ...
compass Sprites 雪碧图小图片合成[Sass和compass学习笔记]
demo 源码地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法 ...
使用图片地图减少HTTP请求数量
前言最近在看<高性能网站建设>,记录一下所学. 现在很多网站都是图片形式的导航,点击图片跳转到对应的链接.如果导航项目很多的话,图片的数量就会很多,每需要加载一张图片就会多一个HTTP请 ...
验证码识别之w3cschool字符图片验证码(easy级别)
起因: 最近在练习解析验证码,看到了这个网站的验证码比较简单,于是就拿来解析一下攒攒经验值,并无任何冒犯之意... 验证码所在网页: https://www.w3cschool.cn/checkmph ...
[Deep-Learning-with-Python]GAN图片生成
GAN 由Goodfellow等人于2014年引入的生成对抗网络(GAN)是用于学习图像潜在空间的VAE的替代方案.它们通过强制生成的图像在统计上几乎与真实图像几乎无法区分,从而能够生成相当逼真的合成 ...
[图片生成]使用VAEs生成新图片
变分自动编码器生成图片从隐图像空间进行采样以创建全新的图像或编辑现有图像是目前创作AI最受欢迎和最成功的应用方式. 图像隐空间取样图像生成的关键思想是开发表示的低维潜在空间(自然是矢量空间),其中 ...
图片压缩-KMeans
下面给大家一起分享使用KMeans自动聚类,压缩图片像素点.每种图片可能他们的维度都不同,比如jpg一共有(w,h,3)三维,但是灰度图只有一维(w,h,1),也有四维的图片(w,h,4)等等.我们可 ...

随机推荐

Qt开发环境的搭建
首先讲讲为什么要用Qt这个东东吧!用了以后才知道,这门语言真的很不错,我权当把它当成了类库来用,Linux本身的C语言编程是很烦的,比如说串口编程,虽说C编程也不难,但是使用Qt这种封装的类库来操作的 ...
学习es6 setter/getter研究
1.背景在ES6中,我们对类的定义如下 class Person { // 构造函数 constructor (name) { // 属性初始化 this.name = name; } // 成员方 ...
kindEditor编写插件遇到的问题
kindEditor是一个功能强大的在线文本编辑器,而且提供了插件扩展功能,更好的满足用户各方面的需求.在项目中,我们就有如此的需求:在kindEditor编辑器中,添加一条下划线,并且在下划线的中间 ...
JQuery插件的写法（转：太棒啦！）
JQuery插件写法的总结最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户端UI的效率.JQuery本身提 ...
html5学习之第一步：认识标签，了解布局
图1. Acme United的网页的规划 Header区的例子包含了页面标题和副标题,< header>标签被用来创建页面的Header区的内容.除了网页本身之外,< header ...
[POJ2823][洛谷P1886]滑动窗口 Sliding Window
题目大意:有一列数,和一个窗口,一次能框连续的s个数,初始时窗口在左端,不断往右移动,移到最右端为止,求每次被框住的s个数中的最小数和最大数. 解题思路:这道题是一道区间查询问题,可以用线段树做.每个 ...
洛谷 P1373 小a和uim之大逃离（差值型dp总结）
这道题和多米诺骨牌那道题很像 ,都是涉及到差值的问题. 这道题是二维的,同时要取模. 这种题,因为当前的决策有后效性,会影响到差值,所以直接把差值作为维度,然后计算答案的时候把差值为0的加起来就行了 ...
紫书习题 8-16 UVa 1618 （中途相遇法）
暴力n的四次方, 然而可以用中途相遇法的思想, 分左边两个数和右边两个数来判断, 最后合起来判断. 一边是n平方logn, 合起来是n平方logn(枚举n平方, 二分logn) (1)两种比较方式是相 ...
linux进程管理之轻量级进程（四）
在Linux中,轻量级进程可以是进程,也可以是线程.我们所说的线程,在Linux中,其实是轻量级进程之间共享代码段,文件描述符,信号处理,全局变量时: 如果不共享,就是我们所说的进程. 进程是资源管理 ...
redis为什么选择单线程工作模型
1.先说一下为什么出现进程,线程进程:在计算机发明之初就发现,在输入数据时(I/O速度慢),CPU是空闲的,这样就浪费了CPU资源,为了充分利用CPU资源,发明了进程,在输入程序A的数据时,程序B在 ...

HTML图片映射

HTML图片映射的更多相关文章

随机推荐

热门专题