图像热点链接

指定图片某块区域加超链接 :使用map标签可以给指定图片某块区域加超链接
使用方法:

例:
 <img src="../imgs/1.jpg" alt="" usemap="#map1" />
    <map name="map1" id="map1">
      <area
        shape="rect"
        coords="500px,481px,670px,662px"
        href="./test.html"
        alt=""
      />
      <area shape="circ" coords="774px,582px,86px" href="./test.html" alt="" />
    </map>

1)在html文件中插入一个图片
  <img src=”../img/1.jpg” usemap="">
  属性:
   usemap:将图像定义为客户端图像映射
  
2)在html文档中插入一个map标签
  A. map标签:定义客户端的图像映射,图像映射是带有可点击区域的图像
  B. 为map标签设置id属性and name属性,属性值相同
  
3)为img标签加上usemap属性,属性值为map标签的id/name 
    语法:<img src="1.jpg" usemap="#id/name">
说明:
    img中的usemap属性可引用map中的id或name属性(由浏览器决定)所以需要添加id和name两个属性

4)在map标签内嵌套一个或者多个area标签来实现给指定区域加超链接
   area标签:定义图像映射内部区域area标签始终嵌套在map标签内部
   语法:
   <area shape="" coords="" target="" href="" alt="">
   属性:
     shape:定义区域形状
       属性值:rect-正方形
              circ-圆形
              poly-多边形
     coords:定义可点击区域的坐标(xpx,ypx,npx)
     alt:定义此区域的替换文本
     target:设置超链接的打开方式
     
矩形:shape="rectangle、rect",coords="x1,y1,x2,y2"
     第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。

圆形:shape="circle",coords="x,y,z"
     x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),z 是以像素为单位的圆形半径。

多边形:shape="poly",coords="x1,y1,x2,y2,x3,y3,..."
     每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。
     多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

说明:
(1)如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签;
(2)浏览器会忽略超过图像边界范围之外的坐标。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/848108.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Thread线程控制之sleep、join、setDaemon方法的用处

Thread线程控制之sleep、join、setDaemon方法的用处 sleep方法 public static void sleep(long millis) throws InterruptedException使当前正在执行的线程以指定的毫秒数暂停&#xff08;暂时停止执行&#xff09;&#xff0c;具体取决于系统定时器和调度程序的精度和准确性…

VUE解决跨域问题

一、什么是跨域 当在Vue应用中通过axios等工具发送HTTP请求时&#xff0c;如果请求的目标URL与当前页面的域名、协议、端口号不一致&#xff0c;就会触发浏览器的同源策略限制&#xff0c;导致跨域问题。 跨域问题是由浏览器引起的安全限制&#xff0c;而不是Vue框架本身导致…

记录搭建linux虚拟机学习jenkins自动化部署的全过程

安装虚拟机教程参考 https://juejin.cn/post/7250009145915719740?searchId2024060409134616191B1350EC8E073921 持续集成环境(1)-Jenkins安装 1&#xff09; 安装JDK Jenkins需要依赖JDK&#xff0c;所以先安装JDK1.8 yum install java-1.8.0-openjdk* -y 安装目录为&#…

HTTP相关面试题

1. HTPP基本概念 HTTP是超文本传输协议。本质上就是一个可以传输图片、视频、文字的计算机与计算机之间的协议 1.1. HTTP常见的状态码 2XX状态码: 主要用于表示已经服务器已经成功的处理了请求 [200 ok ]: 是最常见的状态码,表示我们请求成功且响应内容(响应头body)已经收到…

c# 开发的wpf程序闪退,无法用try catch捕获异常

之前开发的一个程序是c#wpf开发&#xff0c;基于.net framework 4.6.1的&#xff0c;一切都是正常的&#xff0c;但是在我重新装了win11后在程序logo出现后直接闪退&#xff0c;报错 返回值为 -1073740791 (0xc0000409)&#xff0c;而且定位到代码时发现是&#xff0c; publi…

【遂愿赠书 - 2期】:618火热来袭,网络安全书单推荐

文章目录 一、网络安全书单背景二、网络安全与编程实践书单2.1 &#x1f3f0;《内网渗透实战攻略》2.2 &#x1f6e1;️《Kali Linux高级渗透测试&#xff08;原书第4版&#xff09;》2.3 &#x1f396;️《CTF那些事儿》2.4 &#x1f680;《权限提升技术&#xff1a;攻防实战与…

kettle学习总结(1)

1&#xff0c;kettle下载 kettle本身是Java开发的开源项目&#xff0c;由于某种原因&#xff0c;目前官网已经不支持下载了&#xff0c;可到我的CSDN中下载 下载完后&#xff0c;还需要安装JDK环境以及对应的数据库驱动包&#xff0c;需要注意的是 该kettle的版本较低&#xff…

惠海H6212L 48V转12V 36V转12V 24V转5V DCDC降压恒压模块供电芯片方案

内置60V高压MOS&#xff1a;H6212L内置了60V耐压的MOS&#xff0c;这使得它能够承受48V的输入电压&#xff0c;从而适应更多的电源环境。 宽电压输入范围&#xff1a;支持8V至48V的宽压输入范围&#xff0c;满足了不同应用场景的电源需求。 输出电压可调&#xff1a;支持输出…

旺店通·企业奇门对接打通金蝶云星空查询盘点盈亏统计接口与其他入库新增接口

旺店通企业奇门对接打通金蝶云星空查询盘点盈亏统计接口与其他入库新增接口 对接系统旺店通企业奇门 慧策最先以旺店通ERP切入商家核心管理痛点——订单管理&#xff0c;之后围绕电商经营管理中的核心管理诉求&#xff0c;先后布局流量获取、会员管理、仓库管理等其他重要经营模…

计算机图形学实验9 RayBounding Valume求交和 BVH查找

计算机图形学实验9 RayBounding Valume求交和 BVH查找 Github地址 RBV,BVH参考文章 前言 光线追踪的基本流程 像素网格生成&#xff1a;首先&#xff0c;我们需要为最终的图像建立一个二维像素网格。每个像素代表屏幕上的一个点&#xff0c;我们的目标是计算出这个点应该显…

重庆耶非凡科技人力rpo蓝海项目能不能做?

随着市场经济的不断发展和企业对人才需求的日益增长&#xff0c;人力资源外包(HRO)已成为众多企业优化资源配置、提升管理效率的重要手段。其中&#xff0c;招聘流程外包(RPO)作为HRO的重要组成部分&#xff0c;更是凭借其专业性和高效性受到了广泛关注。在此背景下&#xff0c…

idea2024年最新激活码,即拿即用

1、Idea2024年最新激活码 idea2024年最新激活码&#xff0c;即拿即用 K384HW36OB-eyJsaWNlbnNlSWQiOiJLMzg0SFczNk9CIiwibGljZW5zZWVOYW1lIjoibWFvIHplZG9uZyIsImxpY2Vuc2VlVHlwZSI6IlBFUlNPTkFMIiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdG…

linux业务代码性能优化点

planning优化的一些改动----------> 减少值传递&#xff0c;多用引用来传递 <---------- // ----------> 减少值传递&#xff0c;多用引用来传递 <---------- // 例1&#xff1a; class A{}; std::vector<A> v; // for(auto elem : v) {} // 不建议&#xff…

HiWoo Cloud物联网云平台

在科技日新月异的今天&#xff0c;物联网&#xff08;IoT&#xff09;已经成为推动社会进步的重要力量。而物联网云平台&#xff0c;作为连接万物、实现智能交互的核心&#xff0c;更是备受瞩目。今天&#xff0c;就让我们一起走进HiWoo Cloud的世界&#xff0c;探寻这款物联网…

云计算中网络虚拟化的核心组件——NFV、NFVO、VIM与VNF

NFV NFV&#xff08;Network Functions Virtualization&#xff0c;网络功能虚拟化&#xff09;&#xff0c;是一种将传统电信网络中的网络节点设备功能从专用硬件中解耦并转换为软件实体的技术。通过运用虚拟化技术&#xff0c;NFV允许网络功能如路由器、防火墙、负载均衡器、…

学习axios拦截器

axios拦截器的作用&#xff1a;用于在请求发送前和响应返回后对请求和响应进行统一处理&#xff0c;例如添加公共请求头、处理请求参数、统一处理错误信息等。拦截器提供了一种灵活、高效的方式来管理HTTP请求和响应&#xff0c;帮助在前端开发中更好地处理数据交互。 这是一个…

YY2/BUB3轴通过调节染色体不稳定性促进SAC过度激活并抑制结直肠癌进展

引用信息 文 章&#xff1a;YY2/BUB3 Axis promotes SAC Hyperactivation and Inhibits Colorectal Cancer Progression via Regulating Chromosomal Instability. 期 刊&#xff1a;Advanced Science&#xff08;影响因子&#xff1a;15.1&#xff09; 发表时间&#…

外文文献下载阅读工具有哪些?

下载和阅读外文文献的工具有很多&#xff0c;其中一些常用的工具包括&#xff1a; Google 学术&#xff1a;可以通过 Google 学术搜索引擎查找和下载大量的学术文献&#xff0c;包括英文文献。 ResearchGate&#xff1a;一个学术交流平台&#xff0c;提供了许多学术论文的下载…

关于vue开发的几个问题

vue前端代码放置了几个月时间&#xff0c;再开发发现一些版本或者配置的问题&#xff0c;记录下来。 一、yarn add总报错certificate has expired 尝试了各种办法&#xff0c;更新或重装yarn&#xff08;npm install --global yarn&#xff09;&#xff0c;清除缓存&#xff…

揭秘业务系统数据安全三大核心问题:“谁在用”、“用什么”和“怎么用”

数据库宛如一座坚固的宝库&#xff0c;守护着无尽的智慧与财富—数据&#xff0c;如同熠熠生辉的金币。当宝库的门紧闭时&#xff0c;金币得以安然无恙。 然而&#xff0c;在业务系统的广阔天地中&#xff0c;这些数据金币被精心挑选、流通使用&#xff0c;每一枚都承载着无尽…