...

View Full Version : Help required - More than one simultaneous image change on page refresh...



WaxMechaniK
06-14-2010, 11:46 PM
Hi all!

My first post here, searched around for a good website to get some assistance and chose CodingForums.com! I'm a graphic designer, and trying my best at web design too although it's not my profession so I'm still beginner level in a sense I guess.

Anyway, my dilemma at the moment is that I have produced a site where the client would like the logo colour/image to change on refresh which I have achieved by scouring the net for codes and altering them. Now, the client wants the shapes behind the sub-headings to match the current logo colour/image on refresh as well. This would mean if the logo changed to the blue logo, I'd need all the sub-headings to be blue, and vice versa for another 3 colours.

I'm struggling to understand how I can achieve this. At the moment, I have a javascript inside the code of the index page allowing logo image change on refresh but need the sub-headings to change in sync too.

Can anyone help me out here?

Any help is greatly appreciated.

Thanks all!

WxMx

Old Pedant
06-15-2010, 12:42 AM
Probably the easiest way to do this would be to use CSS.

For example:

<style type="text/css">
div.BLUE {
background-image: url(images/bluepicture.png);
color: blue;
background-color: lightblue;
... etc. ...
}
div.RED {
background-image: url(images/redpicture.png);
color: red;
background-color: pink;
... etc. ...
}
div.GREEN {
background-image: url(images/greenpicture.png);
color: green;
background-color: lightgreen;
... etc. ...
}
</style>

<script type="text/javascript">
var themes = [ "BLUE", "RED", "GREEN" ];
var theme = themes[ Math.floor( Math.random() * themes.length ) ];
</script>

...
</head>
<body>
<script type="text/javascript">
document.write( '<div class="' + theme + '">');
</script>
... contents ...
</div>
</body>
</html>


Note that you could alternatively use body.BLUE, etc., and apply the theme to the entire body.

I assume you are familiar with CSS, so I'm sure you are aware you could have


div.BLUE { ... }
div.BLUE h2 { ... }
div.BLUE ul { ... ]

and so on, so that the choice of class for the outer <div> controls the styles for all the various element types inside the <div>.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum