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

随机推荐

oracle锁表进行关闭
--查询被锁表 select 'alter system kill session '''||sess.sid||','||sess.serial#||''';', sess.sid, sess.se ...
eclipse启动错误：An internal error occurred during: "reload maven project".
解决方案一: 简单粗暴!直接删除E:\eclipseWorkspace\.metadata目录!然后再单个导入eclipseWorkspace中的项目. 解决方案二: 打开这个配置文件:E:\ecli ...
头像文件上传方法一：from表单方法二：ajax
方法一:from表单 html 设置form表单,内包含头像预览div,内包含上传文件input 设置iframe用来调用函数传参路径 <!--表单提交成功后不跳转处理页面,而是将处理数据返回给 ...
MyBatis数据持久化（六）resultMap使用
resultMap是MyBatis最强大也是最重要的特性,使用它我们可以將查询结果或者sql输入条件和一个HashMap的key进行映射,大大简化了sql查询条件的输入,而且使得数据的查询变得非常灵活 ...
利用canvas制作简单的logo
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
Matlab--从入门到精通（chapter2 matlab 基础知识）
Chapter2 Matlab 基础知识 1.基本数学运算符号注:矩阵的右除是一般意义的除法,但是左除具有对称意义,即A./B=B.\A 2. 命令行中的常用标点 3.常见的操作命令 4.输出数据显 ...
mysql 查询格式化时间
select DATE_FORMAT(addtime,'$m %d %Y') from tablename 输出:01 28 2019 数据库时间格式:2019-01-28 15:01:20
How Javascript works (Javascript工作原理) (十) 使用 MutationObserver 监测 DOM 变化
个人总结: 这篇文章介绍了几种监测DOM变化的方法,重点介绍的是一个新浏览器API叫做MutationObserver. 注意:不要和Vue.js种 Object.defineProperty() 的 ...
tinymce原装插件源码分析（六）-preview
priview 此插件文件结构比较简单,按钮注册.editor.windowManager.open.窗口出现之前的渲染数据的准备.页面代码的准备. 注意: 1.preview的默认宽高设置: 2.c ...
C/C++ ShellExecuteEx调用exe可执行文件
本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/49591995 以商业的软件Enblen ...

HTML图片映射

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

随机推荐

热门专题