鼠标悬停时切换到更大的图像

Question

我正在使用 Microsoft Web Expression 创建一个网站，我希望将鼠标悬停/悬停时的较小图像替换为较大的图像；类似于缩略图的想法，但是查看我的代码我只是找不到如何实现我在这里看到的任何建议。

HTML 部分：

<div id="layer11" style="position: absolute; width: 150px; height: 20px; z-index: 1; left: 0px; top: 0px; " class="auto-style17">
    <img id="img1" alt="" height="20" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'s2.png')" src="s1.png" width="150" /></div>

这里是 javascript 函数：

function FP_swapImg() {//v1.0
 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
 n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
 elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
 var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } } 
    doc.$imgSwaps=null; }
}

我只是想不出我应该改变什么，以便交换的图像更大，而不是在现有图像上压缩。

Answer 1

您必须删除 width 和 height 属性

见http://jsbin.com/nifuvitoqa/1/edit