网站开发中如何让图片在不同分辨率都达到铺满屏幕,以及把热点映射好,本文简单介绍一下:
1.把图片做成一张
2.利用ps image热点追踪功能将其要连接的热点坐标追踪出来。也可直接在网站代码中进行如下编码,之后用鼠标拖动到热点区域:
<area
shape="rect"
coords="585,454,757,493"
href ="http://www.tyjysg.cn/page/contact/mark.php"
target ="_blank"
alt="" />
3.把图片放到一个表格中,表格的宽度和高度改为100%,同时把图片的宽度和高度改为100%
参考资料:http://www.w3school.com.cn/tiy/t.asp?f=html_areamap
完整案例源码如下:
<!-- saved from url=(0021)http://www.tyjysg.cn/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>山西太原君语时光心理咨询有限公司</title>
</head><body style="">
<div align="center" ><table width="100%" width="100%" border="0">
<tr>
<td><img src="images1/33君语时光主页副本.jpg" border="0" width="100%" height="100%" usemap="#planetmap" alt="Planets"></td>
</tr>
</table>
<map name="planetmap" id="planetmap">
<area shape="rect" coords="585,454,751,495" href="http://www.tyjysg.cn/page/contact/mark.php" target="_blank" alt="Venus">
<area shape="rect" coords="285,454,460,488" href="http://www.tyjysg.cn/index.php" target="_blank" alt="Sun">
</map>
</div>
<p> </p>
最终这张图片会在不同分辨率下都能达到满屏状态,效果如下:
缺点是分辨率不同,图像变形。
</body></html>