How does the Image Hover jQuery plugin work?

I would like to use the Image Hover plugin on my website.

Since I have only used jQuery for a week, I am not that skilled. What I would like is the following:

On my website I have all sorts of thumbnails created which shows previews of my projects. What I exactly want is, when you come across a picture "hovered" there is a pattern about that picture is as it were. (This pattern at all images meant.) Can someone help me implement the code?

This would be part of the fade:

    if(opt.fade){
      var offset = node.offset();
      var hover = node.clone(true);
      hover.attr('src', hoverImg);
      hover.css({
        position: 'absolute',
        left: offset.left,
        top: offset.top,
        zIndex: 1000
      }).hide().insertAfter(node);
      node.mouseover(
        function(){
          var offset=node.offset();
          hover.css({left: offset.left, top: offset.top});
          hover.fadeIn(opt.fadeSpeed);
          node.fadeOut(opt.fadeSpeed,function(){node.show()});
        }
      );
      hover.mouseout(
        function(){
          node.fadeIn(opt.fadeSpeed);
          hover.fadeOut(opt.fadeSpeed);
        }开发者_高级运维
      );
    }else{
      node.hover(
        function(){node.attr('src', hoverImg)},
        function(){node.attr('src', orgImg)}
      );
    }

1. Not sure what you mean by ... What I exactly want is, when you come across a picture "hovered" there is a pattern about that picture is as it were. (This pattern at all images meant.) This sentence just does not make sense to me. Please clarify...

2. I don't see why you need to rewrite the plugin internals.

3. If I am understanding you correctly, you want to use a single custom image as part of your src attribute to pass to the imghover plugin. To do that, just make sure it's in the right place and specify the full path to it.

   So, for example, you have your image in /images/image01.png and your hover image that is going to be used for all the images is in /images/hover.png, you would do ... something like $("img").imghover({src:"/images/hover.png"}); in your window load event handler or the $(function() {...} jQuery equivalent.

   Again, make sure to include full path. instead of just hover.png.

See the example that I did here. I had to bring in the full source of imghover and plop it in as inline script since for some reason I can't have it stream directly from the repository, but I didn't modify anything inside the plugin.