954,585 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

Info on top of Image

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

designingamy
Junior Poster in Training
96 posts since Aug 2008
Reputation Points: 10
Solved Threads: 0
 

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 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.

Atli
Posting Pro
540 posts since May 2007
Reputation Points: 93
Solved Threads: 70
 

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

designingamy
Junior Poster in Training
96 posts since Aug 2008
Reputation Points: 10
Solved Threads: 0
 

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>
Atli
Posting Pro
540 posts since May 2007
Reputation Points: 93
Solved Threads: 70
 

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

designingamy
Junior Poster in Training
96 posts since Aug 2008
Reputation Points: 10
Solved Threads: 0
 

I'm glad I could help :)

Atli
Posting Pro
540 posts since May 2007
Reputation Points: 93
Solved Threads: 70
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You