Fadein Hover with fadeout to orginal state or onclick stay in hover state

Hello I'm new to jQuery and Javascript!!

What I have to do is:

website with jquery and thumbnails.

When the page is loaded all the thumbnails have to be on 60% of opacity. As soon as you go with your mouse over a thumb it needs to fade to 100%, if you move with your mouse out t开发者_如何学Gohe thumbnail needs to fade back up on 60% of opacity.

When the user click on a thumbnail it have to stay at 100% of opacity. As soon as the user click on another thumbnail the 'old' thumbnail has to fade back to 60% and the 'new' one has to stay at 100%. (it already has 100% opacity because you go with your mouse over it).

---

$(document).ready(function(){
    $("#image").mouseover(function (){
       $(this).fadeTo("slow", 1)
    });

   $("#image").mouseout(function (){
       $(this).fadeTo("slow", 0.6);
   });
});

Have a look on jsFiddle I have set up a test to show how this works

---

Here you go, a demo:

http://jsfiddle.net/sg3s/UtU8G/

On hover fade to animation, do not hover out if locked, on click fade others out and lock this one.

Edit

As a bonus, here is a version where you can lock multiple tumbnails using ctrl.

http://jsfiddle.net/sg3s/UtU8G/6/