Page 1 of 1

Crop image dynamically

Posted: Thu Nov 15, 2007 12:38 pm
by WaldoMonster

Code: Select all

<span id="progress"></span>

<script type="text/javascript">
document.getElementById('progress').innerHTML = '<img src="progress.gif" alt="" width="<?php echo $width; ?>" height="5" border="0">';
</script>
I use innerHTML to dynamicaly update a progress bar.
This is working very well when using an image like this:
Image

When I want to use an image like below I can't scale the image like above.
Is there some way to crop the image with Javascript or CSS?
Image

Posted: Thu Nov 15, 2007 4:18 pm
by VladSun

Code: Select all

<div id="progressBar" style="width: 50px; overflow: hidden">
	<img src="progress2.gif">
</div>

<script language="JavaScript">
<!--
	document.getElementById('progressBar').style.width = 20;
//-->
</script>

Posted: Thu Nov 15, 2007 5:32 pm
by WaldoMonster
Thank very much, it works perfectly!

A good idea to update the desired width instead of innerHTML.
I'm relative new to JavaScript, and learn almost every day.

Posted: Thu Nov 15, 2007 5:39 pm
by JellyFish
VladSun wrote:

Code: Select all

<div id="progressBar" style="width: 50px; overflow: hidden">
	<img src="progress2.gif">
</div>

<script language="JavaScript">
<!--
	document.getElementById('progressBar').style.width = 20;
//-->
</script>
That or use it as a background image.

Posted: Thu Nov 15, 2007 6:28 pm
by VladSun
JellyFish wrote:That or use it as a background image.
Yes, you are right - I would use a background image in this case ...
But next question would be "I have image which is entirely different along its width/height ..." ;)

Posted: Sun Nov 18, 2007 11:35 am
by JellyFish
VladSun wrote:
JellyFish wrote:That or use it as a background image.
Yes, you are right - I would use a background image in this case ...
But next question would be "I have image which is entirely different along its width/height ..." ;)
Hmm? I don't think I understand fully, the only time when you'd need to use an img element is when you need to stretch or resize the image.

If you're asking a new question, I don't think I know what the question is?