How do I make an image on my webpage enlarge when I mouse over it?

K

Khursheed

New member
Example:You can test it by changing url of image.

<html>

<head>

</head>

<body>
<img src="a1.jpg" width="300px" onmouseover="this.width=500" onmouseout="this.width=300">
</body>

</html>

Do not change value of src in img tag of ur code.
Just add onmouseover and onmouseout to img tag like

onmouseover="this.width=NewWidth" onmouseout="this.width=OriginalWidth"

and

replace OriginalWidth with original width of ur image and NewWidth with what width u want it to enlarge to. browser will automatically calculate correct height itself.
 
I am building a VERY basic webpage. I am new to all this and I am really only familiar with some html.

What code to do I need to add and to what sections of my current code do I need to add it in order to get an image to enlarge when I mouse over it?

Is there a simple way to do this where I can just copy and paste in the code and implant my image name in the correct spot?

In your response assume that I know NOTHING cause I really don't

Thanks
Here is my code currently. This displays on my webpage as three images evenly spaced and side by side.

<img border="2" src="bigcat.jpg" HEIGHT="200" WIDTH="220" HSPACE=12/>
<img border="2" src="fogriver.jpg" HEIGHT="200" WIDTH="220" HSPACE=12/>
<img border="2" src="walleye.jpg" HEIGHT="200" WIDTH="220" HSPACE=12/>

There are in the position and are the size I want BEFORE i mouse over. I want them to enlarge by about 150% when I mouse over.

Can someone show me how I'd alter the existing code to make this happen.
 
Back
Top