1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need help in creating a very basic plugin

Discussion in 'jQuery' started by Subhomoy Goswami, Jan 3, 2014.

0
  1. #1
    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....
     
    Solved! View solution.
    Subhomoy Goswami, Jan 3, 2014 IP
  2. #2
    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):
     
    PoPSiCLe, Jan 3, 2014 IP
  3. Subhomoy Goswami

    Subhomoy Goswami Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #3
    Oohh shit man... Good catch bro... Thanks for the soln....
     
    Subhomoy Goswami, Jan 5, 2014 IP