网站布局:网站开发中如何让图片在不同分辨率都达到铺满屏幕,以及把热点映射好

网站开发中如何让图片在不同分辨率都达到铺满屏幕,以及把热点映射好,本文简单介绍一下:


1.把图片做成一张

2.利用ps image热点追踪功能将其要连接的热点坐标追踪出来。也可直接在网站代码中进行如下编码,之后用鼠标拖动到热点区域:


网站布局:网站开发中如何让图片在不同分辨率都达到铺满屏幕,以及把热点映射好_第1张图片

<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>&nbsp;</p>


最终这张图片会在不同分辨率下都能达到满屏状态,效果如下:

缺点是分辨率不同,图像变形。























</body></html>

你可能感兴趣的:(网站布局)