CODEWITHSUNDEEP
jqueryhtmlcss
KGKG
KGKG

Reputation: 88

Problems with Mouse Hover/Image Swap

In this JSFiddle, I'm trying to do a simple mouseover an image, it changes image, mouse off, the image changes back. But for some reason I'm not seeing the problem in the code.

http://jsfiddle.net/gmULU/2/

  $(document).ready(function(){
 $('.normalClassName').click(function () {
$(this).addClass('hoverClassName');
}, function () {
$(this).removeClass('hoverClassName');
});
});

There seems to be a "tiling" problem where the original image tiles. See the JSFiddle.

Also if anyone can tell me what code do I need to add, to get it where I can have a mouse click on the 2nd image and out appears to the right another image to where I can click on that 3rd image to go to a link. Thanks

Upvotes: 1

Views: 188

Answers (2)

hjpotter92
hjpotter92

Reputation: 80657

  1. If you want it to happen at mouseover or hover, why use .click()?
  2. .click() doesn't have a handlerOut attached to it.

If you only need to switch the image(and not the background) as you state in your question(I've overlooked your code) then you can use this:

$(document).ready(function () {
    $('.normalClassName').hover(function () {
        $(this).find('img').attr( 'src', 'http://creativebits.org/files/500px-Apple_Computer_Logo.svg_.png' );
    }, function () {
        $(this).find('img').attr( 'src', 'http://www.applegazette.com/wp-content/uploads/apple-logo.jpg' );
    });
});

Here's the link to working fiddle update.

Upvotes: 1

Ragnarokkr
Ragnarokkr

Reputation: 2328

If you need to only swap from an image to another you can do this:

HTML

<div class="normalClassName"></div>

CSS

.normalClassName {
    width: 512px;
    height: 512px;
    background: transparent url('http://www.applegazette.com/wp-content/uploads/apple-logo.jpg') top left no-repeat;
}

.normalClassName:hover {
     background: transparent url('http://creativebits.org/files/500px-Apple_Computer_Logo.svg_.png') top left no-repeat;
}

In this way, the background will swap from an image to another when mouse is hovering, but remeber to use images of same size.

Here the fiddle to test. As you can see the images have different sizes and the effect is ugly.

Upvotes: 0

Related Questions