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)等等.我们可 ...

随机推荐

Linux就该这么学 20181003(第三章管道符)
参考链接https://www.linuxprobe.com/ 输入输出重定向标准输入重定向STDIN 文件描述符0 默认键盘输入标准输出重定向STOUT 文件描述符1 默认输出到屏幕错误输出重 ...
关于JQuery中的事件冒泡
什么是事件冒泡? 事件冒泡就是当父元素和子元素存在同一事件时在子元素的事件处理程序中会自动调用其父级元素的事件处理程序. demo: <!DOCTYPE html> <html xm ...
Django(part3)
URLConf:负责url到view的map,就是一个urls.py module,通常在project和app级别都要定义, #mysite/urls.py from django.conf.url ...
Windows 10 秋季更新错误
uefi 启动丢失修复 bcdboot c:\windows /s y: /f uefi /l zh-cn 0x80240034 你尝试安装的内部版本是有签名的外部测试版.若要继续安装,请启用外部测试 ...
RXjava的简介
API 介绍和原理简析 1. 概念:扩展的观察者模式观察者模式面向的需求是:举一个例子,警察在小偷实施作案的时候实施抓捕,在这一个例子中警察是观察者,小偷是被观察者.但是程序的观察者模式和这个还是有 ...
玩转HTML5移动页面（优化篇）
标签:h5 页面优化收藏热门分享网页设计师必备的酷站收藏网站 2013年不容错过的app ui素材 40个漂亮的扁平化网页设计欣赏国内网页设计公司网站欣赏 55套网页设计常用的psd格式UI ...
[洛谷P2183]巧克力
题目大意:有n块巧克力,每块巧克力有一个大小.巧克力可以切成若干份.现在要你切成大小相等的m块,且尽可能大.求这个大小. 解题思路:我们二分巧克力切成的大小,然后计算能切成多少块,判断即可.由于最大的 ...
【jQuery04】折叠树
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
紫书例题8-4 UVa 11134（问题分解 + 贪心）
这道题目可以把问题分解, 因为x坐标和y坐标的答案之间没有联系, 所以可以单独求两个坐标的答案我一开始想的是按照左区间从小到大, 相同的时候从右区间从小到大排序, 然后WA 去uDebug找了数据 ...
【codeforces 429D】Tricky Function
[题目链接]:http://codeforces.com/problemset/problem/429/D [题意] 给你n个数字; 让你求出一段区间[l,r] 使得 (r−l)2+(∑rl+1a[i ...

HTML图片映射

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

随机推荐

热门专题