Highlight javascript

**DeckyB101** · 07-01-2010, 07:48 PM

I hope you can help me please. On my home page I have a few main image option buttons, what I want to happen is that when a user moves the mouse over one of the images the other three images become darker and if the user then moves the mouse to another image the other images become darker. You can see an example of this on the following page http://www.asos.com/man/. Is there anyway I can get this effect on my webpage? Any help is greatly appreciated.

**azoomer** · 07-01-2010, 11:29 PM

Hi DeckyB101, I have tried to make a small script in jQuery that does what you are requesting. The code I have now is this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hilite</title>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {	
   $('.imggall img').hover(function(){
   $(this).addClass('highlight');  
   $('.highlight').parent().siblings().children().stop().fadeTo(240, 0.3);   
              },         function () {
   $('.highlight').parent().siblings().children().stop().fadeTo(240, 1).end();   
   $(this).removeClass('highlight');   
});	 
});
</script>

<style type="text/css">
#container {
	width:1000px; 
	height:600px;
	margin-top:100px;
	margin-left: auto; 
	margin-right:auto;
}
.imggall img {
	border:1px solid #FFFFFF;
}
.imggall{ 
    width:auto; 
	height:auto; 
    background-color:#040404; 
	display:block;
	float:left;
}
.highlight{ display:block;}

</style>
</head>

<body>

<div id="container">
<div class="imggall"><img src="images/1.jpg" width="300" height="199" /></div>
<div class="imggall"><img src="images/2.jpg" width="300" height="199" /></div>
<div class="imggall"><img src="images/3.jpg" width="300" height="199" /></div>
<div class="imggall"><img src="images/4.jpg" width="300" height="199" /></div>
<div class="imggall"><img src="images/5.jpg" width="300" height="199" /></div>
<div class="imggall"><img src="images/6.jpg" width="300" height="199" /></div>
</div>
</body>
</html>

You can see it in action in this DEMO
I am a newbie with jQuery so the script can be made much better, I am sure.

I would love to hear from somebody how it could be improved. It is not the smartest way trying to select the parents siblings children, would have been easier with a cousin selector !!

**jscheuer1** · 07-02-2010, 11:40 AM

Originally Posted by azoomer

I would love to hear from somebody how it could be improved. It is not the smartest way trying to select the parents siblings children, would have been easier with a cousin selector !!

Code:

jQuery(function($){
	var ims = $('.imggall img').hover(function(){	
		ims.not($(this)).stop().fadeTo(600, 0.4);
	}, function(){
		ims.not($(this)).stop().fadeTo(600, 1);
	});
});

This is a another way to do $(document).ready() and works even when jQuery is in noConflict mode. The highlight class appeared to serve nothing in this set up. The .end() function is only useful if you want to revert the selector chain to what it was before your last change, there is a change in the selector chain where you used it, but you don't do anything with the restored collection it selects, so there is no need for it. The delay() function delays what follows it in the queue. I'm unclear if you really have a queue situation here or not. In any case, 80 ms is unnoticeable to the human eye and doesn't appear to be required by the code, you have stop()'s to prevent colliding of the fade animation effects, that should be enough.

The markup could be more concise. You could change it to:

HTML Code:

<div class="imggall">
<div><img src="images/1.jpg" width="300" height="199" /></div>
<div><img src="images/2.jpg" width="300" height="199" /></div>
<div><img src="images/3.jpg" width="300" height="199" /></div>
<div><img src="images/4.jpg" width="300" height="199" /></div>
<div><img src="images/5.jpg" width="300" height="199" /></div>
<div><img src="images/6.jpg" width="300" height="199" /></div>
</div>

Everything would work as before, as long as you change your style selector here (add the red part):

Code:

.imggall div { 
    width:auto; 
	height:auto; 
    background-color:#040404; 
	display:block;
	float:left;
	margin:3px;
	border:3px solid #FFFFFF;
	-moz-box-shadow:2px 2px 6px #B0B0B0;
	-webkit-box-shadow:2px 2px 6px #B0B0B0;
}

With a bit more tweaking we could probably get it to work for multiple .imggall on a page with the effect constrained to only the .imggall that was being hovered at that particular moment.

**azoomer** · 07-02-2010, 02:24 PM

Hi John. Thanks a lot for taking the time to look it over. I tried the code you made and it works perfectly. It is much cleaner. I am learning a lot from your explanation and I really appreciate that. Regarding the highlight class I can see what you mean, I guess I started out thinking that I would fade all images and then override only the .highligt with full opacity somehow, but the intentions changed along the way.
I will have to do some more studying of the code you made to fully understand it. There is much to learn from only a few lines of code. Your explanation is very good and I think I understand most of it. Thanks again.
Here's a Demo of the improved script in case somebody wants to see it in action.

**jscheuer1** · 07-02-2010, 02:45 PM

On a hunch, I double checked the .not() function because I thought I remembered it could also take an ordinary DOM element as an argument. It can, so we can simplify further:

Code:

jQuery(function($){
	var ims = $('.imggall img').hover(function(){	
		ims.not(this).stop().fadeTo(600, 0.4);
	}, function(){
		ims.not(this).stop().fadeTo(600, 1);
	});
});

**azoomer** · 07-02-2010, 03:39 PM

Indeed it works. It's amazing what can be done with a few lines in jQuery and it is also somewhat easier to understand than real javascript. Thanks

**jscheuer1** · 07-02-2010, 08:41 PM

As for that aforementioned tweak to get it to work independently with multiple .imggall divisions on a page:

Code:

jQuery(function($){
	$('.imggall').each(function(){
		var ims = $(this).find('img').hover(function(){	
			ims.not(this).stop().fadeTo(600, 0.4);
		}, function(){
			ims.not(this).stop().fadeTo(600, 1);
		});
	});
});

**azoomer** · 07-02-2010, 09:19 PM

I made a testpage with multiple galleries and it works like a charm. Very clever. There are a couple of new functions that I will have to read about. Thanks a lot, this will be very useful.

Thread: Highlight javascript

Thread Tools

Search Thread

Highlight javascript

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions