Question

I’m trying to set up a page that looks like the image below.

Here’s the part that;s hanging me up…

I would like to have the main image replaced when I “hover” or “click” on one of the links below it. Each link below the main image would have it’s own specific image. Then I would like to make the link images “toggle” on/off.

I have tried to do this with pure css and and having a really hard time.

Thanks for your help.

Answer 1

JavaScript solution

HTML:

<div id="output"></div>
<ul id="nav">
    <li data-href="http://placekitten.com/120/100">Cat 1</li>
    <li data-href="http://placekitten.com/110/100">Cat 2</li>
    <li data-href="http://placekitten.com/130/100">Cat 3</li>
    <li data-href="http://placekitten.com/150/100">Cat 4</li>
</ul>

JavaScript:

$( nav ).on( 'click', 'li', function () {
    $( this ).addClass( 'selected' ).siblings().removeClass( 'selected' );
    var url = $( this ).data( 'href' );
    $( output ).html( '<img src="' + url + '">' );
});

Live demo: http://jsfiddle.net/Kne3d/

---

Alternative solution (pure CSS)

HTML:

<div id="output">
    <img id="image1" src="http://placekitten.com/120/100">
    <img id="image2" src="http://placekitten.com/130/100">
    <img id="image3" src="http://placekitten.com/110/100">
    <img id="image4" src="http://placekitten.com/140/100">
</div>

<ul id="nav">
    <li><a href="#image1">Cat 1</a></li>
    <li><a href="#image2">Cat 2</a></li>
    <li><a href="#image3">Cat 3</a></li>
    <li><a href="#image4">Cat 4</a></li>
</ul>

CSS:

#output img {
    display: none;
}

#output img:target {
    display: inline;
}

Live demo: http://jsfiddle.net/Kne3d/3/

---

Third solution (pure CSS, on hover)

HTML:

<ul id="gallery">
    <li>
        <span>Cat 1</span>
        <img src="http://placekitten.com/120/100">
    </li>
    <li>
        <span>Cat 2</span>
        <img src="http://placekitten.com/150/100">
    </li>
    <li>
        <span>Cat 3</span>
        <img src="http://placekitten.com/110/100">
    </li>
    <li>
        <span>Cat 4</span>
        <img src="http://placekitten.com/140/100">
    </li>
</ul>

CSS:

#gallery img {
    display: none;
}

#gallery span:hover ~ img {
    display: block;
}

Live demo: http://jsfiddle.net/Kne3d/5/