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.

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.

• javascript
• jquery
• hover
• toggle

Share Improve this question Follow asked Feb 1, 2012 at 17:31 C DogC Dog 15711 gold badge33 silver badges1212 bronze badges 3

• You can't do this with CSS. You'll need to use JavaScript. Give it a shot, then e back and post here where you ran into trouble with the JS. – maxedison Commented Feb 1, 2012 at 17:37
• 2 @maxedison It sure can be done with CSS. See my answer. – Šime Vidas Commented Feb 1, 2012 at 18:20
• Indeed it can. Very clever. However i'd still stick with JS -- far less plex and much more logical HTML markup. – maxedison Commented Feb 1, 2012 at 18:50

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

JavaScript solution

HTML:

<div id="output"></div>
<ul id="nav">
    <li data-href="http://placekitten./120/100">Cat 1</li>
    <li data-href="http://placekitten./110/100">Cat 2</li>
    <li data-href="http://placekitten./130/100">Cat 3</li>
    <li data-href="http://placekitten./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/Kne3d/

---

Alternative solution (pure CSS)

HTML:

<div id="output">
    <img id="image1" src="http://placekitten./120/100">
    <img id="image2" src="http://placekitten./130/100">
    <img id="image3" src="http://placekitten./110/100">
    <img id="image4" src="http://placekitten./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/Kne3d/3/

---

Third solution (pure CSS, on hover)

HTML:

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

CSS:

#gallery img {
    display: none;
}

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

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

Your links below the main image should be contained in some identifiable container we can reference, like so:

<img id="mainImage"></img>

<ul id="mainImageLinks">
   <li><a href="image1.jpg" />Link 1</a></li>
   <li><a href="image2.jpg" />Link 1</a></li>
   <li><a href="image3.jpg" />Link 1</a></li>
   <li><a href="image4.jpg" />Link 1</a></li>
   <li><a href="image5.jpg" />Link 1</a></li>
</ul>

Then you would use CSS to style the elements, obviously, and which is beyond the scope of your question, but would be something like this:

#mainImage {
   width: 200px;
   height: 200px;
   border: 1px solid black;
   display: block;
   margin: 10px; 
}

#mainImageLinks a {
   display: block;
   float: left;
   padding: 3px; 
}

Then jQuery takes care of the rest:

$('#mainImageLinks li a').bind('mouseenter', function() {
   var url = $(this).attr('href');
   $('#mainImage').attr('src', url);
   return false; // prevent the default action on click
});

And here is a working example.

You can do the hover change in CSS with a sprite, :hover, and the background-position property but I don't think that would be ideal for this type of thing. A jQuery solution would be better.

I'm not sure how to do this with just css, but here is a quick little jquery that should get you close.

$("a").each(function(index) {
    $(this).click(function() {
        $("#mainImg").find("img").attr('src', $(this).find("img").attr('src'));
    });
});

It would help if you posted some actual code, that way we could reference it when giving you solutions. My code assumes that you have an anchor that holds each image.

Try using this guide. Image Change on Hover. It has implementation of mousehover. You will only need to change the background: url instead of background-position being done.

And this link is for your click sort of like a full implementation On MouseClick. You actually only need to register a click event you want to go through the css route.