Question

我有以下代码在HTML中创建翻转效果：

<img src="images/facebook.png"
onmouseover='this.src="images/facebookActive.png"' 
onmouseout='this.src="image/facebook.png"' height="32px" width="32px"/>

它开始很好，但是当它悬停在它上面时，它会恢复到原来的大小（500x500）。我试图将height =“32px”width =“32px”添加到每个属性，但它似乎没有帮助。此外，通过使用GIMP减小图像的大小，质量会丢失并且变得更像素化。对这种情况有任何帮助吗？

Answer 1

我试图重现你的场景，但我无法做到这一点。因此，您可以编辑此JsFiddle来重现您的问题。尝试使用你的图像。

<img src="http://netdna.copyblogger.com/images/flogo.jpg" onmouseover='this.src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ6y qrcyQQxC6hISHmE37Yk2IUsOQtACy8NvcQgxMA0Uk3er5y"' onmouseout='this.src="http://netdna.copyblogger.com/images/flogo.jpg"' height="32px" width="32px" />

似乎工作正常。另请尝试使用PNGGauntlet

调整图像大小

Answer 2

您是否尝试在this.width和this.height设置onmouseover和onmouseout？

HTML img rover效果会改变图像的大小

2 个答案: