首页 > 家居生活 > 电子商务 >

如何在宝贝详情页中制作一张图片多个链接

来源:互联网 2023-02-21 16:11:48 版权归原作者所有,如有侵权,请联系我们

详情页中一张图加链接都很简单,问题来了,如何在一张图的不同地方加不同链接呢?分享给大家,一起看看吧!QxV办公区 - 实用经验教程分享!

工具/原料

  • Adobe Dreamweaver CS5

方法/步骤

  • 1

    打开软件 首先打开Adobe Dreamweaver CS5软件,在初始页面中可以从“文件”中新建,也可以直接点击“HTML"。QxV办公区 - 实用经验教程分享!

    如何在宝贝详情页中制作一张图片多个链接QxV办公区 - 实用经验教程分享!

    如何在宝贝详情页中制作一张图片多个链接QxV办公区 - 实用经验教程分享!

  • 2

    之后点击“插入”图像,在弹出的窗口中找到你编辑的图片插入就好了在点击玩确定的文件名后会弹出对话筐,不用管,直接点确定就OK了,有两个,全都点确定就好了。QxV办公区 - 实用经验教程分享!

    如何在宝贝详情页中制作一张图片多个链接QxV办公区 - 实用经验教程分享!

    如何在宝贝详情页中制作一张图片多个链接QxV办公区 - 实用经验教程分享!

  • 3

    添加链接在软件窗口的左下角,有一个“绘制矩形热点”这样的一个命令符号,如图红色标记所示,这个就是我们添加链接的命令按钮,有三个形状,在做图的时候可以根据需要选取,我们这里用的是矩形的命令按钮,QxV办公区 - 实用经验教程分享!

    如何在宝贝详情页中制作一张图片多个链接QxV办公区 - 实用经验教程分享!

  • 4

    选取第一个矩形的命令按钮,鼠标移动至所要编辑的图片,拖动选中起要分割的单一图片,如图所示,被选中的部分变成朦胧状,就OK了,弹出的对话框直接点确定就行了QxV办公区 - 实用经验教程分享!

    如何在宝贝详情页中制作一张图片多个链接QxV办公区 - 实用经验教程分享!

  • 4相关内容未经授权抓取自百度经验
  • 5

    在左下方有链接的地址,把“#”去掉,然后把所选图片的链接地址复制上去,这样其中的一部分就做好了,同理,可以把剩下的图片加上自己想要的链接QxV办公区 - 实用经验教程分享!

    如何在宝贝详情页中制作一张图片多个链接QxV办公区 - 实用经验教程分享!

  • 6

    复制代码复制软件上方代码窗口中两个"body>"之间所有的代码(包括两个"body>"),保存到TXT文档中就行了QxV办公区 - 实用经验教程分享!

    如何在宝贝详情页中制作一张图片多个链接QxV办公区 - 实用经验教程分享!

  • 7

    图片上传很简单的,把之前做的大图上传到自己的图片空间里,打开图片,右键点击图片,把图片的地址复制下来,替换之前的图片地址 ing src="图片地址"的位置中,如图QxV办公区 - 实用经验教程分享!

    如何在宝贝详情页中制作一张图片多个链接QxV办公区 - 实用经验教程分享!

  • 8

    这样一张图片不同位置不同链接,就设置好了。剩下就是将代码传到详情页或者店铺首页或者二级页面中了。这里就不多讲了吧。在自定义模块中,点击如图按钮,把TXT中的代码复制就行。在点一下这个按钮,回到图像编辑就ok了。QxV办公区 - 实用经验教程分享!

    如何在宝贝详情页中制作一张图片多个链接QxV办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!QxV办公区 - 实用经验教程分享!


    标签: 淘宝制作宝贝详情图片

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号