上海网站关键词排名优化推广服务公司——奇商网络。24小时快速咨询:13512180996

浅谈图像映射中map标签、area标签和img标签的使用

   假设,现在我们的网页中的内容只有一张图片,就连一个汉字都没有。那么我们应该怎样来实现网站优化呢?许多人会问,就一张图片怎么来优化

   那么这里我们就可以使用到map标签、area标签和img标签来实现图片优化。

   例如:图一表示一个网站的首页内容

图一:

 

   一、针对这种情况,我们先标明图片相关属性:

   部分代码:

 <div align="center" style="width:1360px; height:740; ">

 <img src="borui.jpg" atl="博瑞汽车" width="100%"  usemap="#boruimap" border="0" hidefocus="true" />

 </div>

    1、要注意的是边框的宽度和长度像素一定要明确,因为每个用户使用的电脑屏幕大小可能不一样,防止和后面area标签属性中坐标值coords数值不一致,导致出现错误。

   二、接下来我们使用map标签来将图片定义一个客户端图像映射,简单的说就是把图片看做一张地图,然后使用坐标来定位图片中的区域。

    1、<map name="boruimap" id="boruimap"></map>

    2、注意这里使用了name和id两个属性是由于客户使用的浏览器不同。

   三、在map标签中使用area标签来定义图片中某一块区域的属性包括:shape(形状)、coords(坐标)、alt属性、URL以及target值。

   部分代码:

<map name="boruimap" id="boruimap">
<area shape="circle" coords="717,440,80" href="qianluntai.jpg" target="_blank" alt="前侧轮胎"/>
<area shape="rect" coords="300,250,588,423" href="chemen.jpg" target="_blank" alt="车门"/>
<area shape="polygon"   coords="1016,324,1165,313,1175,349,1125,378,1060,365"   href="zhongwang.jpg" target="_blank" alt="中网"/>
</map>

  1、其中circle为圆形、rect为矩形、poly为多边形

  2、客户端图像映射效果图如下图片二:

图二:

   四、这样用图像映射就能来实现一部分的图片优化。

   效果展示页面:http://123.qisir.com/test/qiche/borui.html