PDA

Click to See Complete Forum and Search --> : Loading Images

dawkim
01-23-2004, 09:26 PM
I am working on a project that requires user input to convert temperatures from celcius to farenheit and vice versa. I have coded that with no problem in JavaScript. However, I also need to include a graphic thermometer that shows the mercury adjusting to the shown temperature. Can someone help me figure out how to do this? Sample code would be great. Here is the code as it stands:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function show()
{
var far = document.degin.far.value
var deg = Math.round((far - 32) * 5/9)
document.degin.cel.value = deg
}

function showt()
{
var cels = document.itt.celt.value
var fin = Math.round((cels * 9/5)+32)
document.itt.fartw.value = fin
}

// End -->
</script>
</HEAD>

<BODY>
<div align="center">
<h3><u>Fahrenheit to Celsius</u></h3>
<form name="degin">
Fahrenheit: <input type="text" name="far" size="5">
<input type="button" value="Convert to Celsius -->" onClick="show()">
<input type="text" name="cel" size="15">
<input type="reset" name="ResetBtn" value="Reset">
</form>

<form name="itt">
<h3><u>Celsius to Fahrenheit</u></h3>
Celsius: <input type="text" name="celt" size="5">
<input type="button" value="Convert to Fahrenheit -->" onClick="showt()">
<input type="text" name="fartw" size="15">
<input type="reset" name="ResetBtn" value="Reset">
</form>

<img src="file:///C|/Documents%20and%20Settings/TempCon/images/thermometer.JPG">

</div>

</BODY>
</HTML>
crh3675
01-25-2004, 11:03 AM
Instead of using a graphic, use a table cell with a set height and background color:

<table border="0" cellpadding="0" cellspacing="0" height="100">
<tr>
<td valign="bottom" rowspan="2">
Data
</td>
<td rowspan="2">&nbsp;</td>
<td height="15">
<!--Adjust this cell height to force bottom cell height //-->
</td>
</tr>
<tr>
<td bgcolor="#FF0099">&nbsp;&nbsp;</td>
</tr>
</table>

--Craig
dawkim
01-25-2004, 02:29 PM
Thanks for the tip. However, I am still a newbie at this and am not sure how to manipulate the table cell height according to the outcome to the conversion.
Ben Rogers
01-25-2004, 04:34 PM
you have to name the table+cell u want to manipulate, then do something like document.tblenme.cllnme.height=200... im not sure, im a n00b as well...
dawkim
01-25-2004, 08:09 PM
Ok, back to my first request, this project specifically requests a graphic. Here is my latest attempt. Can someone help me figure out how to make this work?

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

function show()
{
var far = document.degin.far.value
var deg = Math.round((far - 32) * 5/9)
document.degin.cel.value = deg
var tempC = deg

}

function showt()
{
var cels = document.itt.celt.value
var fin = Math.round((cels * 9/5)+32)
document.itt.fartw.value = fin
var tempF = document.itt.fartw.value

}
var currentImage = 0
var my_images = new Array(16)

my_images[0] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer.JPG"
my_images[1] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-0.JPG"
my_images[2] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-1.JPG"
my_images[3] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-2.JPG"
my_images[4] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-3.JPG"
my_images[5] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-4.JPG"
my_images[6] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-5.JPG"
my_images[7] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-6.JPG"
my_images[8] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-7.JPG"
my_images[9] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-8.JPG"
my_images[10] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-9.JPG"
my_images[11] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-10.JPG"
my_images[12] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-11.JPG"
my_images[13] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-12.JPG"
my_images[14] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-13.JPG"
my_images[15] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-14.JPG"
my_images[16] = "C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer-15.JPG"

function loadImage()
{
if (tempC > 0)
{
my_images[7]
} else {
currentImage = 0
}
document.images[0].src = my_images[currentImage]
}
// End -->
</script>
</HEAD>
<BODY>
<div align="center">
<h3><u>Fahrenheit to Celsius</u></h3>
<form name="degin">
Fahrenheit:
<input type="text" name="far" size="5">
<input type="button" value="Convert to Celsius -->" onClick="show();loadImage()">
<input type="text" name="cel" size="15">
<input type="reset" name="ResetBtn" value="Reset">
</form>
<form name="itt">
<h3><u>Celsius to Fahrenheit</u></h3>
Celsius:
<input type="text" name="celt" size="5">
<input type="button" value="Convert to Fahrenheit -->" onClick="showt()">
<input type="text" name="fartw" size="15">
<input type="reset" name="ResetBtn" value="Reset">
</form>

<p>&nbsp;</p>
<p><img src="file:///C|/Documents%20and%20Settings/SharonD/Desktop/TempCon/images/thermometer.JPG" width="148" height="337">
</p>

</div>
</BODY>
</HTML>
crh3675
01-25-2004, 09:15 PM
What is the maximum temperatures that you are going to accept. You will have to define a maximum in order to create the calculations.

Basically, you have your ratio:

Temp/Max = ImageNum/17

But your Max is not defined. And I assume that you are using a maximum of 17 images (don't forget that my_images[0] is your first image).

--Craig
dawkim
01-25-2004, 10:17 PM
The max will be 101. I have not created all of the images yet because I was just trying to figure out how to make it work.
crh3675
01-26-2004, 06:06 AM
Modify this code:

function loadImage()
{
if (tempC > 0)
{


} else {
currentImage = 0
}
document.images[0].src = my_images[currentImage]
}
crh3675
01-26-2004, 06:10 AM
Modify this code:

function loadImage()
{
if (tempC > 0)
{
var currentImage=parseInt((tempC*17)/101)-1; //Subtract one becaue our images start with "0"




} else {
currentImage = 0
}
document.images[0].src = my_images[currentImage]
}
dawkim
01-26-2004, 07:48 PM
Thanks for the input. However, it still doesn't work, although it appears to be moving in the right direction.
dawkim
02-08-2004, 05:29 PM
Figured it out. Thanks for the help all.:)