Board index   FAQ   Search  
Register  Login
Board index php forum :: php coding PHP coding => General

How can I put PHP text over an image?

Ask about general coding issues or problems here.

Moderators: macek, egami, gesf

How can I put PHP text over an image?

Postby maxmax622 » Mon Oct 15, 2012 9:43 am

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.
maxmax622
New php-forum User
New php-forum User
 
Posts: 2
Joined: Mon Oct 15, 2012 9:32 am

Re: How can I put PHP text over an image?

Postby seandisanti » Mon Oct 15, 2012 11:20 am

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.
seandisanti
php-forum Fan User
php-forum Fan User
 
Posts: 838
Joined: Mon Oct 01, 2012 12:32 pm

Re: How can I put PHP text over an image?

Postby maxmax622 » Mon Oct 15, 2012 11:47 am

seandisanti wrote: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!
maxmax622
New php-forum User
New php-forum User
 
Posts: 2
Joined: Mon Oct 15, 2012 9:32 am

Re: How can I put PHP text over an image?

Postby seandisanti » Mon Oct 15, 2012 1:43 pm

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.
seandisanti
php-forum Fan User
php-forum Fan User
 
Posts: 838
Joined: Mon Oct 01, 2012 12:32 pm


Return to PHP coding => General

Who is online

Users browsing this forum: Google [Bot] and 2 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.