Loading certain images

Forum Moderators: coopster

Message Too Old, No Replies

Loading certain images

depending on database info

Able Net Design

5:00 am on Dec 5, 2003 (gmt 0)

i have a field in my mySQL data base called jobstatus. I want to be able to display this graphically using certain images eg. if the jobstatus is 50% i want to be able to load 50%.gif etc for 25%, 75%, 100%.

NickCoons

5:18 am on Dec 5, 2003 (gmt 0)

Usually in this case, I would store the percentage value between 0 and 100, and then use that as the width of the image.

For instance, I'd create an image that is 100 pixels wide. And then the HTML width parameter would be equal to this number. So if the job was 50% complete, then it would show the image 50 pixels wide.

bedlam

7:22 am on Dec 5, 2003 (gmt 0)

That's right. What lots of sites do is create a 3d style 'bar' graphic (e.g. with a gradient positioned so there's a white highlight along the length of the bar). Then they slice 1 or 2 or 10 or 20 pixels out of that and resize it lengthwise as needed.

Since the appearance of the graphic only varies from top to bottom (an not from left to right) the graphic can be resized from left to right with no distortion...

...in a late-night brainwave, it occurs to me that you can do this without graphics too...


[b]html:[/b]
<div class="bar-graph">
 <div class="red" style="width:150px;" title="150 units">150</div>
 <div class="blue" style="width:412px;" title="412 units">412</div>
 <div class="green" style="width:35px;" title="35 units">35</div>
</div>


[b]css:[/b]
.bar-graph {
text-align:right;
color:#FFFFFF;
font-weight:bold;
font-size:12px;
line-height:20px;
height:20px;
}
.bar-graph div {
border-style:outset;
border-color:#000033;
border-width:3px;
padding:2px;
margin:5px 0;
}
.green {
background-color:green;
}
.red {
background-color:red;
}
.blue {
background-color:blue;
}

Works great, and dead easy to populate the <div> tags with the appropriate info at runtime.

-B

PS - for the sake of completeness, I should mention there's a neato graph library for php: search for "jpgraph"

[edited by: jatar_k at 2:38 am (utc) on Dec. 10, 2003]
[edit reason] turned of smiles [/edit]

httpwebwitch

1:31 am on Dec 10, 2003 (gmt 0)

The methods above are good, and they will produce some nice looking graphs. But they didn't really answer your question, did they?

If you have 101 images representing values from 0 to 100 (let's say they're named "image_0.gif", "image_1.gif"...), and a value $x, you can load the appropriate image just like this:


<html>
<img src="image_<?php print($x)?>.gif">
</html>

If you're just making a bar graph, then by all means do what they suggest above. But if you have some kind of funky morphed image and you want to display an image that's 43% horse and 57% penguin, then this will work.

panic

1:37 am on Dec 10, 2003 (gmt 0)

If you have 101 images representing values from 0 to 100 (let's say they're named "image_0.gif", "image_1.gif"...), and a value $x, you can load the appropriate image just like this:

That's all good and well if you want to make 101 different images by hand, but if you don't have the time nor patience, it's NOT fun nor productive.

httpwebwitch

1:37 am on Dec 10, 2003 (gmt 0)

I forgot to mention...

please do not put % signs in your file names. It might not cause any problems if you're lucky, but it's generally a bad practice to do so.