Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

    Styling a popup box with image

    I suppose I can post this in the PHP forum. Since I use it with PHP.

    I want to be able to use a background image rather then just a color for a pop up box I use. Here is what I use. I copied it into a new file to show you. Click the text and it pops up.

    www.rodgame.org/popup.php

    and this is the coding I am using below.

    Code:
    echo "<a onmouseover='this.style.cursor=\"pointer\" ' onfocus='this.blur();' onclick=\"document.getElementById('PopUp2').style.display = 'block' \" ><h3><span>Fresh Fish</span></h3></a>
    	<div id='PopUp2' style='display: none; position: absolute; left: 330px; top: 150px; border: solid black 1px; padding: 10px; background-color: rgb(255,211,155); text-align: justify; font-size: 12px; width: 200px;'>
    	<a href=\"rewards.php?do=catfish\"><font color=blue>Catfish</font></a><br /><a href=\"rewards.php?do=bass\"><font color=blue>Largemouth Bass</font></a><br /><a href=\"rewards.php?do=pike\"><font color=blue>Northern Pike</font></a><br /><a href=\"rewards.php?do=walleye\"><font color=blue>Walleye</font></a><br /><a href=\"rewards.php?do=salmon\"><font color=blue>Salmon</font></a>
    	<br />
    	<div style='text-align: right;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('PopUp2').style.display = 'none' \" ><span style=\"text-decoration: underline;\"><font color=black>Close</font></span></a></div>
    	</div><br />"
    How can I get a background image in behind the text, and is it possible to shape the box in a unique way? like maybe something like this, but probably not quite so detailed?

    http://farm1.static.flickr.com/211/4...a9e6a4.jpg?v=0

  • #2
    God Emperor Fou-Lu's Avatar
    Join Date
    Sep 2002
    Location
    Saskatoon, Saskatchewan
    Posts
    16,980
    Thanks
    4
    Thanked 2,659 Times in 2,628 Posts
    This is a css issue, not a php one.
    In your style for the div you can add a background-image. CSS code for that is:
    Code:
    background: #FFD39B url('/path/to/your/image.jpg') no-repeat fixed center;
    As for box styling, you need to use embedded span/div tags and replace them with an appropriate background - much easier said than done but the CSS guys can tell you how to do it.


    Edit:
    Thank you for whomever moved this into the css forum
    Last edited by Fou-Lu; 07-10-2008 at 03:08 AM.
    PHP Code:
    header('HTTP/1.1 420 Enhance Your Calm'); 

  • Users who have thanked Fou-Lu for this post:

    masterofollies (07-10-2008)

  • #3
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Thank you Fou, but if I use background: wouldn't that make my whole page background turn into the image?

  • #4
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    I would like to use this image.


  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Try to replace highlighted:
    Code:
    echo "<a onmouseover='this.style.cursor=\"pointer\" ' onfocus='this.blur();' onclick=\"document.getElementById('PopUp2').style.display = 'block' \" ><h3><span>Fresh Fish</span></h3></a>
    	<div id='PopUp2' style='display: none; position: absolute; left: 330px; top: 150px; border: solid black 1px; padding: 10px; background-color: rgb(255,211,155); text-align: justify; font-size: 12px; width: 200px;'>
    	<a href=\"rewards.php?do=catfish\"><font color=blue>Catfish</font></a><br /><a href=\"rewards.php?do=bass\"><font color=blue>Largemouth Bass</font></a><br /><a href=\"rewards.php?do=pike\"><font color=blue>Northern Pike</font></a><br /><a href=\"rewards.php?do=walleye\"><font color=blue>Walleye</font></a><br /><a href=\"rewards.php?do=salmon\"><font color=blue>Salmon</font></a>
    	<br />
    	<div style='text-align: right;'><a onmouseover='this.style.cursor=\"pointer\" ' style='font-size: 12px;' onfocus='this.blur();' onclick=\"document.getElementById('PopUp2').style.display = 'none' \" ><span style=\"text-decoration: underline;\"><font color=black>Close</font></span></a></div>
    	</div><br />"
    with:
    Code:
    background:url(http://www.rodgame.org/images/popupbox.jpg);
    Hope that keeps you going.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    masterofollies (07-10-2008)

  • #6
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    That makes perfect sense. I will try it out in the morning and learn from it. Thanks

  • #7
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    One last question. I am trying to get the box to a certain width and height to match the image size since there probably isn't a "fit to image" code. So I used the following code and the height works but the width will not work.

    Code:
    width: 386px; height: 300px;


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •