HTML <img>标签 创建图像映射
初级前端一枚 下面代码是在图片上创建图像映射 自己整理了下 做个笔记 希望也可以帮助后来学习的朋友! <map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="poly" coords="23,58,8,59,40,70" alt="Venus" href="venus.htm">
</map> 该段代码中的shape指的是点击区域的形状,coords指的应该是链接区域在图片中的坐标(像素为单位)。 shape
1、rect 矩形
2、circle 圆形
3、poly 多边形
coords
1、距形:左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2)
2、圆形:(圆心坐标为(X1,y1),半径为r)
3、多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)
HTML <img>标签 创建图像映射的更多相关文章
- HTML创建图像映射,布局,表单
来源: 实验楼 创建图像映射 在这之前我们动手试验过将图片作为链接来使用,触发链接的方式就是点击图片的任何地方都可以链接到跳转地址,有时我们需要实现,点击图片的不同地方跳转到不同的地方.意思就是,一张 ...
- HTML <area> 标签 带有可点击区域的图像映射(图像映射指的是带有可点击区域的图像)
例子: <img src="planets.gif" width="145" height="126" alt="Plane ...
- HTML <map> 标签-创建带有可点击区域的图像映射
定义和用法 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 所有主流浏览器都支持 <map> 标签. 注释:area 元素永远嵌套在 map 元素内部. ...
- 带有可点击区域的图像映射:HTML <map> 标签
实例 带有可点击区域的图像映射: <img src="planets.jpg" border="0" usemap="#planetmap&qu ...
- html 图像映射(一个图像多个连接)
以前就见过那种导航地图,点击地图的不同省份分别跳到不同的连接,现在用html实现一下,简单的. 图像映射是指一个图像可以建立多个连接,就是在图像上面定义多个区域,每个区域连接到不同的地址. 效果如图: ...
- 图像映射map
<map>标签:带有可点击区域的图像映射 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 效果图: 点击相应蓝色标签可进入详情页面浏览. 代码: < ...
- 图像热点&图像映射
图像映射 图像映射也称为图像热点. 作用: 让同一张图片上的不同区域,可以实现多个不同的超链接功能. 图示: <map>图像映射三步走: 图像映射的实现需要三方面配合完成: 1.图像映射容 ...
- 使用ZwMapViewOfSection创建内存映射文件总结
标 题: [原创]使用ZwMapViewOfSection创建内存映射文件总结 作 者: 小覃 时 间: 2012-06-15,02:28:36 链 接: http://bbs.pediy.com/s ...
- html 图像映射
个人先做而一个例子 <body> <img src="图像映射/enterdesk.com-D69055E2B422567CB273963EA05FF7D4.jpg&quo ...
随机推荐
- Android recyclerView的空数据显示
直接分享链接:http://blog.csdn.net/whitley_gong/article/details/51244723
- 【操作教程】利用YCSB测试巨杉数据库性能
一.前言 巨杉数据库(SequoiaDB)是国内第一款新一代文档型分布式数据库,巨杉数据库由巨杉软件完全自主研发,拥有完全自主知识产权,不基于任何其它的开源项目.SequoiaDB数据库是为分布式存储 ...
- 使用docker-compose搭建AspNetCore开发环境
1 使用docker-compose搭建开发环境 我们的目标很简单:使用docker-compose把若干个docker容器组合起来就成了. 首先使用Nginx代理所有的Web程序,这样只需要在主机上 ...
- java udp服务器设计源码
根据个人理解写的,轻喷. 没什么大的逻辑,直接上代码. UDPServer.java package mySocket;/* * 服务器端 */import java.awt.GridLayout;i ...
- ReIn
package JBJADV003; import java.io.*;import java.util.Scanner; public class ReIn { /** * @param args ...
- Docker快速入门
Docker已经火了很长一段时间,最近打算在阿里云上好好熟悉一下Docker的相关应用,为今后的工作做准备. 基本概念 Docker是基于Go语言实现的云开源项目,诞生于2013年初,最初发起者是do ...
- Linux - iostat命令详解
简介 iostat可以提供更丰富的IO性能状态数据,iostat命令有两个用途: 输出CPU的统计信息 输出设备和分区的I/O统计信息 命令语法及参数说明 语法: iostat [ -c | -d ] ...
- 快学Scala之特质
一个Scala类可以继承多个特质(trait), 特质可能会要求使用它们的类支持某个特定特性, 与Java接口不同, Scala特质可以给出这些特质的缺省实现. 要点如下: Scala中类只能继承一个 ...
- java获取mp3的时长和播放mp3文件
所需包为jaudiotagger-2.2.6-SNAPSHOT.jar和jl1.0.1.jar. import java.io.BufferedInputStream; import java.io. ...
- 关于单页应用(SPA)的经验之谈
时下SPA单页应用如火如荼,对前端乃至后端开发都带来不小的冲击和变革.笔者整理了下笔记,决定写一下以前基于iframe做单页博客的一些经验方法. 对于单页应用,笔者没有找到最官方的定义.在笔者看来,在 ...