淘宝网店情侣链接 教你怎么给淘宝网店图片分区做链接

在装修过程中最头疼的一件事,也是最费了劲的一件事,给图片做链接。

有人心生嘀咕,呵呵,不是给<image>标签加一个href属性就可以了嘛!!

是的,一一妈妈一开始也只知道这个方法呢,于是,问题应运而生了。

当时从网上找的一些素材,比如像下面这个图

oh,my god,收藏本店,信用评价,店铺介绍都在一张图上,天啊给<image>标签加href属性用不了了。因为这种方法只针对一个图片一个链接啊。如果是静态图的话好办了,我们用手头任何一款工具都足以把它切割开。然后再分别加上链接。

可是,一一妈妈偏偏选中的是一款动态GIF图像,怎么办。就知道ImageReady可以编辑GIF。

好吧,用ImageReady打开动态图像,切片制作,再还原整图,然后挨个加链接(此处非本文重点,具体操作省略)。由于一一妈妈当时找的图内容比较多,切成了好多片,然后还原,最后在往整个页面上合并。整整大半天时间过去了。

一一妈妈总觉得这个方法笨笨的。于是问百度大叔,大叔教了一一妈妈一个很讨巧的方法。

图像热点设置。

有效利用<img>标签的usemap属性,给图片划分一个地图,设定图片热点(即给图片分区,但不是切割,图片还是完整的,只是用代码将图片分成几个部分),然后给热点设定相应的链接。

先简单介绍一下usemap属性的用法。

使用时:

<img src="test.gif" usemap="#Map">

这里的#后面的Map为我们自定义的图像地图的名称,可以任意设定噢。

之后,我们就要对图像地图进行定义,设定热点了。

<map name="Map">

<area shape=rect coods="100,100,200,200" href="test1.html">

<area shape=rect coods="200,100,300,200" href="test2.html">

</map>

好,且听一一妈妈一一解释。

<map name="Map">,这里为map标签,引号里的Map要和前面<usemap="#Map“>里定义的#后的内容一致噢,要不然是不会起作用的。

<area shape=rect coods="100,100,200,200" href="test1.html">,这里就是定义热点的地方了,

shape和coods:是两个主要的参数,用于设定热点的形状和大小。href就是用来设定你宝贝的链接喽。其基本用法如下:

用法1:<area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标为(X2,y2)。

用法2:<area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形,圆心坐标为(X1,y1),半径为r。

用法3:<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形,各顶点坐标依次为(X1,y1)、(X2,y2)、(x3,y3) ......。

淘宝网店情侣链接 教你怎么给淘宝网店图片分区做链接

接下来是个小重点喽,就是上面的坐标怎么取的问题了。

我们还是用ImageReady来打开动态图像。

假如我们要给上图中的“收藏图片”加收藏自己店铺的链接,我们就要把图中的“收藏图片”区域设为热点。因为“收藏图片”区域为方形,我们用上介绍的 用法1:<area shape="rect" coords="x1, y1,x2,y2" href=url>。

shape="rect"就不用改了,因为我们就是要截方形区域。

coords="x1, y1,x2,y2"中坐标的取法,用ImageReady打开上图后,将鼠标置于“收藏图片”区域的左上角,记下X与Y坐标,这两个值就是X1与Y1噢。

然后,将鼠标置于“收藏图片”区域的右下角,记下X与Y坐标,这两个值就是X2与Y2。

最后,我们取下自己店铺收藏用的链接。在自己的ID区域点击右键,然后点击属性。粘贴出自已的收藏链接地址。

好了,到此为止,我们的取值工作就完成了,热点区域设完的完整样式如下。

<area shape="rect" coords="19,104,79,208" href="http://.........">

可以依此法设置多个热点,分别给信用评价,店铺介绍等加链接噢。

最后,别忘了</map>,这个很重要,这告诉浏览器你的图片地图到这里结束了。

  

爱华网本文地址 » http://www.aihuau.com/a/8105050103/322767.html

更多阅读

淘宝网店模板制作教程 淘宝店铺免费模板

淘宝网店模板制作教程——简介很多开淘宝店的朋友想把网店弄的好看一定,但是苦于不会制作模板,今天就分享一下淘宝网店模板的制作。 淘宝网店模板制作教程——工具/原料 photoshop图片相关素材 淘宝网店模板制作教程——方法/步骤

淘宝网店开店流程? 开淘宝网店的流程

淘宝网店开店流程?——简介想要在网络上开一个商店,就必须要选择一个平台,有了这个交易平台,就可以在这个平台上进行各种交易。今天就以淘宝为例子,给大家讲解一下怎么样在淘宝开店。淘宝网店开店流程?——工具/原料

教你怎么开淘宝网店---图文并茂教程 图文并茂的意思

本教程针对准备在淘宝开店,但又不知从何入手的朋友们。本教程以图文的方式较为全面的展示了从店铺注册到发布宝贝全过程,希望能对您有所帮助!教你怎么开淘宝网店---图文并茂教程——开店步骤教你怎么开淘宝网店---图文并茂教程 1、教

怎样开好淘宝网店 开网店卖什么最赚钱

2010年淘宝开店算是最红火的。不少人开店首选的第一平台就是淘宝。于是,互联网上淘宝开店货源、淘宝开店经验只要在百度一搜,就能跳出N多的页面和文章。然而对于怎么开淘宝网店,很难有系统的解释。怎样开好淘宝网店——步骤/方法怎样开

个人对淘宝网店经营技巧经验总结 淘宝网店经营

个人对淘宝网店经营技巧经验总结——简介很多人都知道的目前淘宝作为国内最大的C2C网站,汇聚了全国各地的商界精英。在高手如云的网上卖场,为了争取有限的客户,必然注意一些网店的经营方法策略,才能获得属于自己的市场份额。那么在淘宝

声明:《淘宝网店情侣链接 教你怎么给淘宝网店图片分区做链接》为网友村姑分享!如侵犯到您的合法权益请联系我们删除