HTML-图片热点、网页内嵌、网页拼接、快速切图

时间:2022-08-11 02:30:12

图片热点

规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果。与图片链接不同,热点是图片上的某一个区域或多个区域。

我们用魔兽世界图片来做一个图片热点,点击logo、区域和不同人物会连接到对应种族介绍:

HTML-图片热点、网页内嵌、网页拼接、快速切图

HTML-图片热点、网页内嵌、网页拼接、快速切图

HTML-图片热点、网页内嵌、网页拼接、快速切图

在网页中打开图片,指向特定的区域将显示连接提示,点击后连接到指定网址

<body>
<table align="center">
<tr>
<td>
<img src="魔兽世界1.jpg" width="900" usemap="wow" />
<map name="wow" >
<area shape="rect" coords="277,18,608,108" href="https://www.wowchina.com/zh-cn/" />
<area shape="poly" coords="816,422,790,441,781,469,767,504,877,508,861,483,844,463,839,438,831,427" href="https://www.wowchina.com/zh-cn/game/races/gnome" target="_blank" title="魔兽世界-侏儒" />
<area shape="poly" coords="786,350,824,300,835,247,864,248,895,256,889,299,894,342,885,369,896,433,891,492,844,436,861,393,863,366,817,354" href="https://www.wowchina.com/zh-cn/game/races/night-elf" target="_blank" title="魔兽世界-暗夜精灵" />
<area shape="poly" coords="864,368,773,343,790,320,730,304,727,338,687,336,664,353,662,368,672,388,665,412,653,449,662,503,763,505,790,429,847,417" href="https://www.wowchina.com/zh-cn/game/races/dwarf" target="_blank" title="魔兽世界-矮人" />
<area shape="poly" coords="639,142,691,165,690,218,718,263,716,337,661,334,595,272,595,250,588,205,608,160" href="#https://www.wowchina.com/zh-cn/game/races/draenei" target="_blank" title="魔兽世界-德莱尼" />
<area shape="poly" coords="491,294,528,285,548,245,592,244,593,274,664,340,662,370,671,387,655,447,662,504,504,506,524,403,498,389,477,353" href="#https://www.wowchina.com/zh-cn/game/races/human" target="_blank" title="魔兽世界-人类" />
<area shape="circle" coords="240,345,235" href="https://www.wowchina.com/zh-cn/game/races" target="_blank" title="魔兽世界种族" />
</map>
</td></tr>
</table>
</body>

一、先引用图片并设置宽度<img src="" width="" />

二、设置<map>,并name命名

三、在<img>中引用name名 将<img>与<map>联系起来

四、设置连接区域<area>

1、shape 连接区域形状 rect矩形 circle圆形 poly多边形

2、coords 设置连接区域的坐标 矩形为左上角坐标及右下角坐标 圆形为圆点坐标及半径长度  坐标是图片的左上角计算

3、href 设置连接网址  _blank 新网页中打开

网页内嵌

在一个网页里,规划处一个区域来展示另一个网页的内容

我们在上面的网页基础上嵌入百度主页

HTML-图片热点、网页内嵌、网页拼接、快速切图

<tr><td>
<iframe src="http://www.baidu.com" width="" height=""></iframe>
</td></tr>

<iframe></iframe> 为网页内嵌标签  设置区域宽与高来指定区域

网页拼接

在一个网络页面内,规划出多个页面窗口,以表格拼接的形式展现出来

HTML-图片热点、网页内嵌、网页拼接、快速切图

快速切图

用于做一个简单的网页效果图

步骤一:PS打开一个图片,选取“切刀”工具,对想要进行超链接的区域进行切割处理,可以同时切多处区域

HTML-图片热点、网页内嵌、网页拼接、快速切图

步骤二:“文件”中选择“存储为Web所用格式...”,存储时格式选择“HTML 和图像”

HTML-图片热点、网页内嵌、网页拼接、快速切图HTML-图片热点、网页内嵌、网页拼接、快速切图

步骤三:在DW中打开保存的网页,并设置每个区域连接的网址,即可完成一个简单的网页效果图

HTML-图片热点、网页内嵌、网页拼接、快速切图