Changing page style using onclick

**kday** · 03-05-2013, 01:59 AM

Hi. Really frustrated witht this. I am extremely intermediate with javascript. I'm trying to create a function that changes the text color, hyperlink color, and an image by selecting a link. So far, i have only been able to get the images to change. Here is the code.

<html>
<head>
<title>Castaway Vacations, LLC</title>
<script type="text/javascript">
/* <![CDATA[ */
function changeStyle(mood){
if(mood == "rom")
document.images[1].src="rom_main.jpg";
document.bgColor="#EBC79E";
document.body.link="#F2473F";
document.body.vlink="#FCDC3B";
document.body.text="#EE2C2C";

if(mood == "adv")
document.images[1].src="adv_main.jpg";
document.bgColor="#CDAB2D";
document.body.link="#8B5F65";
document.body.vlink="#FCDC3B";
document.body.text="#5D478B";

if(mood == "rel")
document.images[1].src="rel_main.jpg";
document.bgColor="#EEEEE0";
document.body.link="#8B5F65";
document.body.vlink="#FCDC3B";
document.body.text="#BCED91";

if(mood == "fam")
document.images[1].src="fam_main.jpg";
document.bgColor="#63B8FF";
document.body.link="#F0FFF0";
document.body.vlink="#FCDC3B";
document.body.text="#BCED91";

}
var formWindow;
function request(linkTarget){
formWindow = window.open(linkTarget, "formFill", "toolbar=no,menubar=no,location=no,scrollbars=no,resizable=yes,width=350,height=400");
}
/* ]]> */
</script>
</head>

<body leftmargin=0 rightmargin=0 bgcolor=#ffcc99 text=#993300 link=#993300 vlink=#996633>
 
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=95% align=right bgcolor=#ffffff><img src="castaway_logo.jpg"> Vacations, LLC</td>
<td bgcolor=#ffffff> </td>
</tr>
</table>
 
<center>
<table width=600>
<tr>
<td width=300 valign=top>
Select Mood... 

<a href="#" onclick="changeStyle('rom')">Romantic</a> 
<a href="#" onclick="changeStyle('adv')">Adventure</a> 
<a href="#" onclick="changeStyle('rel')">Relaxation</a> 
<a href="#" onclick="changeStyle('fam')">Family</a> 
<a href="#" onclick="request('form.html');return false">Request A Brochure...</a>

</td>
<td align=center><img src="orig_main.jpg"> Your Vacation Awaits!
</tr>
</center>
</body>
</html>

**WyCnet** · 03-05-2013, 03:54 AM

I do believe that you have to change the CSS, to obtain changes for hyperlinks. There may be examples given in older discussions, so try a search. Personally I gave not gotten around to inplementing anything like it.

**Caelum** · 03-05-2013, 08:41 AM

Try something like:

Code:

var links = document.getElementsByTagName("a");

links.style.color = "#000";

And a good reference - www.w3schools.com/js/js_htmldom_css.asp

Thread: Changing page style using onclick

Thread Tools

Display

Changing page style using onclick

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions