淘宝店铺装修轮播图片上添加多个自定义链接

受朋友之托,抽了点时间研究了一下店铺装修模板,每个模板都不一样如果想实现一张轮播图片上有多个链接,在轮播的模块内必须支持自定义代码,也就是自己添加代码,我这里就不上图片了,只分析几块重要的代码。

首先我在dreamweaver生成如下代码:

<img src="http://img03.taobaocdn.com/imgextra/i3/298665212/TB2pR3NaXXXXXbCXXXXXXXXXXXX_!!298665212.jpg" width="1920" height="570" usemap="#Map"  border="0" />

<map name="Map">

<area shape="rect" coords="793,45,1150,291" href="#">

<area shape="rect" coords="802,347,1118,500" href="#">

<area shape="rect" coords="1286,188,1515,492" href="#">

<area shape="rect" coords="508,308,745,536" href="#">

<area shape="rect" coords="579,112,770,271" href="#">

</map>

<img src="http://img04.taobaocdn.com/imgextra/i4/298665212/TB2loEMaXXXXXXzXpXXXXXXXXXX_!!298665212.jpg" width="1920" height="570" usemap="#Map2" border="0">

<map name="Map2">

<area shape="rect" coords="92,147,324,274" href="#">

<area shape="rect" coords="282,24,419,127" href="#">

<area shape="rect" coords="460,58,628,209" href="#">

<area shape="rect" coords="893,69,1164,251" href="#">

<area shape="rect" coords="1345,266,1622,546" href="#">

<area shape="rect" coords="1406,37,1676,211" href="#">

</map>

<img src="http://img04.taobaocdn.com/imgextra/i4/298665212">

这个是2张图片 每张图片有大概5、6个可链接区域,链接地址自己添加即可,上面的代码拷贝到自定义代码区即可,因为店铺模板不同,有的模板需要关闭轮播开启自定义代码,有的自定义代码区域有很多,这里的每个自定义区域代表一张图片,有的自定义区域只有一个,把几张图片代码拷贝进去即可,但是这里会有一个问题,有的模板自定义区域没有关联轮播效果,这个时候你就要灵活一点了,把原来轮播的代码拷贝下来,复制到自定义区域,把类似每个<li></li>里面的内容去掉改成dreamweaver生成的代码,注意每个<li></li>内只能放置一张图。

以上只是简单的分析,没有很具体,一些举例和截图我就不加了,有疑问的可以给我留言

时间: 2024-10-05 14:48:23

淘宝店铺装修轮播图片上添加多个自定义链接的相关文章

ViewFlipper 淘宝头条 轮播 自动切换

ViewFlipper介绍 ViewFilpper类继承于ViewAnimator,而ViewAnimator类继承于FrameLayout. ViewAnimator: Base class for a FrameLayout container that will perform执行 animations when switching切换 between its views. ViewFilpper: Simple ViewAnimator that will animate between

淘宝店铺装修如何实现全屏轮播

淘宝店装移植有一个神秘的模块,那就是—全屏轮播,这个神奇的模块,能提高店铺的档次,给与顾客视觉冲击,提升顾客印象但是由于淘宝常规用户不支持CSS(用来定义网页样貌的能力),所以我们无法用简单的div+CSS来做出属于自己的全屏轮播强大的装修师们几经研究,终于摆脱了CSS的束绷,结合淘宝的轮播组件,单靠DIV代码就实现了全屏轮播(有缺点) 那么.不要CSS,我们怎么实现全屏轮播呢? 首先我要告诉大家全屏轮播的核心CSS属性—position:absolute 第一节:核心属性 position :

淘宝店如何加入全屏轮播图片

淘宝店如何加入全屏轮播图片? | 浏览:5779 | 更新:2014-06-11 11:31 | 标签: 淘宝 1 2 3 4 5 分步阅读 百度经验:jingyan.baidu.com 开淘宝店的朋友,看到很多店铺有各式各样的轮播大图,很高端大气,您是否也想拥有一款属于自己的轮播图呢?今天我就交给大家如何制作全屏轮播图. 百度经验:jingyan.baidu.com 工具/原料 电脑/网络 百度经验:jingyan.baidu.com 方法/步骤 1 登录淘宝店. 登录到您的淘宝店,点击“卖家

转向移动webApp开发的前端工程师必要的代码,手机webApp触摸左右滑动切换轮播图片广告

刚进一家新公司,公司专做手机App的,由于公司业务太多,传统的方法开发app成本太高,每个app要开发几个版本,公司有个想法就是做webApp来代替传统app.我是才接触到webApp的美工一枚. 今天给小伙伴们分享一个好东西,webApp轮播效果,支持手机上用手左右滑动的效果,因为手机的触摸事件和PC端用鼠标操作的事件是不同的,所以我就需要针对移动端的设备触摸事件做相应的轮播特效.大家可以去看下易迅的:http://m.yixun.com/t/ 和淘宝的http://m.taobao.com/

淘宝店铺装修全屏海报代码怎么用的设置方法

淘宝店铺装修全屏海报代码怎么用的设置方法 | 浏览:192 | 更新:2015-01-01 21:38 | 标签: 淘宝 1 2 3 4 5 6 分步阅读 百度经验:jingyan.baidu.com 淘宝c店1920全屏海报怎么做?代码怎么用高度如何修改? 用什么样的尺寸制作?如何设置和编辑,看图就知道怎么弄. 百度经验:jingyan.baidu.com 工具/原料 全屏代码 百度经验:jingyan.baidu.com 方法/步骤 1 打开记事本把这代码复制粘贴在内做准备,也可用直接店铺装

轮播图片 高效图片轮播,两个imageView实现

该轮播框架的优势: 文件少,代码简洁 不依赖任何其他第三方库,耦合度低 同时支持本地图片及网络图片 可修改分页控件位置,显示或隐藏 自定义分页控件的图片,就是这么个性 自带图片缓存,一次加载,永久使用 性能好,占用内存少,轮播流畅 实际使用 我们先看demo,代码如下 运行效果 轮播实现步骤 接下来,笔者将从各方面逐一分析. 层级结构 最底层是一个UIView,上面有一个UIScrollView以及UIPageControl,scrollView上有两个UIImageView,imageView

淘宝店铺装修教程之下载淘宝视频及分析视频地址中的高逼格信息

摘要: 关于淘宝视频方面的教程,艺灵已写过好几篇了,唯独没有下载的教程,然后群内小伙伴也一直问这个问题,所以特写此教程,内含信息量巨大,看官慎入...... 一.起因 还是因为刚有群友在群里问这个问题,已会的神人请无视这篇基础教程. 在讲如何下载淘宝视频之前,不得不把之前写的几篇教程拿出来,要不然那谁又该问:怎么上传淘宝视频.怎么获取淘宝视频链接.店铺中怎么安装淘宝视频.详情页中怎么放淘宝视频等等问题.如果看官对刚提的几点有疑惑,请先看完下面几篇教程文章后再回来继续看这篇文章. 二.淘宝视频相关

SuperSlidev2.1 轮播图片和无缝滚动

SuperSlidev2.1 轮播图片和无缝滚动 使用方法点击链接:http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class="bd"><ul><li _src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;"><a hr

一个html+css+js的轮播图片 -- 仅供参考

好久没打网页程序了,标签和css 之类都忘的跟空白一样,花几天时间把丢掉的东西给捡起来. 附上 html+css+js 代码 html: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3