CODEWITHSUNDEEP
javascripthtmlcss
onTheInternet
onTheInternet

Reputation: 7253

How do I give a .gif height and width when inserted with onMouseOver

I have a webpage that has jpegs that switch to gifs when you hover over them. I do this using this code 

<img src="images/e911_icon_vi_site_2014_white.jpg" onmouseover="this.src = 'images/e911_icon_vi_site_2014_white.gif'" onmouseout="    this.src = 'images/e911_icon_vi_site_2014_white.jpg'" class="servicesimages">

I gave it a class of service images so I can apply this style

.servicesImages{
    height:300px;
    width:412px;

}

The class worked when it was just a normal image. However, now that its a rollOver image, the class doesnt apply and the image defaults to its normal size, for both the gif and the jpeg.

A live example can be seen HERE

How can I fix this?

Upvotes: 0

Views: 585

Answers (2)

Jon B
Jon B

Reputation: 481

You can set the height and width in your onmouseover handler like this:

onmouseover="this.src = 'images/e911_icon_vi_site_2014_white.gif'; this.style.height = '50px';"

However, you might want to change your approach to using CSS. Then you can use a :hover class instead of messing with mouse handlers. example.

#Service1 {
    height: 300px;
    width: 300px;
    background: url('http://upload.wikimedia.org/wikipedia/commons/9/9a/Avenger__Westphalian_horse.jpg');
    background-size: 300px 300px;
}

#Service1:hover {
    height: 300px;
    width: 300px;
    background: url('http://www.canadianpetconnection.com/wp-content/uploads/2014/02/horse-OSPCA.jpg');
    background-size: 300px 300px;
}

Upvotes: 0

aloisdg
aloisdg

Reputation: 23531

In fact, you dont need JavaScript to do this. You can use only pure CSS.

JSFiddle

HTML

<div class="imgif"></div>

CSS

.imgif {
    height: 400px;
    width: 400px;
    background-position: center;
    border-radius:50%;

    background-image: url("http://placekitten.com/400/400");
}

.imgif:hover {
     background-image: url("http://i.imgur.com/YzGK6hf.jpg");    
}

Upvotes: 2

Related Questions