Change of images on user wish

JavaScript
1

Hello All,

I am using below function to change the background colour on user’s wish. Now i want to give them access to put a picture on background. there would be some default images and an option so that they can upload there photo too? But i dont know how to achieve it. Please help.

<html>
<head>
</head>
 <body>
  <script language="JavaScript">
   function colors(col) {
   switch(col)
   { case 'red': document.bgColor="red"; break;
    case 'green': document.bgColor="green"; break;
	case 'blue': document.bgColor="blue"; break; }
	 }
     </script>
      <form name=”form1” method=”post” action=””>
      <p> <label> <input type="radio" name=”Colors” value=”radio” onClick="colors('red')"> Red</label> <br> <label> <input type="radio" name=”Colors” value=”radio” onClick="colors('green')"> Green</label> <br> <label> <input type="radio" name=”Colors” value=”radio” onClick="colors('blue')"> Blue</label> <br> </p> </form>
2

i implemented the above code yesterday and today when i checked it, i found that the change is till the time user is logged in. As soon as he logs out, backgroundresets it to default colur. Now i have to questions;

  1. How can i save this to user’s setting.
    2 how to implement the system for photos too?

thanks
Karan

3

If it were me I’d add some custom fields to their profile data so the data is stored, one field for a colour and another for an image. You could use a Jquery colour picker to allow them to select a colour, and for the image perhaps a set of radio buttons with thumbnails.

When they now login it’s just a case of loading their preferences as a global setting.

Of course that will work fine when they are logged in, but when they logout it will revert to your default.

4

i have added a new table called background to store the colour. Below is my script. But the problem is when i choose the colour option, it gets applies and on pressing submit, page got refreshed and neither anything stores in database nor the changed color is shown on page.

<?php
if(isset($_POST['submit']))
{ $db_conx = mysqli_connect("localhost","root","sultan","sultan");
 $colours=$_POST['colour'];
 $sql = "UPDATE background SET colour='$colours', WHERE username= 'shail' LIMIT 1";
            $query = mysqli_query($db_conx, $sql);
			if($query===TRUE)
			{
      alert( "Settings applied");
  		    exit();
			}
	
}
	



?>

<!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=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form method="post">
<input name="colour" type="radio" onClick="colors('red')" />Red<br />
<input name="colour" type="radio" onClick="colors('green')" />Green<br />
<input name="colour" type="radio" onClick="colors('blue')"/>Blue<br />

<input type="submit" value="submit" name="submit">
</form>
<script language="JavaScript">
   function colors(col) { 
   switch(col) 
   { case 'red': document.body.style.color="red"; break;
    case 'green': document.body.style.color="blue"; break;
	case 'blue': document.body.style.color="green"; break; }
	 } 
     </script>


</form>
</body>
</html>
5

I have solved 50% of my problem. here is the remaining part:
my below code allows me to store a image in database but not displaying the image on webpage. Can anyone please help me in finding the error on this.

<?php
	$conx=mysqli_connect('localhost','root','sultan','colour');
	$sql = "SELECT theme from  colors WHERE username='shail' ";
	$sqli=mysqli_query($conx,$sql);
	$row=mysqli_fetch_row($sqli);
	$theme=$row[0];


if(isset($_POST['submit']))
{
	$theme=$_POST['theme'];
	$sql = "UPDATE colors SET theme='$theme' WHERE username='shail' ";
	$sqli=mysqli_query($conx,$sql);
	
	}

?>
<!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=utf-8" />
<title>Untitled Document</title>
<style>
body{ background-image:url(<?php echo $theme  ?>) ;}

</style>
</head>

<body>
<form method="post">
Input your picture<input type="file" name="theme" /><br />
<input type="submit" value="upload" name="submit" />

</form>
</body>
</html>