I use onmouseover for hover effects of the main site logo on my dev site .

onmouseover changes the site logo image instantaneously, I was wondering if I could apply a transition effect (fade in, or just generally slow down the transition speed) without using jQuery.

Here is my code:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" ONMOUSEOVER='ian.src=".png" ' ONMOUSEOUT='ian.src=".png"'>
  <img src=".png" NAME="ian" class="header-image" alt="Ian Nelson" />
</a>

I use onmouseover for hover effects of the main site logo on my dev site http://www.new.ianroyal.co.

onmouseover changes the site logo image instantaneously, I was wondering if I could apply a transition effect (fade in, or just generally slow down the transition speed) without using jQuery.

Here is my code:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" ONMOUSEOVER='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo.png" ' ONMOUSEOUT='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png"'>
  <img src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png" NAME="ian" class="header-image" alt="Ian Nelson" />
</a>

I've searched and searched but it seems the only solultions are with jQuery which I don't have a good enough grasp of yet.

Thank you

• javascript
• html
• css

Share Follow edited Apr 25, 2019 at 12:28 leonheess 21.6k1919 gold badges9494 silver badges136136 bronze badges asked Oct 23, 2012 at 21:29 Michael McVerryMichael McVerry 24911 gold badge44 silver badges99 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Use css3 transitions.

div {
    height: 100px;
    width: 100px;
    background: url(image1.png) no-repeat;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
}

div:hover {
    background-image: url(image2.png)
}

Old browsers will simply not animate the transition.

Demo: http://jsfiddle/elclanrs/jg7G3/ ​

You can use pure CSS3.

.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
  opacity: 0.5;
  }

Example taken from here. There are lots of other possibilities but that should be a good start.

However, it will only work with browsers which support CSS3 Transitions. Internet Explorer especially is late to the game, and there are still lots of people out there using it (and older versions of other browsers which don't support CSS3).

If you want a truly cross-browser solution which maximises support for older versions then JQuery really is the way to go. However hard it seems, the time invested in learning to do a fade will really pay off. And it will almost certainly be easier to learn how to do a bit of JQuery than to do an equivalent pure JavaScript solution which would give the same cross-browser patibility that JQuery gives you for free.

Ideally, just use CSS Transitions and the :hover selector, and leave JS out of it entirely, me ça.

Working example, just provide image1.jpg and image2.jpg in same directory:

<script src="http://ajax.googleapis./ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script>
<script>
$(function() {

$('img').mouseenter(function(){
  $(this).fadeOut('fast', function(){
    $(this).attr('src', $(this).data('on'));
    $(this).fadeIn();
  });
});

$('img').mouseleave(function(){
  $(this).fadeOut('fast', function(){
    $(this).attr('src', $(this).data('off'));
    $(this).fadeIn();
  });
});


});

</script>

<img width="100" height="100" src="image1.jpg" data-on="image2.jpg" data-off="image1.jpg">

Learn jQuery. I promise it will make you happy in the long (and short) run. That being said, once you know jQuery, dive back into vanilla js so that you really understand how it works.

For example, your problem in jquery would be as simple as:

$(function() {
    $('a').fadeOut();
    $('a').attr('src', '{new image path}');
    $('a').fadeIn();
});