Wesley Bakker

Interesting things I encounter doing my job...

Sponsors

News

Wesley Bakker
motion10
Rivium Quadrant 151
2909 LC Capelle aan den IJssel
Region of Rotterdam
The Netherlands
Phone: +31 10 2351035

(feel free to chat with me)
 

Add to Technorati Favorites

December 2009 - Posts

jQuery hoverImage plugin

At the project I’m currently reviewing they’ve used a lot of hover effects for images and links containing images. You can use CSS’s :hover for it, but that means you’ll have to add a new CSS line for each hover image and that it doesn’t work in IE6 for images. So they’ve decided to use a different approach. On all these images that needed a swap effect, they’ve added some JavaScript in the “onmouseover” and “onmouseout” and that’s something I wasn’t pleased with cause it was all cluttering the html, it asked for typo’s and they were registering handlers on the wrong events(they should have used "onmouseenter" and "onmouseleave"). And then I noticed they have jQuery registered on that same page.

Writing a plugin

I really love the cross-browser compatibility jQuery gives me out of the box and the ease of use. So it was time to write a jQuery plug-in. Let’s not bother you any longer with an introduction and show you the code for such a simple plug-in.

(function($) {
    $.fn.extend({
        hoverImage: function(options) {
            var defaults = { src: "-hover", preload: true, replaceEnd: "" };
            options = $.extend(defaults, options);

            var append = options.src.indexOf(".") == -1;

            var splitter;
            if (append) {
                splitter = options.replaceEnd + ".";
            }

            return this.each(function() {
                var obj = $(this);
                var img = obj.is("[src]") ? obj : obj.children("[src]:first").eq(0);

                if (!img.is("[src]")) {
                    return true;
                }

                var oSrc = img.attr("src");
                img.data("oSrc", oSrc);

                var hSrc = options.src;
                if (append) {
                    hSrc = oSrc.split(splitter).join(hSrc + ".");
                }
                
                img.data("hSrc", hSrc);

                if (options.preload) {
                    new Image().src = hSrc;
                }

                obj.hover(function() { img.attr("src", img.data("hSrc")); },
                          function() { img.attr("src", img.data("oSrc")); });
            });
        }
    });
})(jQuery);
 

So what does this code do?

It is a default plug-in with some settings.

  • src
    You can define a complete URL to an image to use on hover OR the string to append to the default src of the image. The default value for this is “-hover” which means that if the default src of your image is “mybutton.gif” on hover that will be replaced by “mybutton-hover.gif”.
  • preload
    Determines if you would like to preload the hover image. The default is true so your hover effect will show almost instantly.
  • replaceEnd
    This is an extra option to replace a value at the end of the default image src on hover. If your default image url is “mybutton-default.gif” and your hover image url is “mybutton-hover.gif” you need to replace “-default” at the end of the image url.

If the object on which this plug-in is called does not have a “src” attribute, it wil try to get the first child that has. The hover effect will still take place on hovering the parent, but the child its image src will be changed.

Here’s a sample of html in which the plug-in is used.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>hoverImage test page</title>
    <script src="/ClientScript/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="/ClientScript/jquery.hoverImage.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function() {
            $(".standardImage").hoverImage({replaceEnd: "-standard"});
            $(".hoverImage").hoverImage();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <img class="standardImage" src="Imgs/button-standard.gif" />
        <img class="hoverImage" src="Imgs/button.gif" />
        <a class="hoverImage" href="#" style="display:block; width:100%;border:solid 1px black;">
            <img src="Imgs/button.gif" />
        </a>
    </div>
    </form>
</body>
</html>

Works like a charm!

Cheers and have fun!

Wesley

Posted: Dec 25 2009, 02:27 PM by webbes | with 3 comment(s)
Filed under: ,
My First SharePoint 2010 feature! Adding jQuery...

I've attended the SharePoint 2010 Ignite Train the Trainer course this week and boy oh.. boy... great stuff inside SharePoint 2010!

So on friday (== lab day) I started by creating creating a SharePoint feature which adds jQuery to the page and allthough there are still some bugs in the Visual Studio 2010(remember it is beta) the whole experience you'll get is way better than before. No more use for 3rd party utils!!!

I've attached both the source and the SharePoint 2010 solution package for this jQuery feature.

Cheers and have fun,

Wes

More Posts