Metop Posted August 20, 2009 Share Posted August 20, 2009 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 More sharing options...
victorlonmo@gmail.com Posted August 20, 2009 Share Posted August 20, 2009 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 More sharing options...
dsonesuk Posted August 21, 2009 Share Posted August 21, 2009 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 More sharing options...
jamesdewes Posted August 21, 2009 Share Posted August 21, 2009 how about using the onhover or onclick pseudoclass in CSS? Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2009 Share Posted August 21, 2009 :hover would only affect the current related element, and maybe is container , there is no onclick pseudo class :hover, :active, :link, :focus, :visited if you are thinking of active, and focus, they are not totally supported by all browsers. Link to comment Share on other sites More sharing options...
Metop Posted August 21, 2009 Author Share Posted August 21, 2009 Thanks for your answers,As dsonesuk said, onclick its still javascript. I tried also with :active and :target pseudo classes, they are nice but limited, so Im working on the Php solution.Thanks again. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2009 Share Posted August 21, 2009 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. Link to comment Share on other sites More sharing options...
Metop Posted August 24, 2009 Author Share Posted August 24, 2009 Thanks a lot Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.