如何给一张图片轮播添加不同链接
把X个商品都放在一个图片上,我这里暂时命名为图片1,保存在本地。
亲们可以根据自己需要做4张或更多的大图,我这里做了3张950宽的图片,分别为图片1、图片2、图片3。(假设每个图片有4个宝贝,就是说我这个滚动模块里一共可展示12件宝贝)
图片这里就不展示了。 。。
然后亲们下载一个dreamweaver,打开程序,新建一个“HTML”代码页。
删除新建页面里所有的代码,使之成为一个空白代码页面。
在导航栏里选择“插入”,选择本地电脑里刚保存的“图片1”,点击dreamweaver页面的“设计”,可以看到打开的图片1:接下来,我们对第一张大图进行分割并单个加链接:
1。...全部
把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已生成代码的最上方添加代码如下:
如此,滚动图片代码全部添加完成,嘿嘿
6。
我们再来做一个不可忽视的步骤:
把我们之前用PS做好的本地的3张大图全部上传到网络上,我是传到淘宝的“图片空间”,然后把代码中每个相应的本地图片地址,全部换成图片空间里图片的网络连接地址。
不这么做的话,店铺里显示不出来图片的哟~~~
7。 好了,所有准备工作完成。进入店铺装修,添加一个通栏950px宽的“用户自定义模块”,进入代码编辑,把刚才的所有代码全部复制上去,保存,发布,OK!!!。
收起