零基础玩儿代码之详情页超链定位

零基础玩儿代码之详情页超链定位

国産〇〇柒

上次我们分享了阿里产品详情页的图文分离技术（查看文章点击这里：图文分离）。今天我们要分享的知识点是上次的延续——阿里巴巴详情页图片超链接定位技术。大家都知道阿里巴巴详情描述页面对图片的总量的限制是不超过15张图片，我们如果用图片“切片”的形式做链接的话，15张图片可能就有一点不够用了。所以，在这里我们采取在同一张图片上做任意多个超链接的定位技术来解决这个问题。本次使用图片我们仍使用上次分享的图片来做本例，如图：

图片：完成品.jpg

（本次我们在两个”代金券”处做两个超链接以诠释本例）

本次实例我们省略前面的基础步骤，如有新手朋友不明白的可以查看上次分享的关于“图文分离”的文章。这次的超链接定位技术需要可视化调整，所以我们就使用Dreamweaver这个软件来操作。
软件下载地址：http://yunpan.cn/cubw4nxp2XxHM 访问密码 e5c0 （本软件仅供测试使用）

接下来我们用最基础的方式来讲解本例：
1，打开Dreamweaver，选择创建新项目-----HTML ，如图：

图片：超链01.jpg

2，打开软件后点击菜单栏上面的“插入”--------“图像”，这个时候会弹出选择框，我们打开我们要使用的图片的位置（所需资料可以按早上次分享的步骤存入一个文件夹内），这个时候我们把软件切换成代码和视图共有方式，如图显示：

图片：超链02.jpg

3，接下来我们点击图片，软件最底部的属性中会出现一些选项（如果“属性”没有显示出来，就点击菜单栏的窗口-----属性，即可显示在底部）。如图：

图片：超链03.jpg

4，接下来就是用方形热点区域在图片上想要加上链接的地方绘制热点了，我们这里是要在两个代金券上绘制两个点击热点，所以如下图：

图片：超链04.jpg

5，做到这一步我们就基本完成了代码的生成工作，接下来就可以不用使用Dreamweaver了，我们把 <body> </body> 这两个标签之间的所有代码都负责制下来：

&lt;img src="完成品.jpg" width="498" height="500" border="0" usemap="#Map" /&gt;
&lt;map name="Map" id="Map"&gt;
&lt;area shape="rect" coords="57,292,247,337" href="#" /&gt;
&lt;area shape="rect" coords="250,292,440,336" href="#" /&gt;
&lt;/map&gt;

接下来我们要对这段代码进行讲解和修改：
1>.<img/>里面的src=”” 引号里面的图片地址是我们需要修改的，我们必须把它换成我们上传到图片银行里面的所需要引用的实际图片地址，上次我们讲过，要点大家要记住。
2>.width height 这两个参数我们尽量不要在这里修改，尽量PS做图片的时候把这个宽高比例做好，在这里就不用那么麻烦的去修改它了。
3>.border 这个边框不用加，默认是0即可。
4>.usemap=”#Map” 这个参数比较重要，千万不能少，也不能错，引号中的参数值是可以修改的，但是必须跟下面<map>里的name一致，不然找不到图片无法定位。如果你同一个描述中加入多个这类定位超链接图片，用Dreamweaver生产的这个名字有可能会重复，如有重复就必须修改，不然无法定位超链。
5>.<area shape="rect" coords="57,292,247,337" href="#" /> 这个里面是相对比较重要的，shape后面的值是定义热点的形状的，这里我们用的是方形，参数不用修改。Coords 后面的是热点区域的坐标，这个坐标是我们用Dreamweaver直接生成的，也不需要修改，href后面的值是需要修改的，我们需要把#号换成我们需要连接的超链地址，http://开头哦。
一切修改过后即可把代码复制到阿里巴巴产品详情页的html 代码区域了，借鉴此方法大家可以加入多个热点区域。
总结：本次我们使用了Dreamweaver这个软件，可以方便的生成热点的坐标，不用去使用代码调整坐标，所生成的代码基本不需要太大的变动即可使用，非常的方便。0基础的童鞋，如有不明白的可以加“国産〇〇柒”咨询相关基础操作方法。
觉得有用的亲们别忘记"回复"顶帖，以资鼓励哈哈！谢过！

沙发。。。。。。

看了一下好复杂，好复杂的赶脚

打倒群主

cn200802543：看了一下好复杂，好复杂的赶脚回到原帖

算是比较使用的小技巧

cn1516368873lvhy：打倒群主回到原帖

反动派来了，快跑~~~~

好专业，好好看一看

不错我替大家谢谢分享，，，，，，，

不错不错

cn1512410336：不错不错回到原帖

共同学习

你造福各位外贸网友啦！

cn1511425066：共同学习回到原帖

你猜猜我是谁

007很擅长SEO 这正是我缺乏的很喜欢看你的文章希望你继续分享谢谢！

我试过，发现然而并没有什么用

在学校学的已经全部还给老师了

为上面的评论道歉

好贴，顶一个。。。。

cn1512410336：你猜猜我是谁回到原帖

从这里没有更多的消息呀~

cn220187640：007很擅长SEO 这正是我缺乏的很喜欢看你的文章希望你继续分享谢谢！回到原帖

大家一起学习啊

whfronter：我试过，发现然而并没有什么用回到原帖

你说的“没什么用” 具体是哪一方面呢？应该不会是说提升排名吧？

國産〇〇柒

零基础玩儿代码之详情页超链定位

国産〇〇柒

上次我们分享了阿里产品详情页的图文分离技术（查看文章点击这里：图文分离）。今天我们要分享的知识点是上次的延续——阿里巴巴详情页图片超链接定位技术。大家都知道阿里巴巴详情描述页面对图片的总量的限制是不超过15张图片，我们如果用图片“切片”的形式做链接的话，15张图片可能就有一点不够用了。所以，在这里我们采取在同一张图片上做任意多个超链接的定位技术来解决这个问题。本次使用图片我们仍使用上次分享的图片来做本例，如图：

图片：完成品.jpg

（本次我们在两个”代金券”处做两个超链接以诠释本例）

本次实例我们省略前面的基础步骤，如有新手朋友不明白的可以查看上次分享的关于“图文分离”的文章。这次的超链接定位技术需要可视化调整，所以我们就使用Dreamweaver这个软件来操作。
软件下载地址：http://yunpan.cn/cubw4nxp2XxHM 访问密码 e5c0 （本软件仅供测试使用）

接下来我们用最基础的方式来讲解本例：
1，打开Dreamweaver，选择创建新项目-----HTML ，如图：

图片：超链01.jpg

2，打开软件后点击菜单栏上面的“插入”--------“图像”，这个时候会弹出选择框，我们打开我们要使用的图片的位置（所需资料可以按早上次分享的步骤存入一个文件夹内），这个时候我们把软件切换成代码和视图共有方式，如图显示：

图片：超链02.jpg

3，接下来我们点击图片，软件最底部的属性中会出现一些选项（如果“属性”没有显示出来，就点击菜单栏的窗口-----属性，即可显示在底部）。如图：

图片：超链03.jpg

4，接下来就是用方形热点区域在图片上想要加上链接的地方绘制热点了，我们这里是要在两个代金券上绘制两个点击热点，所以如下图：

图片：超链04.jpg

5，做到这一步我们就基本完成了代码的生成工作，接下来就可以不用使用Dreamweaver了，我们把 <body> </body> 这两个标签之间的所有代码都负责制下来：

&lt;img src="完成品.jpg" width="498" height="500" border="0" usemap="#Map" /&gt;
&lt;map name="Map" id="Map"&gt;
&lt;area shape="rect" coords="57,292,247,337" href="#" /&gt;
&lt;area shape="rect" coords="250,292,440,336" href="#" /&gt;
&lt;/map&gt;

接下来我们要对这段代码进行讲解和修改：
1>.<img/>里面的src=”” 引号里面的图片地址是我们需要修改的，我们必须把它换成我们上传到图片银行里面的所需要引用的实际图片地址，上次我们讲过，要点大家要记住。
2>.width height 这两个参数我们尽量不要在这里修改，尽量PS做图片的时候把这个宽高比例做好，在这里就不用那么麻烦的去修改它了。
3>.border 这个边框不用加，默认是0即可。
4>.usemap=”#Map” 这个参数比较重要，千万不能少，也不能错，引号中的参数值是可以修改的，但是必须跟下面<map>里的name一致，不然找不到图片无法定位。如果你同一个描述中加入多个这类定位超链接图片，用Dreamweaver生产的这个名字有可能会重复，如有重复就必须修改，不然无法定位超链。
5>.<area shape="rect" coords="57,292,247,337" href="#" /> 这个里面是相对比较重要的，shape后面的值是定义热点的形状的，这里我们用的是方形，参数不用修改。Coords 后面的是热点区域的坐标，这个坐标是我们用Dreamweaver直接生成的，也不需要修改，href后面的值是需要修改的，我们需要把#号换成我们需要连接的超链地址，http://开头哦。
一切修改过后即可把代码复制到阿里巴巴产品详情页的html 代码区域了，借鉴此方法大家可以加入多个热点区域。
总结：本次我们使用了Dreamweaver这个软件，可以方便的生成热点的坐标，不用去使用代码调整坐标，所生成的代码基本不需要太大的变动即可使用，非常的方便。0基础的童鞋，如有不明白的可以加“国産〇〇柒”咨询相关基础操作方法。
觉得有用的亲们别忘记"回复"顶帖，以资鼓励哈哈！谢过！

0

沙发。。。。。。

0

看了一下好复杂，好复杂的赶脚

Alex W

打倒群主

國産〇〇柒

cn200802543：看了一下好复杂，好复杂的赶脚回到原帖

算是比较使用的小技巧

國産〇〇柒

cn1516368873lvhy：打倒群主回到原帖

反动派来了，快跑~~~~

Lucy广州

好专业，好好看一看

哈萨克俄罗斯专线

不错我替大家谢谢分享，，，，，，，

cn1512410336

不错不错

國産〇〇柒

cn1512410336：不错不错回到原帖

共同学习

名人堂de小二

你造福各位外贸网友啦！

cn1512410336

cn1511425066：共同学习回到原帖

你猜猜我是谁

老班长

007很擅长SEO 这正是我缺乏的很喜欢看你的文章希望你继续分享谢谢！

whfronter

我试过，发现然而并没有什么用

深圳市粤铭供应链-Kimi

在学校学的已经全部还给老师了

whfronter

为上面的评论道歉

9阿里巴巴旺铺装修

好贴，顶一个。。。。

國産〇〇柒

cn1512410336：你猜猜我是谁回到原帖

从这里没有更多的消息呀~

國産〇〇柒

cn220187640：007很擅长SEO 这正是我缺乏的很喜欢看你的文章希望你继续分享谢谢！回到原帖

大家一起学习啊

國産〇〇柒

whfronter：我试过，发现然而并没有什么用回到原帖

你说的“没什么用” 具体是哪一方面呢？应该不会是说提升排名吧？

铜币：	+1 +5 +10 +20 +50 +100	剩余
	* 评分才能提交噢
理由：