Click here to Skip to main content
Rate this: bad
good
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,
PSP
Posted 24-May-13 21:40pm

1 solution

Rate this: bad
good
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: http://cssglobe.com/3-easy-and-fast-css-techniques-for-faux-image/[^].
In html5 you have some other tools too, like this: http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/[^].
  Permalink  
Comments
praveena0989@gmail.com 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?
praveena0989@gmail.com at 25-May-13 5:31am
   
I saw it in jquery plugin called imgareaselect http://odyniec.net/projects/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">
<head>
<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 () {
$('img#photo').imgAreaSelect(
{
handles: true,
onSelectEnd: function alertme()
{

$(".imgareaselect-selection").animate({
opacity: 0.25,
left: '+=50',
height: '200'
}, 5000, function() {
// Animation complete.
});
}
});//img area select end
});//documen t end
</script>
</head>
<body>
<div><img id="photo" src="watch.png"/></div>
<!--<img src="text.jpg" class="book">-->
 
</body>
</html>
Zoltán Zörgő at 25-May-13 5:58am
   
That plugin allows you to visually mark a portion of the image.
praveena0989@gmail.com 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 OriginalGriff 390
1 Jochen Arndt 150
2 Richard MacCutchan 135
3 DamithSL 95
4 Garth J Lancaster 90
0 OriginalGriff 6,045
1 DamithSL 4,601
2 Maciej Los 4,087
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,260


Advertise | Privacy | Mobile
Web03 | 2.8.141220.1 | Last Updated 25 May 2013
Copyright © CodeProject, 1999-2014
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