How do I overlay text on an image who's size is to be set?
- by Mike
I am trying to make a bar chart using tables, which I have almost accomplished to my liking. The last step I want is text over my image which represents the bar. Here is the code I have thus far for building my little bar charts:
$height = 50;
//build length
$width = 450;
$multi = $brewAvg / 5;
$width = $width * $multi;
print " <tr > <td > $count. <a href=\"$breweryURL\"> $brewR</a> </td> <td > <img src=\"blueBar.png\" width=\"$width\" height=\"$height\"> </td> </tr> ";
And this produces something like this:
You can see in the code how I simply calculate the length of the bar based on a breweries rating. What I want to do next is have the rating number show on top of each breweries on the left hand side. How would I go about accomplishing this?
Update:
I tried a tutorial I read here:
http://www.kavoir.com/2009/02/css-text-over-image.html
and I changed my code to this:
print "<div class=\"overlay\"> ";
print " <tr valign=\"middle\" > <td > $count. <a href=\"$breweryURL\"> $brewR</a> </td> <td > <img src=\"blueBar.png\" width=\"$width\" height=\"$height\"> </td> </tr> ";
print"
<div class=\"text\">
<p> $brewAvg </p>
</div>
</div>
";
And my css I added was this:
<style>
.overlay {
position:relative;
float:left; /* optional */
}
.overlay .text {
position:absolute;
top:10px; /* in conjunction with left property, decides the text position */
left:10px;
width:300px; /* optional, though better have one */
}
</style>
And it did put any of the value son top of my images. All the text is in a list above all the bars like this:
