How can I put PHP text over an image?

[maxmax622]

Hi,
I'm starting to learn PHP and HTML. For my project, I want to display the user's external IP adress in a "notepad" image (just like that: http://i.imgur.com/1pYGc.png).

Does anyone know how to display PHP text over an image?

Forgot to mention that I already have the PHP code to display the external IP adress. I'm just not able to put it on the image. Right now, it just shows on the left.

Thanks.

[seandisanti]

The easiest way i think would be with styles. make a container div that has the image and the text, and then use

Code: Select all

style="position:absolute;left:10px;top:10px;z-order:2;"

or something like it on your span/div with the text to have it appear on top of the image in the location specified by the top and left coordinates you provide.

[maxmax622]

The easiest way i think would be with styles. make a container div that has the image and the text, and then use

Code: Select all

style="position:absolute;left:10px;top:10px;z-order:2;"

or something like it on your span/div with the text to have it appear on top of the image in the location specified by the top and left coordinates you provide.

I'm sorry but like I said, I just started using PHP. I don't know what is a "Container Div" and a "span/div".

Could you explain it to me if it's not that complicated or point me to good documentation on this?

Thank you!

[seandisanti]

No problem, they're actually HTML elements that are used to group or separate other HTML elements. The big difference between the two, is that a DIV will stretch the width of the page unless explicitly told otherwise, and a span will be as narrow as possible (based on the width of the contents) unless otherwise specified. Here is an example from a page I had to make recently (the page is at http://simplecomputerrepair.com/pmp.html ). The company has started doing Iphone customizations and wanted a little web tool to give the customers an idea of what they can do. I used JQuery and a series of images stacked on top of each other to create the effect of a customizable iphone. The code i'm showing here is just for example, and won't work on its own, but the full source is available at the url listed above.

Code: Select all

                  <div id="ipContainer">
                     <div id="phoneFront">
                        <img id="frontPlate" src="images/cutup/FrontPlate.png" />
                        <img id="homeButton" src="images/cutup/homeButton.png" />
                        <img id="screen" src="images/cutup/Screen.png" />
                        <img id="frontBezel" src="images/cutup/FrontBezel.png" />
                     </div>
                     <div id="phoneBack">
                        <img id="backPlate" src="images/cutup/BackPlate.png" />
                        <img id="backBezel" src="images/cutup/BackBezel.png" />
                     </div>
                     <div id="phoneSide">
                        <img id="bsb" src="images/cutup/BackBezelSideView.png" />
                        <img id="mf" src="images/cutup/MidFrame.png" />
                        <img id="fsb" src="images/cutup/FrontBezelSideView.png" />            
                     </div>
                     <div id="theform">
                        <form>
                           <h6>Select color for face and back plates</h6><br />
                              <select id="plates">
                                 <option value="white">White</option>
                                 <option value="red">Red</option>
                                 <option value="blue">Blue</option>
                                 <option value="darkblue">Dark Blue</option>
                                 <option value="lightblue">Light Blue</option>
                                 <option value="purple">Purple</option>
                                 <option value="pink">Pink</option>
                                 <option value="orange">Orange</option>
                                 <option value="yellow">Yellow</option>
                                 <option value="green">Green</option>
                              </select><br /><br />
                           <h6>Select color for front bezel(trim)</h6><br />
                              <select id="fb">
                                 <option value="white">White</option>
                                 <option value="red">Red</option>
                                 <option value="blue">Blue</option>
                                 <option value="darkblue">Dark Blue</option>
                                 <option value="lightblue">Light Blue</option>
                                 <option value="purple">Purple</option>
                                 <option value="pink">Pink</option>
                                 <option value="orange">Orange</option>
                                 <option value="yellow">Yellow</option>
                                 <option value="green">Green</option>
                              </select><br /><br />
                           <h6>Select color for back bezel(trim)</h6><br />
                              <select id="bb">
                                 <option value="white">White</option>
                                 <option value="red">Red</option>
                                 <option value="blue">Blue</option>
                                 <option value="darkblue">Dark Blue</option>
                                 <option value="lightblue">Light Blue</option>
                                 <option value="purple">Purple</option>
                                 <option value="pink">Pink</option>
                                 <option value="orange">Orange</option>
                                 <option value="yellow">Yellow</option>
                                 <option value="green">Green</option>
                              </select><br /><br />
                           <h6>Select color for home button</h6><br />
                              <select id="hb">
                                 <option value="white">White</option>
                                 <option value="red">Red</option>
                                 <option value="blue">Blue</option>
                                 <option value="darkblue">Dark Blue</option>
                                 <option value="lightblue">Light Blue</option>
                                 <option value="purple">Purple</option>
                                 <option value="pink">Pink</option>
                                 <option value="orange">Orange</option>
                                 <option value="yellow">Yellow</option>
                                 <option value="green">Green</option>
                              </select>
                        </form>
                     </div>
                  </div>

In this case, i gave the div's id's that i then applied styles to in <style></style> tags, but you can do the styling inline on the div tags also to keep it together. Basically the <div> and <span> tags create logical containers for the other elements. you can nest them inside of one another, style them with css, etc etc. w3schools.com has good tutorials on css and html that can get you completely up to speed over the course of an hour or so.