Click to See Complete Forum and Search --> : Change image size with variable


lkeeney
03-05-2004, 07:17 PM
I have a simple problem I have been working on for two days and I can't figure out how to do it.

I have a file called redbar.gif that is 1 pixel high x 25 pixels wide.

I want to place this image on the screen at a predetermined absolute position, and be able to change the height of the image (from 1 to 200 pixels) based in the value stored in a variable called "data".

The end results is to generate a single vertical bargraph.

It seems that this should be able to be done with a couple lines of JavaScript. I just can't figure out how to do it.

A search on this forum did not reveal anything like this.

Any help will be appreciated.

Paul Jr
03-05-2004, 07:53 PM
Something like the attached file?

Khalid Ali
03-05-2004, 07:54 PM
create the image
var smalImg = new Image();
smallImage.src = "images/smallImage.gif";

//now you can make its size bigger or smaller

smallImage.width=XX
smallImage.height=XX

//where XX are any numbers

Nedals
03-05-2004, 07:57 PM
<html><head><title>Untitled</title>

<script type="text/javascript">
<!--
function imgheight(data) {
document.getElementById('theimage').style.height = data;
return false;
}
//-->
</script>
</head>

<body>
<a href="" onClick="return imgheight(150)">change height</a>
<div style="position:absolute; top:100px; left:100px;">
<img src="redbar.gif" name="theimage" width=10 height=25>
</div>
</body>
</html>


That should get you started

lkeeney
03-05-2004, 08:15 PM
I want to thank everyone for their responses. I'll give this a try tomorrow and see if I can figure it out.