To do such your going to need to store the current background image somewhere, for simplicity I've chosen a text file. Below I've constructed a 4-step guide to making a PHP background image switcher that stores it's current image data in a text file named current_bgimage.txt. Currently this script has 3 images (image001.jpg, image002.jpg, image003.jpg) that can be set as the background, you can adjust and add images by editing the Background Imager Changer form
Step 1.
Save the following php code as changebgimage.php
PHP Code:
<?php
if(isset($_POST['submit'])) {
$new_bgimage = $_POST['bgimage'];
//set this to filename of current background image data
$filename = "current_bgimage.txt";
if (!$handle = fopen($filename, 'w')) {
echo 'Cannot modify Background!';
exit;
}
if (fwrite($handle, $new_bgimage) === FALSE) {
echo 'Cannot modify Background!';
exit;
}
header("Location: ".$_SERVER['HTTP_REFERER']);
fclose($handle);
} else
echo "Sorry, no post variables detected\n";
?>
Step 2.
Use the following as a template. It's broken into 3 parts,
PHP Requisition of the current Background Image
PHP Code:
<?php
//set this to filename of current background image data
$filename = "current_bgimage.txt";
$handle = fopen($filename, "r");
$current_bgimage = fread($handle, filesize($filename));
fclose($handle);
?>
The adoption of style (we're focusing on the background-image: url(<?php echo $current_bgimage ?>) part )
HTML Code:
<html>
<head>
<style type="text/css">
body {background-image: url(<?php echo $current_bgimage ?>);}
</style>
</head>
<body>
And finally, the Background Imager Changer form
HTML Code:
<!-- Add the following form to anywhere you would like the ability to change the background image -->
<!-- Please Note: You must update the action path if you add this form to a file in a different directory -->
<form method="post" action="changebgimage.php">
<select name="bgimage">
<option name="image001.jpg" value="image001.jpg">Change Background Image to: image001.jpg</option>
<option name="image002.jpg" value="image002.jpg">Change Background Image to: Image002.jpg</option>
<option name="image003.jpg" value="image003.jpg">Change Background Image to: Image003.jpg</option>
</select>
<input type="submit" name="submit" value="Change Background Image">
</form>
Or alltogether:
Code:
<?php
//set this to filename of current background image data
$filename = "current_bgimage.txt";
$handle = fopen($filename, "r");
$current_bgimage = fread($handle, filesize($filename));
fclose($handle);
?>
<html>
<head>
<style type="text/css">
body {background-image: url(<?php echo $current_bgimage ?>);}
</style>
</head>
<body>
<!-- Background Imager Changer form -->
<!-- Add the following form to anywhere you would like the ability to change the background image -->
<!-- Please Note: You must update the action path if you add this form to a file in a different directory -->
<form method="post" action="changebgimage.php">
<select name="bgimage">
<option value="image001.jpg">Change Background Image to: image001.jpg</option>
<option value="image002.jpg">Change Background Image to: Image002.jpg</option>
<option value="image003.jpg">Change Background Image to: Image003.jpg</option>
</select>
<input type="submit" name="submit" value="Change Background Image">
</form>
<!-- / Background Image Changer form -->
<p>Continue Html...</p>
</body>
</html>
Save the above code as test.php
Step 3.
Create a text file named current_bgimage.txt and add the name of your default/current background image:Step 4.
Upload the 3 above files along with the background images to your server and open test.php up in your browser. The current background image should be the one you specified above in current_bgimage.txt. Now select a different background image via the Background Imager Changer form and click the Change Background Image button. If you setup my script successfully you should be redirected back to test.php and be presented with a new background image.
but I REALY need to know a way to have someone lets say click a button to change a background, and then when anyone loads that page the new background is what is displayed.
Reply With Quote
Bookmarks