CODEWITHSUNDEEP
javascriptcsshtmlmouseovermouseout
user1266343
user1266343

Reputation: 177

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

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!

Upvotes: 2

Views: 7458

Answers (4)

Connor
Connor

Reputation: 1034

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/

Upvotes: 0

TNC
TNC

Reputation: 5386

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();
    });
});

Upvotes: 1

JonWarnerNet
JonWarnerNet

Reputation: 1172

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');" >

Upvotes: 5

Sean Johnson
Sean Johnson

Reputation: 5607

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/

Upvotes: 1

Related Questions