Jump to content

Archived

This topic is now archived and is closed to further replies.

Moron

Plug PHP data into an image?

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!

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
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.

Share this post


Link to post
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');
}

Share this post


Link to post
Share on other sites

×

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.