CSS Forum

**leebert45** · 06-15-2010, 10:08 AM

I am working on a person website, and want the person viewing to click on an image, which will then direct them to my main sight. Based upon which image they have chosen, I want the site to load a specific css file.

My initial image has a blue gem, yellow cheese, and green grass. Thus if they click the gem, then next page they go to would load the "blue.css" file. If they pick the cheese, it would load "yellow.css" and grass would load "green.css". I would probably have a default load if they bypass the welcome page.

My question is, am I going to need to do this with Javascript? Or can this be done just with xhtml or html? Thank you for your help with this matter.

Leebert45

**Phunk Rabbit** · 06-15-2010, 10:21 AM

PHP would be a good option.

You could put differnet GET requests on the links, for example:

HTML Code:

<a href="homepage.php?theme=blue">Blue Gem</a>
<a href="homepage.php?theme=yellow">Yellow Cheese</a>
<a href="homepage.php?theme=green">Green Grass</a>
<a href="homepage.php?theme=default">Skip</a>

Them on homepage.php you would get the theme from the url and load the stylesheet from there, for example:

PHP Code:


			
<?php
$stylesheet = $_GET['theme'];

if($stylesheet !== 'blue' || $stylesheet !== 'yellow' || $stylesheet !== 'green' || $stylesheet !== 'default')
{
     $stylesheet = 'default';
}

$stylesheet = '<link rel="stylesheet" type="text/css" href="/css/' . $stylsheet . '.css" />';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Welcome to your site</title>
<?php
echo $stylesheet;
?>
</head>
<body>
....... etc

**leebert45** · 06-15-2010, 02:31 PM

Thank you. Your sample is perfect... or rather would be perfect if my server I have my site on supported PHP. I know... what server doesn't support PHP now a days? Apparently mine. Thank you though.

**Phunk Rabbit** · 06-16-2010, 04:31 AM

You could replicate this in JS, I just dont know it well enough to comfortably type up an example for you, however there is a JS framework around that replicates many PHP functions, php.js or somthing.

Hope you find your solution.