Jump to content

Plug PHP data into an image?


Moron

Recommended Posts

Here's your trivia question for the day! I'm designing a system where an employee can authenticate and pull up a graphical representation of their latest pay stub. I scanned a stub as a .JPG image, set it as the table background image, then went to town plugging data in table containers in the appropriate places.

My question is..... can PHP results be plugged into an image map of some sort? I used a style sheet to make the background image resize to whatever resolution the user is running, but the data only lines up properly at my resolution (800x600). At 1024x768, it's offset. So is there a way to directly stick the database items in a particular spot on the image -OR- can anyone suggest an alternate solution?

Thanks!
Link to comment
Share on other sites

[quote author=markbett link=topic=108221.msg435108#msg435108 date=1158349073]
heres a solution...

css


use css and make <div>'s and put the correct data into the div and then using absolute positioning float the divs into the right location on top of the background image...

css is very versitle this way

see csszengarden.com for more info on CSS styling

[/quote]

Didn't work. The absolute positioning works, but what looks perfect at 800x600 is way offset at 1024x768.

Link to comment
Share on other sites

[quote author=AndyB link=topic=108221.msg436612#msg436612 date=1158597469]
Fix the width of the div that shows the background image. Let the rest of the page do whatever it does at whatever resolution it likes, it will have no effect on a div that's a [b]defined[/b] size.
[/quote]

[code]
<div style="position:absolute; z-index:-10">

<CENTER><table width="100%" border="0" cellpadding="0" cellspacing="0">
<div style="position:absolute; z-index:-10">
<img src="http://orserva/images/paystub/paystubblank.jpg" width="100%">
</div>

<!---; z-index:-10--->

<tr >
<td align=center valign=bottom>
<BR><br><br><br><br><BR><BR>

<!---Table for top entry--->


<table  width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align=left valign=bottom>

<td align=left valign=bottom width="8%">

<font size="3" color="#000000" face="courier">&nbsp&nbsp&nbsp;<span style="position: absolute; top:+138; left:35;" class="fixed"><?php
echo $RESULT['PAYCTR'];
?></font></span>
</td>
<td align=left valign=bottom width="8%">
<font size="3" color="#000000" face="courier">&nbsp&nbsp;<?php
echo $RESULT['EMPNO'];
?></font>
</td>
<td align=left valign=bottom width="35%">
<font size="3" color="#000000" face="courier">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;<?php
echo $RESULT['NAMEF'];
?>

<?php
echo $RESULT['NAMEMI'];
?>


<?php
echo $RESULT['NAMEL'];
?></font>
</td>
<td align=left valign=bottom width="11%">
<font size="3" color="#000000" face="courier">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp;1 </font>
</td>
<td align=left valign=bottom width="10%">
<font size="3" color="#000000" face="courier">&nbsp&nbsp&nbsp;<?php
echo $RESULT['EPEDAT'];
?></font>
</td>

<td align=center valign=bottom width="11%">
<font size="3" color="#000000" face="courier">&nbsp&nbsp&nbsp;00000</font>
</td>
</tr>

</table>

<br>
<br>


<!---Second table--->


<table  width="100%" border="1" cellspacing="0" cellpadding="0">
<tr align=left valign=bottom>
<td align=left valign=bottom width="8%">
<font size="3" color="#000000" face="courier">&nbsp&nbsp&nbsp;<?php
echo $RESULT['ECRUD'];
?></font>
<td align=left valign=bottom width="8%">
<font size="3" color="#000000" face="courier">Cal. YTD</font>
</td>
</td>
</tr>
</table></div>[/code]

So what am I doing wrong? I'm making the image the same size at any resolution, I'm using absolute positioning and absolute font size on the Pay Center, yet at 1024x768, the Pay center displays several lines above where it should be. I also tried relative positioning. Same result.
Link to comment
Share on other sites

Assuming you have an image that's 800px wide ...

Fix the width of the div it's displayed in to 800px and set the [i]background[/i] of that div using CSS.  Position the numbers relative to the top left corner of the same div.

<div id="paystub"> .... </div>

CSS:
#paystub {
width:800px;
background: url('path/to/your/image');
}
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.