<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>
My problem is that the images get so big when i load the page. I have to hover to all the images before it returns to the size i declare for them. thanks!
为图像添加一个类以固定宽度和高度参数。
<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;
}
例子：
不要在 HTML 本身中设置宽度。使用 CSS 设置宽度。不要设置它会正确缩放的高度。
HTML
<img class="styleImage" src="x.jpg">
CSS
img.styleImage {width:75%; -ms-interpolation-mode:bicubic;}