Click here to Skip to main content
11,719,903 members (89,250 online)
Rate this: bad
Please Sign up or sign in to vote.
Hi Guys,

I have an image and now I want to apply animation to a part of that image.
I tried using jquery animate method but that works for whole object but I want
to apply effects only to specific part of a image.

Thanks in Advance,
Posted 24-May-13 20:40pm

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

From browsers's and javascripts's point of view, the image is a closed entity. You can make however tricks with css to crop a portion of it:[^].
In html5 you have some other tools too, like this:[^].
Comments at 25-May-13 4:39am
Hi friend,

Thanks for your reply but those links have code to display part of image "not to select part of a image", my problem is, I want to give some effects to perticuler part of a image.(original image should exist)
Zoltán Zörgő at 25-May-13 5:15am
You didn't get the point: you can not select part of the image in javascript and apply some effect.
Can you give a link where we could see an example how did you imagined this? at 25-May-13 5:31am
I saw it in jquery plugin called imgareaselect

,there he says, you can select a portion of image and plugin will assign a class name to that selected portion.

So tried animating selected portion using assigned class name but It did not work.

My code..

<html lang="en">
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
handles: true,
onSelectEnd: function alertme()

opacity: 0.25,
left: '+=50',
height: '200'
}, 5000, function() {
// Animation complete.
});//img area select end
});//documen t end
<div><img id="photo" src="watch.png"/></div>
<!--<img src="text.jpg" class="book">-->

Zoltán Zörgő at 25-May-13 5:58am
That plugin allows you to visually mark a portion of the image. at 25-May-13 7:06am
thank you

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 1,869
1 OriginalGriff 770
2 F-ES Sitecore 640
3 Maciej Los 609
4 Richard MacCutchan 540

Advertise | Privacy | Mobile
Web03 | 2.8.150901.1 | Last Updated 25 May 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100