悬停时替换图像并单击链接

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/

Answer 2

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 .

Answer 3

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.

Answer 4

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.

Answer 5

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.