Crop image dynamically

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
WaldoMonster
Forum Contributor
Posts: 225
Joined: Mon Apr 19, 2004 6:19 pm
Contact:

Crop image dynamically

Post 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
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post 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>
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
WaldoMonster
Forum Contributor
Posts: 225
Joined: Mon Apr 19, 2004 6:19 pm
Contact:

Post 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.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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.
User avatar
VladSun
DevNet Master
Posts: 4313
Joined: Wed Jun 27, 2007 9:44 am
Location: Sofia, Bulgaria

Post 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 ..." ;)
There are 10 types of people in this world, those who understand binary and those who don't
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post 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?
Post Reply