dynamic image determined by field value [Archive]

View Full Version : dynamic image determined by field value

wamsoftware52

01-08-2008, 05:26 AM

Any help would be great... hopefully I phrase what I'm trying to do so it makes sense...
Basically I have a webpage that displays variable readings in text box fiels, I want the ability to display different images next to each text box based on what the value is.
For example is the text box value (that is automatically populated by an OPC program) = 1 then I want to see 1.jpg next to it.
If the same field = 2, then I want to see 2.jpg next to it. Even a range of numbers - maybe if the value is between 1 - 5 then show low.jpg.

I will have multiple auto populated text fields on this page, therefor I'll need multiple variable (dynamic) images to be placed.
To give a little more background; this page will give my customers readings of internal fluid levels on a piece of machinery on their property (via an OPC communication from their machine to my server). If a certain fluid is low I want to show a red "X" logo next to it, or a yellow warning sign.
If a different level is low I want to show a big red Stop sign next to it.
If a third level is good then I want a smiley face to the side of that reading.

Hopefully this all made sense and maybe somebody can even help me out.
Thanks so much!!

codeexploiter

01-08-2008, 09:14 AM

Check the following code. I hope you are looking for something like this.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function init(){
var inputs = document.getElementById('fields').getElementsByTagName('input');
var imgs = document.getElementById('fields').getElementsByTagName('img');

for(var i = 0;i < inputs.length; i++){
var rnd = Math.ceil((Math.random() % 1) * inputs.length);
inputs[i].value = rnd;
imgs[i].src = rnd +".gif";
}
}
window.onload = init;
</script>
</head>
<body>
<div id="maincontent">
<form name="form1">
<div id="fields">
<span><input type="text" name="fld1" id="fld1" value="" /></span><span><img src="" border="0" alt="" /></span>
<span><input type="text" name="fld2" id="fld2" value="" /></span><span><img src="" border="0" alt="" /></span>
<span><input type="text" name="fld3" id="fld3" value="" /></span><span><img src="" border="0" alt="" /></span>
<span><input type="text" name="fld4" id="fld4" value="" /></span><span><img src="" border="0" alt="" /></span>
</div>
</form>
</div>
</body>
</html>

Please find the images used in the above code as the attachment. I hope you'll be able to get how you can change the 'src' attribute of the images using JavaScript from the above mentioned code.

Edit: Place the image files in the same location of the HTML page.

Please use the tags only for short codes.

wamsoftware52

01-13-2008, 07:25 PM

That is deffinetely the right idea, thanks! I'm trying to impliment it now but I think I'm being confused by the part of the script that populates the fileds with a random value. Could you by chance show me what your same code would like like just to work with fields that I have already being populated?
By the way, a useful sample for me would be just five input fields each with an image next to it.
Thanks much!