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

随机推荐

javascript对象的深度克隆
在做项目的时候需要向对象里面添加新属性,又不想修改原对象.于是就写: var newObj = oldObj,但是新对象属性改变后就对象也会跟着改变,这是因为无论是新对象还是旧对象,指向的内存地址都是 ...
Kotlin 中文文档
Kotlin 中文文档标签: Kotlinkotlin中文文档 2017-02-14 18:14 4673人阅读评论(0) 收藏举报分类: kotlin 转载地址:http://www.tu ...
out ref params
out的使用 out 能够使我们的函数返回多个类型的值,不再受返回类型的设置: 就是相当于在方法里不仅仅给了一个返回值,被out修饰的参数的值也能带出去: 所以就是说,在方法体内被out修饰的参数,都 ...
【原创】websphere部署war包报错
应用程序在Tomcat上运行一切正常,但在websphere上部署时报以下错误:错误 500 处理请求时发生一个错误: /admin/upload.do 消息: WEB-INF/web.xml 详细错 ...
计算a-b的差[返回BigDecimal 类型]
/*** * 返回 a-b 的差 [返回 BigDecimal 类型] * @param a 被减数 * @param b 减数 * @return */ public static BigDecim ...
小程序canvas生成二维码图片踩的坑
1:生成临时图片,保证画布被加载以及渲染(即本身不可以 hidden 或是上级元素不可以 hidden 或是 wx:if 隐藏等) == > 建议:因为 canvas 的组件层级(z-inde ...
HDU 6051 If the starlight never fade（原根+推式子）
题目大意: 设\(f(i)\)为使\((x+y)^i \equiv x^i (mod\ p)\)成立的(x,y)的对数.其中\(1 \leq x \leq p-1 , 1\leq y\leq m\), ...
BZOJ 4472 [Jsoi2015]salesman(树形DP）
4472: [Jsoi2015]salesman Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 417 Solved: 192[Submit][St ...
BZOJ 3790 神奇项链（manacher+贪心）
3790: 神奇项链 Time Limit: 10 Sec Memory Limit: 64 MB Description 母亲节就要到了,小 H 准备送给她一个特殊的项链.这个项链可以看作一个用小 ...
清华EMBA课程系列思考之六 -- 比較文明视野下的中华领导智慧、企业管理与经济解析
告别马年的最后一缕阳光,踏着猴年的钟声,度过了温馨的春节,已然开启了新学期的第一堂课.看题目其貌不扬,但一旦进入课堂,已然聚精会神.唯恐掉队,就请大家跟我一起进入四天的心路修炼旅程,開始我们的新一期思 ...

HTML图片映射

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

随机推荐

热门专题