淘宝店铺装修，教你如何给轮播图片加多个链接

　之前用淘宝标准版，做淘宝店铺装修买的模板，标准版价格也不贵，能接受。

　　但是升级到拓展版之后，看了看拓展版漂亮点的模板基本都是上百，看得上眼的都是300以上，有点舍不得。于是就自己研究了一个星期，到处参考到处找代码。现在店铺基本都是自己装修出来的，心头满满的那个乐呵，(*^__^*) 嘻嘻……

　　淘宝拓展版自带有滚动图片的模块，但是只能一张图片一个链接，有点浪费首页的地方。

　　嘿嘿，下面来给大家分享下滚动图片中一张图片中放入多个商品，并且每个商品都有相应超链接的做法。

　　先用PS按照950px(通栏标准宽度)的宽度，高度就自己定义啦，先制作第一张滚动图片：

　　如上图所示，把X个商品都放在一个图片上，我这里暂时命名为图片1，保存在本地。

　　亲们可以根据自己需要做4张或更多的大图，我这里做了3张950宽的图片，分别为图片1、图片2、图片3.(假设每个图片有4个宝贝，就是说我这个滚动模块里一共可展示12件宝贝)

　　图片这里就不展示了。。。

　　然后亲们下载一个dreamweaver,打开程序，新建一个“HTML”代码页。

　　删除新建页面里所有的代码，使之成为一个空白代码页面。

　　在导航栏里选择“插入”，选择本地电脑里刚保存的“图片1”，点击dreamweaver页面的“设计”，可以看到打开的图片1：

　　接下来，我们对第一张大图进行分割并单个加链接：

　　1. 点击图片，dreamweaver页面下方会出现该图片的属性：

　　2. 选择“属性”里“地图”下方的框的形状，如果是规则形状可选矩形，如果是不规则框就选最后一个多边形。我这里选择多边形，点击多边形图标，然后在“图片1”上先选择第一个要分割添加超链接的区域：

　　按照此方法，把大图上所有需要添加超链接的区域都单独选择完成：

　　3. 完成区域选择之后，我们来给每个区域添加超链接：

　　点击第一个选择区域，即图片上的第一双鞋子，在下方的“属性”里“链接”输入该宝贝的宝贝详情页地址，亲们可以同时在目标里选择“_blank”(这个是用来设定买家点击图片后在新窗口打开链接)

　　如此这般，把图片上的4件宝贝都分别添加好相应的超链接。

　　然后，点击编辑页上方的“代码”，亲们可以看到相应的代码，dreamweaver

　　已自动生成相应代码：

　　4.第一张图片完成多个超链接的添加，接下来我们按照1-3的方法，在后面插入图片2，完成超链接添加后，再完成图片3.(亲们有更多图片可依次插入添加)。

　　5. 接下来，我们开始添加滚动图片代码：

　　在dreamweaver已生成代码的最上方添加代码如下：

　　<DIV style="WIDTH: 950px; HEIGHT: 246px" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="scroll">
<ul class=lst-main>

nfig="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="scroll">

　　如此，滚动图片代码全部添加完成，嘿嘿
　　6. 我们再来做一个不可忽视的步骤：
　　把我们之前用PS做好的本地的3张大图全部上传到网络上，我是传到淘宝的“图片空间”，然后把代码中每个相应的本地图片地址，全部换成图片空间里图片的网络连接地址。不这么做的话，店铺里显示不出来图片的哟~~~
　　7. 好了，所有准备工作完成。进入店铺装修，添加一个通栏950px宽的“用户自定义模块”，进入代码编辑，把刚才的所有代码全部复制上去，保存，发布，OK!!!
　　大功告成，赶快去试试吧。淘宝店铺装修第一次看起来可能会有点复杂，多做几次，熟能生巧，很赞的一个滚动图片+多个超链接+新窗口显示模块哦!!!