本站专注于数据化运营,涉及阿里巴巴国际站运营,Google SEO,独立站建设等内容,欢迎各位发文投稿
博主:为主的祥助 提供阿里巴巴国际站运营诊断服务 QQ:2067552955
在线培训:玩转Google SEO:从入门到精通课程,报名后联系我记录,可返25+送神器工具

Dreamweaver CC 2017在一张图片上建立多个超链接的方法

工具神器 为主的祥助 2486次浏览 0评论
阿里巴巴国际站上传产品图片有时候需要给一张图片做多个超链接,方便访客点击一张图上设计的不同位置跳转到不同的产品,如相关产品营销(related products)
通过Dreamweaver(推荐Dreamweaver CC 2017)可以给一张图片加多个热点超链接,获取图片代码后添加到阿里巴巴国际站后台,从而实现一图多链的效果
操作步骤:
1.Adobe官网下载Dreamweaver CC 2017进行安装,并使用这个补丁(运行后选择Dreamweaver CC 2017,点击开始,然后打开Dreamweaver CC 2017的目录
下选择amtlib.dll点击打开,会自行替换这个文件从而)
补丁:https://pan.baidu.com/s/1sl54WH3    目前支持到Adobe旗下软件的CC 2018版本,有更新我也会更新到帖子
2.运行Dreamweaver CC,菜单栏-文件-新建-新建html文件
3.菜单栏-插入-image,插入需要设置一图多链的图片
4.将需要设置多链接的图片上传到阿里巴巴国际站图片空间,复制图片链接,保存到txt文档,alt标签里写该图片的关键词

5.图中模式所示切换为设计,然后点击拆分
6.鼠标右键点击图片-属性,就可以打开热点地图编辑框
7.使用矩形选区工具框选需要设置超链接的局部,然后将要跳转到的产品目标连接输入链接栏(去掉预设的星号)
目标修改为_blank(新窗口打开)
shape 属性用于定义图像映射中对鼠标敏感的区域的形状:
圆形:circ 或 circle
多边形:poly 或 polygon
矩形:rect 或 rectangle
coords是定义坐标
coords="0,1,263,335" 点击区域的四点坐标x1,y1,x2,y2,即矩形范围是:(左上角顶点坐标:x1,y1,右下角顶点坐标为:x2,y20)
8.将步骤四获取的链接替换掉图中src=后面的本地图片链接,复制代码(<img>标签开始到</map>标签结束),然后去阿里巴巴国际站产品发布编辑框切换为代码模式,添加到需要插入的位置,图片就出来了
提交后发布就可以了Dreamviewer一图多链代码

完整示例如下:  注意<map name=”Map”>建议进行自定义命名如<map name=”Map-01″>,假如做了多个不同段落的这样的热点地图,命名却一样,放在一个页面里会因为产生部分热点失效或错乱调用的BUG,所以若有多个请分别编号命名
<img src=”http://g04.s.alicdn.com/kf/HTB1AANLQFXXXXanXpXXq6xXFXXXM/228833802/HTB1AANLQFXXXXanXpXXq6xXFXXXM.jpg” alt=”” width=”750″ height=”960″ usemap=”#Map”/>
<map name=”Map”>
<area shape=”rect” coords=”0,1,255,338″ href=”//amos.alicdn.com/msg.aw?v=2&amp;uid=cn1520839829ptee&amp;site=enaliint&amp;s=24&amp;” target=”_blank”>
<area shape=”rect” coords=”255,-1,520,339″ href=”https://depan.en.alibaba.com/product/60632610376-804161165/2017_trending_products_magical_nano_sticky_anti_gravity_case_for_iphone_6s.html?spm=a2700.8304367.0.0.WTW1BN” target=”_blank”>
<area shape=”rect” coords=”520,1,759,336″ href=”https://depan.en.alibaba.com/product/60533504800-804161166/Aluminum_bumper_ultra_thin_cell_phone_case_for_Iphone_7_case_mobile_phone_shockproof.html?spm=a2700.8304367.0.0.jyL61K” target=”_blank”>
<area shape=”rect” coords=”0,338,257,642″ href=”https://depan.en.alibaba.com/product/60544091728-804161165/Hot_items_2017_new_years_products_transformer_armor_for_iphone_7_case_tpu_pc_back_cover.html?spm=a2700.8304367.0.0.MwLuks” target=”_blank”>
<area shape=”rect” coords=”257,338,519,641″ href=”https://depan.en.alibaba.com/product/60540007014-804236499/2017_new_design_for_Iphone_7_case_ultra_thin_aviation_aluminum_mobile_phone_case.html?spm=a2700.8304367.0.0.tQGiWb” target=”_blank”>
<area shape=”rect” coords=”518,338,751,641″ href=”https://depan.en.alibaba.com/product/60637097008-804108903/New_premium_marble_design_shockproof_thor_armor_case_for_iphone_7_7_plus.html?spm=a2700.8304367.0.0.HJMlwF” target=”_blank”>
<area shape=”rect” coords=”-1,642,257,938″ href=”https://depan.en.alibaba.com/product/60636466856-804152598/waterproof_phone_case.html?spm=a2700.8304367.0.0.HSO71c” target=”_blank”>
<area shape=”rect” coords=”257,641,519,938″ href=”https://depan.en.alibaba.com/product/60566829655-804161166/2016_new_design_soft_tpu_pc_cell_phone_case_back_cover_for_iPhone_7.html?spm=a2700.8304367.0.0.42TPsR” target=”_blank”>
<area shape=”rect” coords=”517,642,758,941″ href=”https://depan.en.alibaba.com/product/60635454179-0/cool_mental_case.html?spm=a2700.8304367.0.0.Okt0Jy” target=”_blank”>


 

作者:为主的祥助  转载请保留页面地址: https://www.losvincent.com/dreamweaver-cc-2017.html ‎
更多跨境平台运营技术干货,请关注公众号:跨境E站(GlobalSEO)    
一个有灵魂的公众号,专注更新外贸领域跨境电商平台的运营操盘和数据优化,独立站搭建,Google SEO和SEM Marketing等优质内容

微信公众号:跨境E站(GlobalSEO) ,一个有灵魂的公众号,专注更新外贸领域跨境电商平台的运营操盘和数据优化,独立站搭建,Google SEO和SEM Marketing等优质内容
本站服务:承接阿里国际站运营,官网建站等服务

转载请注明:跨境E站 » Dreamweaver CC 2017在一张图片上建立多个超链接的方法

微信 OR 支付宝 扫描二维码
为本文作者 打个赏
pay_weixinpay_weixin微信公众号
知识付费,金额随意 亲的支持是我更新的动力!~
喜欢 (10)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

每日一学,人人都是运营总监

联系我
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册