首页 > 其他分享 >HTML图像操作

HTML图像操作

时间:2024-11-14 20:15:00浏览次数:3  
标签:定义 点击 HTML 坐标 图像 y1 操作 矩形

1.alt

作用:alt 属性用来为图像定义一串预备的可替换的文本,在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。

代码:<img src="boat.gif" alt="Big Boat">

2.创建图像映射

1.了解HTML的图像标签

标签描述
<img>定义图像
<map>定义图像地图
<area>定义图像地图中的可点击区域

2.代码:

<body>

<p>点击太阳或其他行星,注意变化:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<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="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>

3.效果:

点击太阳或其他行星,注意变化: 

Planets

 点击太阳                 

点击其他行星

 

4.分析:

(1)shape="rect"表示要映射的是一个矩形

(2)coords="0,0,82,126" 表示该矩形的范围多大,前两个参数表示第一个点的坐标,第二个参数表示对角的坐标,从而确定矩形的大小(坐标是以图像为准不是全局)

(3)在map中再次使用herf表示要跳转的图像链接

(4)

矩形:(左上角顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2))

圆形:(圆心坐标为(X1,y1),半径为r)

多边形:(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

标签:定义,点击,HTML,坐标,图像,y1,操作,矩形
From: https://blog.csdn.net/Time_Controller/article/details/143779303

相关文章

  • 响应式Web设计:纯HTML和CSS实现技巧
    响应式Web设计是一种确保网页在不同设备和屏幕尺寸下都能良好显示的设计方法。以下是使用纯HTML和CSS实现响应式设计的关键技巧:流式布局(FluidLayouts):使用相对单位(如百分比)而非固定单位(如像素)来定义元素的宽度,使元素能根据容器宽度动态调整。媒体查询(MediaQueries):根据不同......
  • FastHTML快速入门:服务器渲染超媒体应用的利器
    项目简介FastHTML是一个Python库,它将Starlette、Uvicorn、HTMX和fastcore的FT"FastTags"融合在一起,用于创建服务器渲染的超媒体应用程序。FastHTML类本身继承自Starlette,并增加了基于装饰器的路由、Beforeware、自动将FT渲染为HTML等功能。写作FastHTML应用时需记住的事......
  • CATIA许可证与操作系统的兼容性
    在工程设计领域,CATIA软件以其卓越的三维建模功能而广受赞誉。然而,要确保软件的顺畅运行,CATIA许可证与操作系统的兼容性至关重要。本文将深入探讨这一关键问题,助您实现无忧的软件使用体验。一、兼容性的重要性在数字化时代,软件与操作系统之间的兼容性是确保工作流程顺畅进行的基......
  • MySQL 数据库操作详解:DDL、DML、DQL 和 DCL
    MySQL数据库操作详解:DDL、DML、DQL和DCL在MySQL数据库中,数据定义语言(DDL)、数据操作语言(DML)、数据查询语言(DQL)和数据控制语言(DCL)是四种基本的数据库操作语言。本文将详细介绍这些语言的定义、常用命令以及如何使用它们来管理和操作数据库。1.数据定义语言(DDL)定义:DDL(DataD......
  • MySQL更新操作
    1.insert语法:insertinto表名(列名1,列名2,)values(值1,值2,);语法2:一次性插入多条记录insertinto表名(列名1,列名2,)values(值1,值2,),(值1,值2,);示例:insertintodept(deptno,dname,loc)values(50,'市场部','南京');insertintodept(deptno,dname)values(60,'开发部')......
  • MyBatis操作--初阶
     博主主页: 码农派大星.  数据结构专栏:Java数据结构 数据库专栏:MySQL数据库JavaEE专栏:JavaEE软件测试专栏:软件测试关注博主带你了解更多知识目录 1. MyBatis概念2.MyBatis⼊⻔ 2.1 Navicat安装 2.2数据准备 2.3 配置数据库连接2.4完善持久......
  • html5多媒体标签
    文章目录HTML5新增多媒体标签详解:视频标签与音频标签视频标签`<video>`音频标签`<audio>`代码案例HTML5新增多媒体标签详解:视频标签与音频标签HTML5引入了多项新特性,其中多媒体标签的引入为网页开发带来了革命性的变化。这些标签允许开发者在不依赖第三方插件(如Fl......
  • stringRedisTemplate 异步操作的问题记录
    一、问题背景StringRedisTemplate使用stringRedisTemplate.opsForValue().set时,会出现set之后立马get获取值,发现获取不到set进去的值。二、问题原因1、在使用redisson的情况下,stringRedisTemplate.opsForValue().set操作会是异步操作,造成。你在set之后,立马get获取值的时候会......
  • 第25天目录操作
    目录目录操作函数名:opendir()函数名:closedir()函数名:readdir()函数名:mkdir()函数名:rmdir()函数名:getcwd()---pwd函数名:chdir()---cd文件属性函数名:stat()函数名:lstat()函数名:fstat()stat\lstat\fstat的异同目录操作函数名:opendir()头文件:#include<sys/typ......
  • 第24天文件操作&时间编程
    目录文件操作基于缓冲区的文件操作--高级IO基于非缓冲区的文件操作--低级IO文件描绘符函数:open()函数名:close()函数名write()函数名:read()函数名:lseek()时间编程有关时间的shell命令时间函数(API)函数名:time()函数名:gmtime()函数名:ctime()localtime/gmtime/ctime......