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

随机推荐

POJ 3299 模拟
水题,但是WA了一屏--- swap的时候忘了把读入的数字也swap了---------..[尴尬] // by SiriusRen #include <cmath> #include & ...
洛谷P1339 [USACO09OCT]热浪Heat Wave(最短路)
题目描述 The good folks in Texas are having a heatwave this summer. Their Texas Longhorn cows make for g ...
Xshell调整终端显示的最大行数(缓冲区)
1 选择会话,按顺序点击文件->属性 ,打开"会话属性"窗口如下在"会话属性"窗口中选择“终端” 修改缓冲区大小的值:其范围为0~2147483647 ...
Uncaught TypeError: undefined is not a function
index.html <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data- ...
HDU 1312 Red and Black【DFS】
搜索虐我千万遍@_@-----一道搜索的水题,WA了好多好多次@_@发现是n,m搞反了-_- 题意-- 给出m行 n列的矩形,其中从@出发,不能跳到#,只能跳到'.'问最多能够跳到多少块'.' 直接搜 ...
swfit的特点
swfit的特点: 1.swift句尾不需要分号,除非你想在一行中写三行代码就加分号隔开. 2.swift不要写main函数,程序默认从上往下执行 3.swift不分.h和.m文件,一个类只有.swi ...
React 第二天
第二天 01 关于Vue和React中key的作用在循环的时候一定要为组件加key 02关于jsx语法的注意事项 jsx中的注释 {/* */} class要写成className label标签 ...
Fiddler 接口测试（Composer）的使用方法
原文:Fiddler 接口测试(Composer)的使用方法下载地址:https://www.telerik.com/download/fiddler 一.Composer简介右侧Composer ...
Qt5.7新特性
简述 Qt5.7发布了,新特性如下. 简述新特性 C11 Support Required from the compiler New Features within existing module ...
Android 之 Eclipse没法生成R文件
这几天被Eclipse整哭了.也怪自己手贱把appcompat_v7给删了. Eclipse创建project假设是兼容4.0下面,会多生成一个projectappcompat_v7,例如以下图: 这 ...

HTML图片映射

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

随机推荐

热门专题