Ygs

煎蛋网顶部的AV格子广告位很有创意，就算不用作广告位，用来做友情链接也是很拉风的～

效果预览：

下面先了解一下图像地图的用法。（后来才知道这就是传说中的“图像热区”）广告位用到的是 JavaScript 图像地图，图像地图指的是带有可点击区域的图像。也就是说，广告位的原理是将一幅事先划分好区域的图片，通过图像地图使每个区域可点击。

图像地图用法：

<area id="Value" href="url" alt="text" shape="area-shape" coods="value">

其中：
alt：用于设定热点的替代性文字。
href：用于设定该热点所链接的url地址。
shape 和 coords ：是两个主要的参数，用于设定热点的形状和大小。其基本用法如下：

<area shape="rect" coords="x1, y1,x2,y2" href=url>

表示设定热点的形状为矩形，左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2)。

<area shape="circle" coords="x1, y1,r" href=url>

表示设定热点的形状为圆形，圆心坐标为(x1,y1)，半径为r。

<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>

表示设定热点的形状为多边形，各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3)……
<area> 标记是在图像地图中划分作用区域的，因此其划分的作用区域必须在图像地图的区域内，所以在用 <area> 标记划分区域前必须用HTML的另一个标记 <map> 来设定图像地图的作用区域，并为指定的图像地图设定名称，该标记的用法很简单，即： <map name=”图像地图名称”> …… </map>

一知半解以后，下面动手制作格子广告位。

首先我们先做好格子区域的图片，就是将一张600*60的图片画上30*30像素的方框，使用PS、FW都可以。不想自己做的可以保存下图。图片制作好后上传空间啦。

接着就要在广告位要出现的区域添加代码了，下面直接共享出本站友情链接格子的代码：

<map name="avmap">
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="0,0,30,30" alt="A1：友情链接" title="A1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="0,30,30,60" alt="A2：友情链接" title="A2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="30,0,60,30" alt="B1：友情链接" title="B1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="30,30,60,60" alt="B2：友情链接" title="B2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="60,0,90,30" alt="C1：友情链接" title="C1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="60,30,90,60" alt="C2：友情链接" title="C2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="90,0,120,30" alt="D1：友情链接" title="D1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="90,30,120,60" alt="D2：友情链接" title="D2:友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="120,0,150,30" alt="E1：友情链接" title="E1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="120,30,150,60" alt="E2：友情链接" title="E2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="150,0,180,30" alt="F1：友情链接" title="F1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="150,30,180,60" alt="F2：友情链接" title="F2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="180,0,210,30" alt="G1：友情链接" title="G1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="180,30,210,60" alt="G2：友情链接" title="G2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="210,0,240,30" alt="H1：友情链接" title="H1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="210,30,240,60" alt="H2：友情链接" title="H2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="240,0,270,30" alt="J1：友情链接" title="J1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="240,30,270,60" alt="J2：友情链接" title="J2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="270,0,300,30" alt="K1：友情链接" title="K1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="270,30,300,60" alt="K2：友情链接" title="K2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="300,0,330,30" alt="L1：友情链接" title="L1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="300,30,330,60" alt="L2：友情链接" title="L2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="330,0,360,30" alt="M1：友情链接" title="M1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="330,30,360,60" alt="M2：友情链接" title="M2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="360,0,390,30" alt="N1：友情链接" title="N1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="360,30,390,60" alt="N2：友情链接" title="N2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="390,0,420,30" alt="P1：友情链接" title="P1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="390,30,420,60" alt="P2：友情链接" title="P2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="420,0,450,30" alt="Q1：友情链接" title="Q1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="420,30,450,60" alt="Q2：友情链接" title="Q2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="450,0,480,30" alt="R1：友情链接" title="R1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="450,30,480,60" alt="R2：友情链接" title="R2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="480,0,510,30" alt="S1：友情链接" title="S1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="480,30,510,60" alt="S2：友情链接" title="S2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="510,0,540,30" alt="T1：友情链接" title="T1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="510,30,540,60" alt="T2：友情链接" title="T2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="540,0,570,30" alt="U1：友情链接" title="U1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="540,30,570,60" alt="U2：友情链接" title="U2：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="570,0,600,30" alt="V1：友情链接" title="V1：友情链接"></area>
<area href="http://ygs.im/guestbook" target="_blank" shape="rect" coords="570,30,600,60" alt="V2：友情链接" title="V2：友情链接">
</area></map>
<img src="http://ygs.im/wp-content/themes/zsofa/images/avbox.gif" usemap="#avmap" height="60" width="600"/>

注意把最代码最后的图片地址修改为你自己的

添加友情链接只需要修改背景图片，把30*30的图片覆盖到特定格子，再将代码中对应的格子的链接、标题修改好就可以了。你可以参照上文的说明自己修改广告大小、形状，你一定会觉得很好玩的。