教你设置点击同一张图片不同位置跳转到的指定页面.docxVIP

教你设置点击同一张图片不同位置跳转到的指定页面

文/炫酷商贸

我们在网站上浏览网页的时候，经常碰到这种情况。在你面前展示的是一张图片，但是你点击这张图片的不同位置，它就会跳转到不同的页面。是不是觉得有点神奇呢？因为我们通常的做法是一张图片只对应的链接自由一个。

如果你仅是作为一个普通访客，在浏览器点击的时候这种变化对你来说，也没有什么奇怪。但是作为网商运营者来说，这个就有点意思了。尤其是对如今很大一部分网商朋友美工基础比较差薄弱的情况下，更是对此迷惑不解。但是在自己的日常实际操作当中，又是切实的需要这种操作。

这种图片广泛应用于各种宣传海报当中。这些图片内容都是比较丰富的，所以当你设置好指定跳转之后，它就会按你指定链接跳转到你指定页面。

其实当你知道了，它的制作过程的时候你就会一点都不对它产生惊讶，而且你会大声的说

soeasy。

好了，那么我现在就教大家一个简易的制作方法。如何制作一张图片，当你在点击图片的不同位置的时候，它就会跳转到你指定的页面。

首先你要有一张已经制作好的宣传图。

下面我就拿一张我制作过的简易宣传图来做举例。

从图中可以看出我这张海报图里面有两个产品，一个是万圣节披风斗篷，另一个是白色羽毛银狐纸浆面具。两个产品，我们希望分别点击万圣节披风斗篷和白色羽毛银狐纸浆面具都跳转到指定的产品页面上面。

那么我们首先打开 photoshop软件，然后再打开这张图片。我们要运用到的工具，就是

photoshop切片工具。

提示：切片工具是第二个，而不是切片选择工具。

提示：切片工具是第二个，而不是切片选择工具。

然后，我们可以用切片工具把我们的某一款产品，万圣节披风斗篷用切片工具，把他分切出来。然后我们在分切第二款产品，白色银狐纸浆面具。

我们在做仔细观察，如果切出来的图片间隔比较大的话我们可以选择切片选择工具稍作一下调整。

然后我们再保存，保存的快捷键是ctrl+alt+shift+s。记住保存为【存储为web和设备所用格式】。格式选择HTML和图像。

我们可以看到它有两个文件格式一个是我们分切出来的图片images，一个是网页的格式html的。

那么接下来我们就要上传图片啦！

我现在以阿里巴巴的店铺为例来做说明。其他的网站做法也是一样的。用记事本方式打开网页格式html。我们可以看到那里面是很多的代码，这个东西其实也不要去懂，只要复制我们需要的那一部分就可以了。

复制table之间的代码。

然后粘贴到你网站的源代码那里。再返回编辑按钮，你会发现其实我们，还看不到图片。这是为什么呢？其实很简单因为我们刚才保存出来的有两个文件，有一个是图片images

然后粘贴到你网站的源代码那里。再返回编辑按钮，你会发现其实我们，还看不到图片。这

是为什么呢？

其实很简单因为我们刚才保存出来的有两个文件，有一个是图片images，另外一个是网页

的html格式的。

见下图

到这里基本上的工作大致已经做完了。我们预览一下，如果没有什么问题，我们就可以发布了，如果有问题的话，我们再做稍微的另外需要注意的是，如果你那图片中间，间隔比较大的话，可以把光标放在前面的那一张图片的后面，然后按delete删除键。

到这里基本上的工作大致已经做完了。

我们预览一下，如果没有什么问题，我们就可以发布了，如果有问题的话，我们再做稍微的

修改即可。

写得有点罗说，见谅。

怎么样，现在你是不是学会了呢？做法是不是很简单。