Change large image in gallery onmouse over of thumbnails

Question

I currently have a gallery that changes the larger image when the smaller is clicked. Here is the most important code:

.n1:focus span
{
background: url('images/Boot.png')
}

Then

<a class="thumb n1" href=# tabindex=1>
<img src=images/Boot.png><span>
<img src=""><br>Boot</span></a>

I can't figure out how to make this happen onhover or onmouseover.

Here is an example of what I need: http://thelittleappfactory.com/ripit/

Does anyone have any insight? I tried using javascript to open the link onmousehover, but my browser saw it as a popup.

Answer 1

First of all you need to have a thumbnail and a big version of your images. In your code you seem to have a single image. The big images should be hidden with css display:none and absolutely positioned so they will all be on top of each other. I would use jquery's mouseenter and mouseleave events. mouseover event is triggered when the cursor moves over an element and will generate too many calls.

    <div class="item n1">
        <img class="thumb" src="images/boot_thumb.png" alt="boot/>
        <img class="big" src="images/boot_big.png" alt="boot/>
    </div>

This javascript code would do the trick:

    $('item').mouseenter(function(){
        $(this).children('big').fadeIn();
    });

    $('item').mouseleave(function(){
        $(this).children('big').fadeOut();
    });

Answer 2

I actually found a way to do this with pure CSS. I thought it was pretty phenominal, because I was told that was impossible and there seems to be need for it. Here's source code for this technique:

http://ostmosis.com/OnHoverChangeImage.zip