hello every one i'm new to jquery plugin and wanting to create a pulgin that when ever an image is hovered its opacity will change... I know it can be done very simply by using jquery in build function (mouseover) but the problem is that i'm not able to do that using plugin... The code is shown below (function($) { $.fn.imageHoverOverText = function(options) { var defaults = { "width": 200, "height": 50 } var parameters = $.extend(defaults,options); return this.each(function(){ var element = $(this); element.mouseover(function(){ $(this).css('opacity','0.2'); }); }); }; } (jQuery)); Code (markup): the html markup is shown below.... <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="image-hover-over-text.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> <script> $(document).ready(function(){ $('img').imageHoverOverText({width: 200, height: 50}); </script> </head> <body> <img src="images/1.jpg" width="200" height="120" alt="green snake" /> <div id="showText"></div> </body> </html> Code (markup): But its not working... Any help will be greatly accepted....
You didn't end you $.document(ready() { - you're missing the final }); I updated your function a little bit as well, adding a mouseleave-function - take it or leave it (function($) { $.fn.imageHoverOverText = function(options) { var defaults = { "width": 200, "height": 50 } var parameters = $.extend(defaults,options); return this.each(function(){ var element = $(this); element.mouseover(function(){ $(this).css('opacity',0.2); }); element.mouseleave(function() { $(this).css('opacity',1) }) }); }; } (jQuery)); Code (markup):