Jump to content

Change background and other images depending on what radio button is checked


scoobybrew

Recommended Posts

You really should end your thread with a question saying exactly what you want.

 

Luckily I can understand what you're after from your thread title. So, you will want to use javascript most probably. That will allow for a dynamic change of the background (without a page refresh). Otherwise you're going to have to submit the form (that is around the TWO radio buttons), and then do the appropriate things in php, which could mean loading a different CSS sheet, as if you have a fancy background, that could mean text colours might need to change etc.

 

For the javascript option, you will add an onClick event to each radio button, with a link to a function that will change the background.

 

In PHP, you will just check the posted variables and see which was selected using a simple if statement, and do appropriate actions for each option.

 

Denno

Link to comment
Share on other sites

Because the OP stated that the radio button options are on the login page I will assume that the user will be required to submit the value and AJAX is not needed. Just make sure the radio button options are included in the same form that is submitted for login.

 

There are several different approaches you can take on the actual implementation. You could dynamically set the background color within the style properties by either writng the value into the page's style properties or within an external style sheet that is a PHP file. Or, you can have two different style sheets (one called fancy.css and the other called fast.css. I would go with the latter aproach. You could change up much more than just the background between the two styles if you wish.

 

Anyway, when the user submits the login page you can take the submitted value and save it to a session variable (or cookie). Then on each page load get the session value and include the line for the css file. Something like this

<link type="text/css" rel="stylesheet" href="style/<?php echo $_SESSION['stylesheet']; ?>.css" />

Link to comment
Share on other sites

Put this at the top of every page (or better) put into an include file that is included in all pages. This assumes the radio button group is names "style_sheet".

session_start();
if(isset($_POST['style_sheet']))
{
    $_SESSION['style_sheet'] = $_POST['style_sheet'];
}

 

Then, just use the line of code I posted previously wherever you want to include the style sheet.

Link to comment
Share on other sites

Ok, it doesn't work. What have you don't to determine why it doesn't work? What debugging have you performed and what were the results? Did you at least look at the HTML source code to see what was being generated?

 

Here is a sample page to illustrate the process:

<?php

session_start();
//Determine if the user selected a style
if(isset($_POST['style_sheet']))
{
    $_SESSION['style_sheet'] = $_POST['style_sheet'];
}
if(isset($_SESSION['style_sheet']))
{
    $style = "The selected stylesheet is {$_SESSION['style_sheet']}.css";
}
else
{
    $style = "A style has not been selected.";
}

?>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="style/<?php echo $_SESSION['stylesheet']; ?>.css" />
</head>
<body>
  <div><?php echo $style; ?></div>
  <form action="" method="post">
    Select a style: 
    <select name="style_sheet">
      <option value="fancy">fancy</option>
      <option value="fast">fast</option>
    </select>
    <br >
    <button type="submit">Go</button>
  </form>
</body>
</html>

Link to comment
Share on other sites

Check the rendered HTML code and validate that there is a validly formatted LINK tag to specify the style sheet. If that tag is there (and properly formatted) then I would guess that either the href path in that tag is incorrect or the linked style sheet does not have the proper code to change the BG image.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.