本文关键词：DW里怎么做交换图像的超链接

很多刚入行或者接手老旧项目的朋友，一听到要在Dreamweaver里搞图像交换，脑子里全是那些复杂的JS代码，头都大了。其实这事儿真没那么玄乎，今天我就把压箱底的土办法掏出来，让你十分钟搞定，还能顺便把链接加上，省得你到处问人。

咱们先说个最笨但最稳的法子，就是利用DW自带的行为面板。这玩意儿虽然看着古老，但对付简单的交换链接绝对够用。你先把两张图准备好，一张是默认的，一张是鼠标放上去后的。别嫌麻烦，图一定要小，别搞几MB的大图，加载慢客户骂你。

第一步，选中你的图片，然后在DW右侧找到“行为”面板，要是没看见，去窗口菜单里把它调出来。点那个加号，选“交换图像”。这时候会弹个框，让你选源文件，就是你鼠标悬停时要显示的那张图。这里有个坑，很多人只选了图，忘了勾选“还原到原始图像”，结果鼠标移开图就不回来了，那可就尴尬了。记得勾选上，这样鼠标离开才会变回原样。

接下来是关键，怎么加超链接？很多人以为在行为里能直接加链接，其实不行。你得先给图片套个链接。选中图片，按Ctrl+K，或者在属性面板里填上链接地址。这时候你会发现，链接和图片是重叠的。这时候你再去做交换图像的行为，你会发现行为是挂在图片上的，而链接是挂在图片外面的容器或者图片本身属性里的。

这里有个小细节，DW版本不同，操作略有差异。如果是老版本DW，比如CS6之前，你可能需要手动写点JS代码，那叫一个酸爽。但如果是CS6之后，基本靠行为面板就能搞定。不过，我建议你最好还是手动写代码，因为行为面板生成的代码有时候冗余，不利于SEO，也不利于后期维护。

手动写的话，其实就两行JS。给图片加个onmouseover和onmouseout事件。比如：。然后在外面包一层标签。这样既实现了交换，又保证了链接有效。这招比用DW的行为面板更灵活，而且代码干净，搜索引擎爬虫也喜欢。

还有一种情况，就是你想让交换后的图也是链接。这时候你就得用JS函数了。定义两个函数，一个负责换图，一个负责跳转。不过这种一般用在复杂交互上，简单的交换链接没必要搞这么复杂。

我见过太多人为了追求所谓的“高级”，搞一堆jQuery插件，结果页面卡成PPT。其实对于DW用户来说，大部分需求都是简单的鼠标悬停换图。你只需要记住，图片要小，链接要准，代码要简。别整那些花里胡哨的，用户在乎的是点击快不快，不是你的特效多炫。

另外，记得检查一下图片路径。DW有时候会自动生成相对路径，换台电脑或者换个目录，图就挂了。最好用绝对路径，或者确认相对路径的正确性。这点虽小，但能省你半夜爬起来修bug的时间。

最后说句心里话，DW虽然老了，但它的逻辑没变。别被那些新工具吓住，基础打牢了，换个软件照样玩得转。交换链接这事儿，核心就是事件监听和DOM操作，理解了原理，用什么工具都无所谓。希望这篇能帮你解决DW里怎么做交换图像的超链接这个问题，别再纠结了，动手试试吧。要是还搞不定，那就再回去看看基础，别眼高手低。