网站（八）HTML嵌入图片与创建分区响应图

最新推荐文章于 2022-12-04 16:18:35 发布

KeithAlexander

最新推荐文章于 2022-12-04 16:18:35 发布

阅读量622

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记

本文链接：https://blog.youkuaiyun.com/KeithAlexander/article/details/80960411

学习笔记专栏收录该内容

38 篇文章

订阅专栏

本文介绍了如何在HTML中嵌入图片，包括设置图片的src、width、height和alt属性。同时，详细讲解了创建客户端分区响应图的方法，利用map和area元素定义可交互的图像区域，通过shape和coords属性设定不同形状的选区，如矩形、圆形和多边形。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML嵌入图片与创建分区响应图

创建图片

img元素：
- 属性：
  - src：图片位置
  - width：图片宽度
  - height：图片高度
  - alt：设置图片的备用内容

创建客户端分区响应图

元素：
- map：外层元素
- area：内部元素，可以有多个，各自代表一个可选区域
  - 属性：
    - 点击后导航到指定URL：
    - href
    - alt
    - 共同起作用：shape与coords
    - shape：
      - rect：四个整数，矩形的左上右下边缘
      - Circle：三个整数：图像左边缘到圆心的距离，图像上边缘到圆心的距离，半径
      - Poly：多边形顶点坐标，至少六个
      - Default：全部

<!DOCTYPE html>  <!--让浏览器得知自己要处理的内容是html--> 
<!--这是注释-->

<html len="zh"><!--文档中html部分的开始， language = 简体中文-->

<head><!--提供有关文档内容和标注信息的-->

    <meta charset="UTF-8"><!--用UTF-8的方式将网页进行编码-->

    <title>CreateImage</title><!--标题-->
</head>

<body>
<a href="表单元素.html" target="_blank">
<img src="桌面壁纸-3.png" width="500px" alt="Saber by ASK">
</a>

<br><br>
<img src="桌面壁纸-3.jpg" width="500px" alt="Saber by ASK">

<br><br>
<img src="无标题.png" alt="Saber by ASK" usemap="#map" width="600px">
<form>
<input type="image" src="无标题.png" width="600px">
<map name="map">
    <area href="表单元素.html" shape="rect" coords="0,0,203,329" target="_blank">
    <area href="表单元素2.html" shape="rect" coords="204,0,390,329" target="_blank">
    <area href="表单元素3.html" shape="rect" coords="391,0,600,329" target="_blank">
</from>
</map>

<br><br>
<img src="桌面壁纸-2.png" width="500px" usemap="#map2">
<map name="map2">
    <area href="基本元素.html" shape="Circle" coords="200,200,100" target="_blank">
</map>

<br><br>
</body>
</html>