Question:

Is it possible to make a drop down menu that changes the page background and a button link?

by | earlier

0 LIKES Like UnLike

I won't care if it's in CSS, javascript, or anything else; I just want to know if it is possible.

Tags:

Report

Answer The Question I've Same Question Too

Follow Question

3 ANSWERS

Sort By: Date | Rating

Yes, it's called a theme switcher. If your using a platform like typepad, joomla, wordpress, etc. there are plugins you can get to do that. If your hard coding it, http://hotscripts.com is a good place to start to find codes for it.
Report (0) (0) | earlier
Yes, it is possible. Here is an updated version that also handles the changing of the background image and the changing of the link location of the link specified. Be sure to remove all unnencessary spacing that I was required to input to keep Yahoo from truncating the code automatically

<html>

<head>

<script type="text/javascript">

function changeBGColor(color)

{

//Code to change background color

var colorArray =new Array();

colorArray[0]="#0000FF";

colorArray[1]="#FFFF00";

colorArray[2]="#00FF00";

document.bgColor = colorArray[color];

//code to change button

if (color == "0")

{

document.getElementById

('changeButton').value = "Bacground is blue";

}

else if (color == "1")

{

document.getElementById

('changeButton').value = "Background is yellow";

}

else if (color == "2")

{

document.getElementById

('changeButton').value = "Background is pastel green";

}

}

function changeImage(image)

{

//Code to change image

var imageArray =new Array();

imageArray[0]="imageName.ext";

imageArray[1]="imageName.ext";

imageArray[2]="imageName.ext";

document.body.style.backgroundImage =

"url(" + imageArray[image] + ")";

//code to change the link location (href

//attribute) of the "Go" button

document.getElementById("link").href = "secondPageLink.htm";

}

</script>

</head>

<body>

<form id="testForm" name="testForm">

<select onclick=

"changeBGColor(this.value)" name="testSelectBox" id="testSelectBox" >

<option value="0">Blue</option>

<option value="1">Yellow</option>

<option value="2">Pastel Green</option>

</select>

<select onclick=

"changeImage(this.value)" name="testSelectBoxImage" id="testSelectBox" >

<option selected value="">Change Image</option>

<option value="0">Image 1</option>

<option value="1">Image 2</option>

<option value="2">Image 3</option>

</select>

<input id="changeButton" type="button" value="change Me!" />

<a id="link" href="firstPageLink.htm">Go</a>

</form>

</body>

</html>

The code was tested and worked in FireFox 1 and IE 7.

NOTE:

Because Yahoo truncated the code, I had to put parts of it on separate lines in order to show you all of it.

You MUST remove the spacing between "getElementById" and

" ('changeB..." in order for the code to work as expected. The spacing appears in the JS 3 times.

Also,

You MUST remove the spacing between "onclick=" and

" changeBGColor..."

Please also remove the same type of spacings in the other JS function.

Hope this helps.
Report (0) (0) | earlier
Yes, it is possible

<form>Change the background color:

<select name="backGround" size="1" onChange=docume

nt.bgColor=backGround.options [backGround.selectedIndex].value)>

<option value="000000">[Black]

<option value="FFFFFF" selected>[White]

<option value="A6BEFF">[Light Blue]

That Enter in teh middle of document, removie it, I had to put it there so it would fit.

<option value="7CFF7D">[Light Green]

<option value="FBFF73">[Light Yellow]

<option value="DDDDDD">[Light Gray]

<option value="D5CCBB">[Tan]

<option value="FFCC99">[Orange]

<option value="FFCCCC">[Peach]

<option value="FF8C8A">[Mauve]

<option value="AE08EF">[Violet]

<option value="0206FF">[Blue]

<option value="05EF00">[Green]

<option value="EFE800">[Yellow]

<option value="FF0400">[Red]

<option value="444444">[Gray]

<option value="0D09A3">[Dark Blue]

<option value="044302">[Dark Green]

<option value="231800">[Brown]

<option value="730200">[Dark Red]

</select>

</form>
Report (0) (0) | earlier