Jump to content


Photo

Plug PHP data into an image?


  • Please log in to reply
5 replies to this topic

#1 Moron

Moron
  • Members
  • PipPipPip
  • Advanced Member
  • 368 posts

Posted 15 September 2006 - 07:17 PM

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!


#2 markbett

markbett
  • Members
  • PipPipPip
  • Advanced Member
  • 133 posts

Posted 15 September 2006 - 07:37 PM

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


#3 Moron

Moron
  • Members
  • PipPipPip
  • Advanced Member
  • 368 posts

Posted 18 September 2006 - 04:31 PM

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


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



#4 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 18 September 2006 - 04:37 PM

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 defined size.
Legend has it that reading the manual never killed anyone.
My site

#5 Moron

Moron
  • Members
  • PipPipPip
  • Advanced Member
  • 368 posts

Posted 18 September 2006 - 05:09 PM

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


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

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.


#6 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 18 September 2006 - 05:20 PM

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

Fix the width of the div it's displayed in to 800px and set the background 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');
}
Legend has it that reading the manual never killed anyone.
My site




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users