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

Advertisements
Explore posts in the same categories: Code, jQuery, SharePoint 2007

Tags: ,

You can comment below, or link to this permanent URL from your own site.

6 Comments on “jQuery Hover for Multiple Buttons/Images”

  1. Anon Says:

    Just a tip:

    When it comes to things like menus and other “list style” page functions, please use lists. Having a div with a bunch of image tags scattered in it is just plain ugly and takes me back to the year 1998 of the web development world. Your HTML code should look more like this:

    … etc

    Actually, if you wanted to follow web standards even more you would place the images as non-repeated background attributes.

    Additionally, if you use a list, or simply change your to have the ColourChange class () then you can minimize your repeating of classes by removing them all from your tags and then just modifying your Jquery with:

    $(“.ColourChange img”).hover(function() { … });

    So your final HTML code (without using my suggested background image option would be):

    .. etc

    Much cleaner!

    You should follow the DRY principle as much as you can when programming 🙂

  2. Anon Says:

    Your blog seems to parsE HTML. Boo 😦 My HTML code doesn’t even show up

  3. rharbridge Says:

    Absolutely! I was trying to do whip this together fast (in between other stuff) and so I didn’t spend much time on the HTML part of it. Just wanted something so people could copy/paste or get the idea.

    If you want to email me the code update I will change it in the blog. harbrich [at] hotmail – I also hate this blog’s removal of pretty much everything under the sun (I can’t embed things or do much) and have another wordpress install on my own server, just haven’t had any time whatsoever to finish it up and move this over.

    And the DRY (Do not repeat yourself) principal is absolutely something I try to follow and evangelize the use of as practice/reminder when I code.

    Thanks for the great feedback!


  4. […] we want to have a hover effect to make grey images become colored when the mouse hovers over. them. Web Site Download AKPC_IDS += "1107,";Popularity: unranked [?] Share and […]

  5. Dizajn.vg Says:

    Hello,

    just wanted to thank you for this great tutorial.
    I’ve modified it a bit and used it on my site

    http://www.dizajn.vg

    🙂


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: