HTML MouseOver and MouseOut Error

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>

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!

Answer 1

Add a class to the image to fix the width and height parameters.

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

Now CSS using min-width/height and max-width/height:

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

Create Functions

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

Example:

http://jsfiddle.net/mwtjt/

Answer 2

Don't set the width in HTML itself. Use CSS to set the width. Dont set the height it will be properly scaled.

HTML

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

CSS

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