jQuery Hover for Multiple Buttons/Images

It’s been awhile since I have posted something with code up here. I figured a small post on a simple jQuery exercise that might help someone out.

The goal of this exercise is simple:
We want to have a hover effect to make ‘grey’ images become ‘colored’ when the mouse hovers over them.

The tools we will need:
jQuery library (http://jquery.com/), a webpage and some -grey and -clr (color) images.
Here are a few we will use in this exercise.

Here are some fun additional challenges I am going to toss in:
We will be doing this on a SharePoint welcome page which has the content (images etc) in a rich text field control. That means you can’t add any JavaScript where the images are being shown.

Solution Steps:
Here’s where I will go through how you can do this (pretty darned easily) and some simple recommendations.

1. First you need to have a welcome page in SharePoint (or a generic html page). Then you are going to add image references. Each image should be named CONSISTENTLY. That way our code can be really simple and generic (which all developers love). As an example the ‘greyed out’ images will be named “Whatever -grey.gif” where the “-grey” is consistent. I added the hyphen in the off chance that when we replace the -grey later on, there might be a -grey somewhere else in the URL (unlikely, but should make it unique; if you really want to go the extra mile you could even use a GUID).As for the ‘coloured’ images we will name these “Whatever -clr.gif” where again -clr is consistent.What we get then is basically a bunch of <img> tags pointing to -grey to start us off. In this case we will add the following code to our normal rich text field control on the welcome page.
   <DIV>TIPS AND TRICKS</DIV>
   <DIV>
   <IMG class=“ColourChange” alt=“Word 2007” src=“https://webaddress/IconImages/MS-Word-grey.gif&#8221;>
   <IMG class=“ColourChange” alt=“Outlook 2007” src=“https://webaddress/IconImages/MS-Outlk-grey.gif&#8221;>
   <IMG class=“ColourChange” alt=“Excel 2007” src=“https://webaddress/IconImages/MS-Excel-grey.gif&#8221;>
   <IMG class=“ColourChange” alt=“OneNote 2007” src=“https://webaddress/IconImages/MS-Note-grey.gif&#8221;>
   </DIV>
2. You need to add the jQuery library reference to the page. You can do this via inserting it into the masterpage, page layout, or into something like a content editor webpart. For this example I will just toss it, as well as the script I will be using into a Content Editor WebPart (CEWP).
   <script type=‘text/javascript’ src=‘https://webaddress/_layouts/ThirdParty/JavaScript/jquery.js&#8217;></script>
   (Can be anywhere, just giving example).
3. Add this code to either a CEWP, Master Page, or Page Layout (as defined earlier). So that when the objects with a class assignment of ColourChange are hovered over they change their source image.
   <script>
   $(document).ready(function(){
   $(“.ColourChange”).hover(function()
   {
   $(this).attr(“src”,$(this).attr(“src”).replace(‘-grey’,‘-clr’));
   }, function()
   {
   $(this).attr(“src”,$(this).attr(“src”).replace(‘-clr’,‘-grey’));
   });
   });
   </script>
4. All done. Even if new images are added as long as we assign the appropriate class and ensure the script is running our hover effects should all be consistent.

This was a pretty specific example but the important things to note here were that we wanted consistent naming conventions so that we could write a fairly generic script to change the src attribute of any object with the ColourChange class. In our example we used a replace to accomplish this. You could have just as easily changed the position, size, or other things as well.

We also have HTML code that is flat and simple without any need for onmouseover events, or (IMO) bad things like that. So the code was clean and simple (as well as accepted by picky controls like the Rich Text Field control in SharePoint) and the script was pretty simple and clean.

Hope this helps someone,
Richard Harbridge