Question

I have 6 images.
When they are rolled over the images change using css hover.
When the images are clicked the original image appears (again using css) but I want the rest of the images to dim when one is selected.
I’ve been looking into various JS option but just cant seem to get it to work. Does anyone have any suggestions?

Answer 1

Another solution is adding a class to the selected image and the images parent.
This makes it easier to maintain as the styling is all done in css.

Quick example here:

css

.img{
    display:inline-block;
    height:40px;
    width:40px;
    border:1px solid black;
}

.clicked .img{
    opacity:0.3;
}

.clicked .img.selected{
    opacity:1;
    background:red;
}

js

​
$('.img').on('click', function() {
    $('.img').removeClass('selected');
    $(this).addClass('selected');
    $('.container').addClass('clicked');
})​

html

<div class="container">
    <div class="img">img</div>
    <div class="img">img</div>
    <div class="img">img</div>
    <div class="img">img</div>
    <div class="img">img</div>
    <div class="img">img</div>
</div>​

http://jsfiddle.net/renekoch/y6YCc/