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


i have webpage has jpegs switch gifs when hover on them. using 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 class of service images can apply style

.servicesimages{     height:300px;     width:412px;  } 

the class worked when normal image. however, rollover image, class doesnt apply , image defaults normal size, both gif , jpeg.

a live example can seen here

how can fix this?

in fact, dont need javascript this. can use 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");     } 

Comments

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

google shop client API returns 400 bad request error while adding an item -