jQuery Toggle Handlers(Image Resize)


jQuery provides a few event-related convenience methods that makes it easier to use interaction behaviour 
on our pages.
toggle() method establishes a circular progression of click event handlers that are applied on successive click events.
On first click event first registered handler is called, on second click, the second is called, on third third is called and so on..
The function given below demonstrates a progression of event handlers. 

<script type="text/javascript">
      $(function(){

        $('img[src*=small]').toggle(
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/small/,'medium'));
            },
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/medium/,'large'));
            },
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/large/,'small'));
            }
        );

      });
    </script>

 Using it with HTML we have:
<!DOCTYPE html>
<html>
  <head>
    <title>jQuery .toggle() Example</title>
    <link rel="stylesheet" type="text/css" href="../styles/core.css"/>
    <script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
    <script type="text/javascript">
      $(function(){

        $('img[src*=small]').toggle(
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/small/,'medium'));
            },
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/medium/,'large'));
            },
            function() {
              $(this).attr('src',
                $(this).attr('src').replace(/large/,'small'));
            }
        );

      });
    </script>
    <style type="text/css">
      img {
        cursor: pointer;
      }
    </style>
  </head>

  <body>

    <div>Click on the image to change its size.</div>
    <div>
      <img src="hibiscus.small.jpg" alt="Hibiscus"/>
    </div>  </body>
</html>

small




















large