Div - Switcher, And Random [Archive]

Swaydo

08-12-2008, 09:08 PM

Hey,

I'm currently working on a layout which allows the users to change the picture in the Logo, And also change the colour theme of the layout

So in my header i have two Divs ( example )

<Div Id="Banner1">
<Div Id="Text">
</Div>
</Div>

Now in each stylesheet ( changed by styleswitcher )

Banner1 Will have the same values.

But in text, the Background will be a different image depending on the color.

So with the text sorted, so it changes when the user wants.

I need the banner to be changeable

I want links like

Banner 1
Banner 2

so when the user clicks banner2 banner1 will change to banner2.

So i need a script that can change a certain divs name.

so on demand <Div Id="Banner1"> changes to <Div Id="Banner2">

Which will change the background image.

Now your probably thinking why dont i just make it a picture and change it.

Because i need it a background so i can stick the text over it.

So basically i just need a script that changes banner1 to banner2

But so that both divs comply to the stylesheet on the main page.

Also i need a way onload that the Banner div will randomly become either banner1, banner2, banner3 Etc.

Thanks in advance, if you need more explaning, or you can't work out what im trying to so, just say i'll help.

Alex.

rangana

08-13-2008, 12:23 AM

Here's a basic example to keep you going:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{margin:0px;padding:0px;}
#wrap{width:700px;padding:10px;margin:20px auto;border:3px double #777;
font-family:arial,serif,helvetica;
font-size:10pt;
}
#banner1{background:#9c0;height:50px;line-height:30px;text-align:center;}
#banner2{background:#930;height:50px;line-height:30px;text-align:center;color:#eee;}
#banner3{background:#eee;height:50px;line-height:30px;text-align:center;color:#222;}
</style>
<script type="text/javascript">
window.onload=function(){
var banner=['banner1','banner2','banner3'], // Set all of the banner in this array
rand=Math.floor(Math.random()*banner.length),
targ=document.getElementById('wrap').getElementsByTagName('div')[0];
targ.setAttribute('id',banner[rand]); // This is to randomly assign an id to our div
targ.onclick=function(){ var i=targ.id.split('banner')[1];
if(i==3) this.setAttribute('id','banner1');
else this.setAttribute('id','banner'+(Number(i)+1));
}
}
</script>
</head>
<body>
<div id="wrap">
<div id="banner1">
This is the text inside the banner.
</div>
</div>
</body>
</html>