Jump to content

Change Background Image With Css


Metop
 Share

Recommended Posts

Hi,Im not an expert in the use of css, but i needed to do something for a friend. That was to change the background image dynamically, and i found how to do it with javascript, but i dont want to use some javascript, so i found this code a little bit weird, but working:

<a onClick="document.body.background='image.jpg'">textOrImage</a><a onClick="document.body.background='image2.jpg'">textOrImage2</a>

I know its not OK, so i want to know if i can do it only using CSS and DOM (Not javascript please)Tanks.

Link to comment
Share on other sites

That's a very interesting question...The only easy fix that comes to mind is to have two different html files (file1.html and file2.html) that are equivalent in every way except their name and their background image and where the link to change the background image looks like <a href="file2.html">Another approach would be to use a php file (file.php) that accepts an argument (via get) indicating the background. The PHP files executes a script on the server and generates the corresponding html file specifying the desired background (without any scripts being executed by the client browser).floater

Link to comment
Share on other sites

Hi,Im not an expert in the use of css, but i needed to do something for a friend. That was to change the background image dynamically, and i found how to do it with javascript, but i dont want to use some javascript, so i found this code a little bit weird, but working:
<a onClick="[b]document.body.background='image.jpg'[/b]">textOrImage</a><a onClick="[b]document.body.background='image2.jpg[/b]'">textOrImage2</a>

I know its not OK, so i want to know if i can do it only using CSS and DOM (Not javascript please)Tanks.

which is still javascript (disable javascript and try to change background) + DOM running on a onclick event? There is PHP DOM, but runs on PHP5 only I think (maybe later versions of PHP4)
Link to comment
Share on other sites

simple php background image changer<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><?php $bgarray = array ();$bgarray[0]="uhome.png";$bgarray[1]="ahome.png";if (isset($_REQUEST['bgimage'])){$bgref = $_REQUEST['bgimage'];print <<<END<style type="text/css">body {background:url($bgarray[$bgref]);}a {color:#fff; text-decoration:none;}</style>END;}?></head><body><a href="thispage.php?bgimage=0">textOrImage1</a><a href="thispage.php?bgimage=1">textOrImage2</a></body></html>you probably need a cookie for other pages to read and make the background image to your current selection.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...