CODEWITHSUNDEEP
javascriptjqueryimg-area-select-jquery
sonalgoyal
sonalgoyal

Reputation: 359

I want to use imgareaselect in jquery

I m new in jquery.and my new task is "imgareaselect in jquery". I am refering THIS. but i am lacking somewhere to understand the logic. pls help me to create "imgareaselect"

Now my coading is:

<!DOCTYPE html>
  <html>
    <head>
     <script src="http://odyniec.net/projects/imgareaselect/jquery.imgareaselect.pack.js">     </script>
      <script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
      <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    </head>
    <body>
      <img id="photo" src="https://www.google.com/images/srpr/logo11w.png" />
        <script>
          $('img#photo').imgAreaSelect({
            handles: true,
            onSelectEnd: function (img, selection) {
             alert('width: ' + selection.width + '; height: ' + selection.height);
           }
         });
        </script>
      </body>
   </html>

Upvotes: -1

Views: 3224

Answers (1)

C. S.
C. S.

Reputation: 823

HTML w/ JAVASCRIPT

...
<head>
<script src="http://odyniec.net/projects/imgareaselect/jquery.imgareaselect.pack.js"></script>
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
</head>

<body>

    <img id="photo" src="https://www.google.com/images/srpr/logo11w.png" />

    <script>
    $('img#photo').imgAreaSelect({
        handles: true,
        onSelectEnd: function (img, selection) {
            alert('width: ' + selection.width + '; height: ' + selection.height);
        }
    });
    </script>

</body>
...

Try it out and experiment on fiddle. Read the documentation and you can see the limitations.

Upvotes: 0

Related Questions