Info on top of Image

[designingamy]

I really need someone to point me in the right direction. I am building a page where a person can choose what border they want to go around their business information. Once they choose it, the image goes in the database, as well as their info. I'm okay on figuring that out. But what I'm stumped on is how to get the info out of the database ON TOP OF the border image? I'm thinking it has to be simple, but I can't seem to figure it out.

Any takers?
Thanks in advance :)
~Amy

[Atli]

Hi.

Is the image itself (the data) inside the database, or just a link to where it is stored on the file-system?

If it is the first one, you have to fetch the image by itself and output it as an image by setting the headers.

That is generally done by creating a separate script that fetches and outputs the image, which is then called by <img> tags, just like an image.

For example:

<?php
/**
 * File: list.php
 */
$sql = "SELECT id, name FROM myTbl";
$result = mysql_query($sql);

echo '<table>';
while($row = mysql_fetch_assoc($result)) {
  echo '<tr>';
  echo '  <td>{$row['name']}</td>';
  echo '  <td><img src="img.php?id=', $row['id'], '" alt="" /></td>';
  echo '</tr>';
}
echo '</table>';

<?php
/**
 * File: img.php
 */
($id = @$_GET['id']) or $id = null;

if(!$id or !is_numeric($id) or $id <= 0) {
  die("ID is invalid");
}

$sql = "SELECT imageData, imageMime FROM myTbl WHERE id = {$id}";
$result = mysql_query($sql);

if(mysql_num_rows($result) > 0) {
  $row = mysql_fetch_assoc($result);
  
  header("content-type: {$row['imageMime']}");
  header("content-length: ", strlen($row['imageData']));
  echo $row['imageData'];
}
else {
  echo "Image doesn't exist";
}
?>

Executing list.php would then give you a table of names and images.

[designingamy]

Thank you for your response.

The image is in a separate place and I know how to pull the image out as well as the info out of the database. But what I'm asking is can I take the info out and put it on top of the image? The image is just a frame box and I want the info to be inside of that box.

What are your thoughts?
~Amy

[Atli]

Ok.

So this is more of a HTML/CSS question?
You have the image, and the text, and you just need to position the text on top of the image?

You could simply set the image as a background for whichever element the text is in.
Like:

<div style="width: 550px; height: 400px; padding: 0;
            background-image: url(/path/to/image.jpg);">
    Insert text here.
</div>

Or you could position them absolutely on top of each other:

<!-- In the header -->
<style type="text/css">
#TheImage, #TheText {
    position: absolute;
    z-index: -1; /* Put it "deeper" into the page */
    width: 550px;
    height: 400px;
    top: 50px;
    left: 100px;
}
#TheText {
    z-index: 1; /* Put it in front of the image */
}
</style>

<!-- Not in the header -->
<img id="TheImage" src="/path/to/image.jpg" alt="The Image" />
<div id="TheText">Insert text here</div>

[designingamy]

Yes, you're right :) Thank you so much for your help :)

[Atli]

I'm glad I could help :)