CODEWITHSUNDEEP
jqueryhtmlcssimage
stan
stan

Reputation:

change images using jQuery?

I'm trying to make an image change depending on the list-item you hover on.

I have a container containing an ul. I have three list-items (a small horizontal navigation). The list items are sitting on the bottom of the container which leaves an empty space on top of the li's. I want the empty space above the li's to change images depending on which list-item I hover over. There will be 3 different images or maybe using css sprites.

Is there any way I can make this happen with jQuery?

Upvotes: 1

Views: 1084

Answers (2)

ajm
ajm

Reputation: 20105

HTML:

<div id="container">
    <img id="yourImg" src="spacer.gif" width="..." height="...">
    <ul id="yourUL">
        <li data-imageswap="someimg.png">One</li>
        <li data-imageswap="another.png">Two</li>
        <li data-imageswap="andathird.png">Three</li>
    </ul>
 </div>

Script:

$('li','#yourUL').hover(function(){
    $('#yourImg').attr('src',this.getAttribute('data-imageswap'));
}

You could use something other than that data attribute (like a className or an id) to point to your image, but that should be the gist of it.

Sticking a transparent, 1x1 gif in your image to start will let you scale it to the width and height you need. Alternately, you could start with no image and write it into the DOM if you'd like to start out without it.

Upvotes: 1

Jason Berry
Jason Berry

Reputation: 2469

You could use the jQuery UI Tabs plugin for this. May be a little overkill but it would work. You can change the event used for selecting a tab to be on hover instead, like this:

$('.selector').tabs({ event: 'mouseover' });

Here's a super quick demo that might help (I've tested and it works), though obviously you would want to use your own CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Tabs Test</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/redmond/jquery-ui.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(function(){
            $('#tabs').tabs({ event: 'mouseover' });
        });
        //]]>
    </script>
</head>
<body>
    <div id="tabs">
        <div id="tabs-1">
            <img src="images/image1.jpg" alt="image1" />
        </div>
        <div id="tabs-2">
            <img src="images/image2.jpg" alt="image2" />
        </div>
        <div id="tabs-3">
            <img src="images/image3.jpg" alt="image3" />
        </div>
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
    </div>
</body>
</html>

Upvotes: 0

Related Questions