How to run my .gif file only if mouse is hover on picture?
How to run my .gif file only if mouse is hover on picture?
DEMO: http://jsfiddle.net/pHcXa/
<html>
<body>
<div id="img_wrap" class="static">
<img id="animated" src="database.gif">
<img id="static" src="database.png">
<script type="text/javascript">
$(function(){
$('#img_wrap').on( 'mouseenter', function() {
$(this).toggleClass('animated', 'static');
})
})
</script>
</body>
</html>
Solution 1:
or you can use css for doing this
fiddle : http://jsfiddle.net/parslook/pHcXa/3/
css
body {
background-color:#282828;
}
.image {
background: url(http://swish.wodip.opole.pl/forum/files/thumbs/t_spirala_157.png);
width:300px;
height:310px;
background-size:300px;
}
.image:hover {
background: url(http://www.laboiteverte.fr/wp-content/uploads/2010/10/gif-psychedelique-hypnose-animation-11.gif);
width:300px;
height:310px;
background-size:300px;
}
html
<div class="image">
</div>
Solution 2:
DEMO
$(function () {
$('#img_wrap').on('hover', function () {
$(this).toggleClass('animated').toggleClass('static');
}, function () {
$(this).toggleClass('animated').toggleClass('static');
});
});
.hover()