Haglaz

4月24日修正：可以用于同一页面的多个对象。

代码是在网上找到现成的以后自己修改的，我把它用在头像上～

这篇教程的代码以两组图片的变换为例。
对于每个对象，我们都需要先上传两幅图片（变换前和变换后），然后获取地址，分别贴到下面的红色和蓝色位置。

如果只有一个对象要变，请删去蓝绿色的代码。把本文中剩余的代码放在相应的plugin里面。

如果有多个对象，可以同理继续增加第三、第四……组蓝绿色代码。
注意：自己增加的代码中需要更改地方有：（具体位置已用下划线标出）
1、变量名：src3，src4，img2，把序号接着往后标就行了，注意前后要统一
2、图片地址
然后把所有代码放在相应的plugin里面。

变换前后的两幅图片最好尺寸一样，这样效果比较好。
如果尺寸不一样的话，变换的时候还有位置怎么移动的问题，这个我没研究过囧

javascript代码：

这一段可以视为准备工作。包含了所有对象的图片地址信息。
有新增对象的，变换前后的地址别忘了加进去！复制蓝绿色代码然后改变量名改图片地址。

<script language="javascript">
<!--
var src1="http://图片1变化前地址.jpg";
var src2="http://图片1变化后地址.jpg";

var src3="http://图片2变化前地址.jpg";
var src4="http://图片2变化后地址.jpg";

function imgLoad(imgSrc,imgname){
imgname.src=imgSrc;/*return imgSrc;*/
}
function imgSwap(imgObj,srcout,srcover){
imgObj.src=(imgObj.src==srcout)?srcover:srcout;
}
//-->
</script>

第一组对象。

这是具体显示图片的代码。这段代码和上面那段不一定非要连在一起贴，中间可以有别的代码。

<img id="img1" src="http://图片1变化前地址.jpg" onmouseover="imgSwap(this,src1,src2);" onmouseout="imgSwap(this,src1,src2);" >

第二组对象。

同样可以放在自己想要的位置。（第三、四……组也是一样，注意要改变量名。）

<img id="img2" src="http://图片2变化前地址.jpg" onmouseover="imgSwap(this,src3,src4);" onmouseout="imgSwap(this,src3,src4);" >

教程END。