图片热点map——学习Html5笔记

富兴汉
117 阅读2分钟

我和往常一样，一边喝早茶，一边上网和女粉丝侃大山，在手机和平板电脑上整理修改 《C++》 、 《C语言》 、 《Java》 等多年前写的教程，并研究学习各种品牌的小程序。

突然女粉丝问：“陈老师！听说你是公司里的Html5大神？”。
我答：“略懂略懂，略知1、2”。
女粉丝问：“陈老师！你知道图片热点map怎么用吗？”。
我答：“知道！”。
女粉丝问：“可以教我吗？”。
我答：“好的！下面写个教程，你回头等我更新网文吧！”。

Html5中，可以在图片上绘制多个超链接，这样的超链接叫做热。图片上的热点可以把不同的链接联系起来。

<img src"图片地址" usemap="热点图名字">
<map name="图的名称">
<area shape="形状" coords="热点坐标" href"url">
</map>

语法1

1、元素值"usemap"值必须与元素name相同。

2、所有热点要在< map>与< /map>之间。

3、设置参数要对应，在shape设置的是形状，coords中写的是坐标。

设计img元素图片地址和热店名，如html语言1。

<img src="https://mmbiz.qpic.cn/mmbiz_gif/8vADZk3zhGsbWkmltoSiblrgrhdVqb4esPLV4jWibnycq5LoqfLicKibB81uNHY8EI1oUCwFEWB2LGeTjcb1qtf6Hg/0?wx_fmt=gif"  
usemap="Q364807629"/>

html语言1

设计一个热点如html语言2。

<map name="Q364807629">

html语言2

设计一个圆型热点如html语言3。

<area shape="circle" coords="85,188,68" href="https://mp.weixin.qq.com/s?__biz=MzA5MTgyODUyMw==&mid=2247485973&idx=1&sn=4b7a421ad86898cdeea0e7014ba87e51&chksm=90773251a700bb4744c5e2a501b8a859e3d81fc3a355f3dea178aa0c1cccb48bc64d49139c77&token=181129174&lang=zh_CN#rd">

html语言3

设计一个长方型热点如html语言4


<area shape="rect" coords="180,380,280,88" href="https://mp.weixin.qq.com/s?__biz=MzA5MTgyODUyMw==&mid=2247485965&idx=1&sn=40849f4302f30e3626c7a4e8f34196c1&chksm=90773249a700bb5fda86e71c5f60dead619ff20ac11958b1a5111e560abb3805a79998a0e249&token=522679619&lang=zh_CN#rd?">

html语言4

把html语言1~4移植到html5基础框架中如html语言5。


<!DOCTYPE html>
<html>
<head>
<meta charset="GB2312">
<title>学习html5笔记,图片热点map,微信公众号：design-Rabbit</title>
</head>
<body>
<img src="https://mmbiz.qpic.cn/mmbiz_gif/8vADZk3zhGsbWkmltoSiblrgrhdVqb4esPLV4jWibnycq5LoqfLicKibB81uNHY8EI1oUCwFEWB2LGeTjcb1qtf6Hg/0?wx_fmt=gif"  usemap="Q364807629"/>
<map name="Q364807629">
<area shape="circle" coords="85,188,68" href="https://mp.weixin.qq.com/s?__biz=MzA5MTgyODUyMw==&mid=2247485973&idx=1&sn=4b7a421ad86898cdeea0e7014ba87e51&chksm=90773251a700bb4744c5e2a501b8a859e3d81fc3a355f3dea178aa0c1cccb48bc64d49139c77&token=181129174&lang=zh_CN#rd">
<area shape="rect" coords="180,380,280,88" href="https://mp.weixin.qq.com/s?__biz=MzA5MTgyODUyMw==&mid=2247485965&idx=1&sn=40849f4302f30e3626c7a4e8f34196c1&chksm=90773249a700bb5fda86e71c5f60dead619ff20ac11958b1a5111e560abb3805a79998a0e249&token=522679619&lang=zh_CN#rd?">
</map>
</body>
</html>


html语言5

运行html语言5，就可以看到图1的效果，如果还不会运行方法，可以看我以前写的Html5，学习代码运行方法。

注：看到图1页面中字体显示乱马时charset="GB2312"可以改成charset="utf-8"或改为其它的编码方式。

f630489d0a82a1cbeec5add2a91a6756_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

看到上图的效果就说明我们这次的试验成功了，不过用Windows记事本，不会显示出来蓝色区域，要用dreamweaver这类的高级编辑器才能看到上图效果，不过点击依然有热点作用。

杰哥学习笔记分享到这里，会不定期更新，喜欢的粉丝们请收藏、关注、点赞，我的作品。

更多内容请看
虎哥引流器

http://2008622.3vfree.cc/GongNengYie.html
avatar
文章
阅读
粉丝