473,405 Members | 2,154 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,405 software developers and data experts.

making an image appear using clip property

cameokid
Can someone help me out with this.

Here is what i am trying to do. I have an image of size 310x310. Initially i am displaying only 50x50 using clip property. Later using setTimeout property i am trying to get the entire image so that it looks like animation. But this doesn't happen with the code below

[HTML]<html>
<head>
<style type="text/css">
.img1
{
position:absolute;
clip:rect(0px 50px 50px 0px)
}
</style>
<script type="text/javascript">
function start() {
var x=document.getElementById("img1");
x.style.clip.right+=10;
x.style.clip.bottom+=10;
if (x.style.clip.right<310)
setTimeout("start()",10);
else return;
}
</script>
</head>

<body onLoad="start();">
<p>The clip property is here cutting an image:</p>
<p><img id="img1" class="img1" border="0" src="Kiva_Logo.jpg" width="310" height="310"></p>
</body>

</html>[/HTML]
Feb 19 '08 #1
5 5931
acoder
16,027 Expert Mod 8TB
There's no clip.right/bottom. Set the whole clip each time. See this link. Don't forget the measurements (e.g. "px").
Feb 20 '08 #2
Sorry i was late in replying. Next time i would make it soon

Thanks for the help

The link was much useful. Here are some modifications that i made and its working fine

[HTML]<html>
<head>
<style type="text/css">
.img1
{
position:absolute;
clip:rect(0px 50px 50px 0px)
}
</style>
<script type="text/javascript">
var n=1;

function start() {
var x=document.getElementById("img1");
var i=0;
if (n<8) {

switch(n)
{
case 1:
x.style.clip="rect(0px,50px,50px,0px)";
break;
case 2:
x.style.clip="rect(0px,100px,100px,0px)";
break;
case 3:
x.style.clip="rect(0px,150px,150px,0px)";
break;
case 4:
x.style.clip="rect(0px,200px,200px,0px)";
break;
case 5:
x.style.clip="rect(0px,250px,250px,0px)";
break;
case 6:
x.style.clip="rect(0px,300px,300px,0px)";
break;
case 7:
x.style.clip="rect(0px,350px,350px,0px)";
break;
default:
break;
}

setTimeout("start()",200);
n++;
i++;
}
else {
return;
}
}
</script>
</head>

<body onLoad="start();">
<p>The clip property used to cut the image:</p>
<p><img id="img1" class="img1" border="0" src="Kiva_Logo.jpg" width="310" height="310"></p>
</body>

</html>

[/HTML]
But i need to optimize this code.

I need to avoid switch statements and use a variable 'z' such that i have
z=0;
x.style.clip="rect(0px,z,z,0px)" ;
z++ ;

hence i can increment the clipping pixel by pixel and increasing the speed would make it look like animation.

But the above code(using variable) is not possible. I also tried using arrays and eval. It didn't work.

Can you suggest any method to dynamically increase the clip attributes by using any variable or anything as such.


Thanks for the help
Mar 5 '08 #3
acoder
16,027 Expert Mod 8TB
Try this:
Expand|Select|Wrap|Line Numbers
  1. x.style.clip="rect(0px,"+(n*50)+"px,"+(n*50)+"px,0px)";
Ps. please use [code] tags when posting code. Thanks!
Mar 5 '08 #4
The code works perfect with this line

Expand|Select|Wrap|Line Numbers
  1. x.style.clip="rect(0px,"+(n*50)+"px,"+(n*50)+"px,0px)";
The variable should be enclosed between "+" signs when used as an attribute value. That's the lesson for me.


Thanks a lot.
Mar 6 '08 #5
acoder
16,027 Expert Mod 8TB
Glad you got it working and a lesson learnt!
Mar 6 '08 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: RIck Measham | last post by:
I pop up a window with a picture in it, however the picture can be very large. So here's what I want to do: Pop up a mindow with the picture clipped to the size of the window, then place a scaled...
8
by: Jeff Thies | last post by:
I'm having trouble clipping an image. My understanding is that this is all I should need: <img src="test_img.jpg" style="clip: rect(10px 10px 10px 10px)" alt="alt"> Although I've seen this as...
2
by: Kimmo R. M. Hovi | last post by:
Currently I have defined: -- clip clip -- <form method="post" action="xx" enctype="application/x-www-form-urlencoded"> <input type="image" name="Function 1" src="image1.gif" border="0"...
15
by: Anand Ganesh | last post by:
HI All, I have an Image. I want to clip a portion of it and copy to another image. How to do this? I know the bounding rectangle to clip. Any suggestions please. Thanks for your time and...
1
by: Robert W. | last post by:
In my Winforms app I'm trying to get an image's background to appear transparent on a form that has a gradient background. So I added a PictureBox and then attempted to add a custom paint command...
2
by: Csaba Gabor | last post by:
If I take a look at a site that has a heirarchical directory structure (e.g. http://www.treemenu.org/), then on the left there are always(?) some small images on the left, corresponding to '+',...
1
by: Brian | last post by:
Using A2K I have an image control on a report and use code to set the image.picture to the required jpg. 3 of the jpgs resize properly but 2 do not - they display much smaller than the image...
3
by: Keith G Hicks | last post by:
In MS Access image controls there's a property setting for "Size Mode" --> Clip, Zoom or Stretch. I don't see any similar property in an asp image control. When I have an image on a page, it seems...
29
by: Chris Riesbeck | last post by:
I have an image with a class and the class defines a clip rectangle. In Firefox 2 and 3, and Opera 9, I can access the rectangle with document.defaultView.getComputedStyle(). But that doesn't...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.