CODEWITHSUNDEEP
javascriptonmouseoveronmouseout
Dora
Dora

Reputation: 6990

onmouseover and onmouseout to resize images

I'm trying to mouse over a few images then the images will resize but somehow let's say I have three images. if my mouse is over the first image then all three will resize if I mouse over the third then second then first then it'll resize one by one instead of resizing all three at once. I just started javascript so don't know too much yet. Is this how it works unless I know more advanced way of doing it?

Also I want to make it so when my mouse is out the images will go back to default but I'm not sure how I should do that....

This is what I have...

<script>
var div1Images=document.getElementById("div1").getElementsByTagName("img");

for(i=0;i<div1Images.length;i++)
{
    div1Images[i].onmouseover=function()
    {
    this.style.width="100px";
    }
}
</script>

<body>
<div id="div1">
<img src="cat.jpg" id="im1"/>
<img src="dog.jpg" id="im2"/>
<img src="fish.jpg" id="im3"/>
</div><!--close div1-->
</body>

Thanks in advance.

Upvotes: 0

Views: 5020

Answers (1)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

You can do this with CSS:

<img class="mypic" src="cat.jpg" id="im1"/>

.myPic:hover {
      width:100px;
}

Upvotes: 2

Related Questions