...

View Full Version : Styling a popup box with image



masterofollies
07-10-2008, 01:00 AM
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.


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/472874944_b454a9e6a4.jpg?v=0

Fou-Lu
07-10-2008, 01:27 AM
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:


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.



Thank you for whomever moved this into the css forum :)

masterofollies
07-10-2008, 03:34 AM
Thank you Fou, but if I use background: wouldn't that make my whole page background turn into the image?

masterofollies
07-10-2008, 03:57 AM
I would like to use this image.

http://www.rodgame.org/images/popupbox.jpg

rangana
07-10-2008, 04:09 AM
Try to replace highlighted:


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:


background:url(http://www.rodgame.org/images/popupbox.jpg);


Hope that keeps you going.

masterofollies
07-10-2008, 05:25 AM
That makes perfect sense. I will try it out in the morning and learn from it. Thanks

masterofollies
07-10-2008, 02:39 PM
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.


width: 386px; height: 300px;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum