Hiding and displaying an image in mouse over action in a div

Question

Im trying to hide a specific image in mouse over and display another image. The opposit will be done when mouseout. Below is the code I wrote,

<div id="console" onmouseover="$(this).find('#offer_image').css({display: none});$(this).find('#offer_image_selected').css({visibility: visible});"
     onmouseout="$(this).find('#offer_image').css({visibility: visible});$(this).find('#offer_image_selected').css({display: none});" >

But it doesn't work when I run the application. Can anyone point out what has gone wrong in it?
Thanks a lot!

Answer 1

If your using jQuery try

<div id="console"
     onmouseover="$(this).find('#offer_image').hide(); $(this).find('#offer_image_selected').show();"
     onmouseout="$(this).find('#offer_image').show(); $(this).find('#offer_image_selected').hide();">

This uses show() and hide() methods from jQuery.

Otherwise use the following:

<div id="console"
     onmouseover="$(this).find('#offer_image').css('display', 'none'); $(this).find('#offer_image_selected').css('display', 'block');"
     onmouseout="$(this).find('#offer_image').css('display', 'block'); $(this).find('#offer_image_selected').css('display', 'none');" >

Answer 2

I'd actually do this entirely with CSS. Try the following:

#console #offer_image,#console:hover #offer_image_selected{display:block;}
#console:hover #offer_image,#console #offer_image_selected{display:none;}

proof of concept JSFiddle: http://jsfiddle.net/86DJu/

Answer 3

You can do something like this, using hover and hide/show:

$(document).ready(function()
{
    $('#console').hover(function()
    {
        $(this).find('#offer_image').hide();
        $(this).find('#offer_image_selected').show();
    }, function()
    {
        $(this).find('#offer_image').show();
        $(this).find('#offer_image_selected').hide();
    });
});

Answer 4

How about a little css3? Start out with something like this:

#console {
background-image: url("first-image.jpg")
-moz-transition: all 0.5s; 
-webkit-transition: all 0.5s; 
-o-transition: all 0.5s; 
transition: all 0.5s;
}

#console:hover {
background-image: url("second-image.jpg")
}

http://jsfiddle.net/2wHfN/2/