HTML 卡的图片

使用 HTML 地图，您可以创建可被攻击的区域。

卡的图片

HTML 主题 <map> 表示图像映射。 图像地图 - 这包括具有可点击区域的图像。 区域由一个或多个标签指定<area>.

尝试在电脑、手机或咖啡上输入如下图所示的内容：

这是如何运作的？

图像映射背后的想法是，您可以根据单击图像的位置选择不同的项目。

要创建地图，您需要一张图像和一些描述可单击区域的 HTML 代码。

图像

图像插入在附加标签之后 <img> Єдина відмінність від інших зображень полягає в тому, що ви повинні додати атрибут usemap:

意义 usemap починається з хеш-тегу # за яким слідує ім'я карти зображення і використовується створити взаємозв'язок між зображенням та картою зображень.

创建地图图像

然后添加元素 <map>.

Елемент <map> використовується для створення карти зображення та пов’язується із зображенням за допомогою необхідного атрибуту name:

Атрибут name повинен мати те саме значення, що і атрибут <img> usemap.

可点击区域

然后添加可点击区域。

可按压的区域显示在附加元素后面 <area>.

可点击区域形状

您必须选择可以单击的区域的形状，并且可以选择以下值之一：

• rect - визначає прямокутну область
• circle - визначає кругову область
• poly - визначає полігональну область
• default - визначає всю область

您还需要确定正确的坐标，以便可以放置可以在图像上按压的区域。

形状=“矩形”

坐标为 shape="rect" 记住，一天到 x，一天到 y。

奥哲，坐标 34,44 розташовані на 34 пікселі від лівого поля та 44 пікселі від верхнього:

坐标 270,350 розташовані за 270 пікселів від лівого поля та 350 пікселів від верхнього:

现在我们有足够的数据来创建一个可以按下的直线区域：

该区域是交互式的，直接链接到“computer.html”页面：

形状=“圆形”

要添加木桩的面积，我首先找到木桩中心的坐标：

337,300

然后输入桩的半径：

44 像素

您现在有足够的数据来创建交互式圆圈区域：

该区域是交互式的，直接链接到“coffee.html”页面：

形状=“poly”

shape="poly" містить кілька координатних точок, що створює фігуру, утворену прямими лініями (багатокутник).

vikorist 可以创作任何人物。

牦牛，也许，牛角面包的形状！

怎样才能让下图中的牛角面包变扁呢，怎么压呢？

我们可以知道牛角面包所有边缘的 x 和 y 坐标：

坐标成对给出，一个用于 x 轴，一个用于 y 轴：

该区域是交互式的，直接进入页面“croissant.html”：

JavaScript 图像映射

交互区域还可以调用JavaScript函数。

添加更多的水 click до елемента <area> 针对浏览器的 JavaScript：

小袋

• 维克里 HTML 元素 <map> щоб визначити карту зображення
• 维克里 HTML 元素 <area> щоб визначити клікабельні області на карті зображення
• Vickory HTML 属性 usemap елемента <img> для вказівки на карту зображення

HTML 图像标签