Question

<tr>
<td> <span id="dummy" onclick="playSound(this,'vowels/ear.mp3');">
<img src="pics/ie.jpg" onmouseover="this.src='pics/dipthongs/ear.jpg';this.width=200;this.height=250" onmouseout="this.src='pics/ie.jpg';this.width=100;this.height=150"/>
</span> </td>

我的问题是当我加载页面时图像变得如此之大。我必须将鼠标悬停在所有图像上，然后才能返回我为它们声明的大小。谢谢！

Answer 1

在图像中添加一个类来固定宽度和高度参数。

<img src="/image.png" class="image1" />

现在CSS使用min-width / height和max-width / height：

.image1 {
max-width: 500px;
max-height:500px;
min-width: 120px;
min-height: 120px;
 }

创建函数

function mouseEffect(ele,image,className){
 ele.src=image;
 ele.className= className;
 }

示例：

http://jsfiddle.net/mwtjt/

Answer 2

不要在HTML中设置宽度。使用CSS设置宽度。不要设置适当缩放的高度。

HTML

<img class="styleImage" src="x.jpg">

CSS

img.styleImage {width:75%; -ms-interpolation-mode:bicubic;}

HTML MouseOver和MouseOut错误

2 个答案: