usemap做一个图片识别

最新推荐文章于 2021-09-30 01:33:40 发布

原创最新推荐文章于 2021-09-30 01:33:40 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#验证码 #usemap #图片

html 同时被 2 个专栏收录

5 篇文章

订阅专栏

css

4 篇文章

订阅专栏

本文介绍了如何使用HTML中的usemap属性实现一种新颖的图片验证码形式。通过定义不同形状的热点区域，用户可通过点击这些区域来进行验证，增加了验证码的安全性和趣味性。

验证码给大家的印象就是一个随机号码，感觉很枯燥：

用usemap来做一个图片识别验证码

效果

这里写图片描述

usemap用法介绍

usemap 属性提供了一种“客户端”的图像映射机制.
他可以将一个图片在网页中更具用户的map 划一个区域area来表示逻辑映射。

这个area有以下属性：

shape=”rect”:热点的形状shape为矩形rect(rectangular);
style=”cursor:hand”:鼠标指针cursor的样式为手hand;
href=”login.jsp”:超连接到login.jsp页面;
coords=”50,50,100,100”:这用属性用来描述这个指点区域的具体位置.

其中，coords就是表示从xy的50,50这个点开始划区域，画的区域大小是100X100.

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="1002">
    <tbody><tr>
        <td><img src="https://img-blog.youkuaiyun.com/20160622101737689" usemap="#Map"></td>
    </tr>
    </tbody></table>
<map name="Map" id="Map">
    <area shape="rect" coords="0,0,173,200" href="JavaScript:alert('母鸡')">
    <area coords="173,0,373,200" href="JavaScript:alert('小狗')" shape="rect">
    <area href="JavaScript:alert('猫')" coords="374,0,564,202" shape="rect">
</map>
</body>
</html>