javascript image rollover

Question

Hi I have a question about image rollover but it's not how you'd think.

I've seen an example http://www.asos.com/ and click the home button(top nav far left)

You can see that when you rollover an image that image stays highlighted and the others darken.

I know this has been done with jquery but the code is very messy. Has anyone seen this before or knows how to do it?

Thanks

score 2 · Answer 1 · edited Dec 10 '11 at 14:41

2

First of all: Firebug is your friend. The technique employed is simpler than one might think: They just reduce the images' opacity to 0.3. As the background is black, the images appear darkened. So the code might look something like this:

$('img.fade').live('mouseover', function (e) {
    var $this = $(this).fadeTo(500, 1.0);
    $('img.fade').not($this).fadeTo(500, .3);
);
$('img.fade').live('mouseout', function (e) {
    var $this = $(this);
    $('img.fade').not($this).fadeTo(500, 1.0);
);

edited Dec 10 '11 at 14:41

answered Dec 11 '09 at 11:31

Tom Bartel

2,283
1
15
18

So this effectively could be achieved without jquery but they are using it to fade the images? – Ben Dec 11 '09 at 11:38
Purely technically speaking, anything that can be achieved with jQuery can also be achieved with pure JavaScript and no libraries. It just would be an enormous hassle in a lot of cases. So yes, it could also be achieved without jQuery. – Tom Bartel Dec 11 '09 at 12:26

score 1 · Accepted Answer · answered Dec 11 '09 at 11:43

Fast solution (it can be tuned shorter i guess):

<div class="images">
    <img src="http://www.google.com/google.jpg" />
    <img src="http://www.google.com/google.jpg" />
    <img src="http://www.google.com/google.jpg" />
    <img src="http://www.google.com/google.jpg" />
</div>

<script type="text/javascript">
$().ready(function(){
    $('.images img').hover(
        function(){
            $(this).parents('.images').find('img').not(this).animate({"opacity": "0.3"}, 200);
            $(this).animate({"opacity": "1"}, 200);
        }, 
        function(){
            $(this).animate({"opacity": "1"}, 200);
        }
    );
$('.images').bind('mouseleave',function(){$(this).find('img').animate({"opacity": "1"}, 200);});
});

javascript image rollover

2 Answers2

Linked