change css elements using ajax or java?

[silent1643]

i know this can be done some how - i rather it be done with ajax -

is there anyway to change a site header by using buttons or a scroll menu that the user can select.

choose from pattern1, pattern2, pattern3 etc..

once changed that header is saved until the cookie is reloaded etc?

fyi: my site header uses css elements

[silent1643]

here is a good example
[codebelly.com...]

i want this effect but only change the header css element background image and not the whole document

[Ginger monkey]

Hi there,

I'm having the exact same problem. I'm looping through several images set as background images on a div. It works when applied to the body.background but not when I target a specific element. If I find a solution I will let you know. But if anyone else can help here's my code:

var speed = 1000
var Pic = new Array()
Pic[0] = "../images/home_content_hero.jpg";
Pic[1] = "../images/home_content_hero1.jpg";
Pic[2] = "../images/home_content_hero2.jpg";
Pic[3] = "../images/home_content_hero3.jpg";

var j = 0
var p = Pic.length

var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runBGSlideShow(){
if (!document.getElementById) return false;
var slideshow = document.getElementById("hero");
slideshow.style.backgroundImage = Pic[j];
j += 1
if (j > (p-1)) j=0
t = setTimeout('runBGSlideShow()', speed)
}

Thanks!

[penders]

- i rather it be done with ajax -

Do you really mean ajax? The process of changing elements on the page as a result of a user action is done using JavaScript - and this is all that is used in the example you post (although you shouldn't really post external links, see here [webmasterworld.com])

You would need 'AJAX' only if you needed to send/receive data back to the server before updating the page, via a server-side scripting language such as PHP/ASP etc. Is this what you require?

Otherwise, in order to change the class on your #header DIV, you *could* do something like:

HTML:

<div id="header"> 
The default header pattern goes here 
</div> 
<a href="javascript:void(0);" onclick="changeHeader('pattern1');return false;">Change Header</a>

JavaScript:

function changeHeader(newclass) { 
 document.getElementById('header').className = newclass; 
 // Perhaps save newclass in cookie and reassign in onload event 
 // of page. Search google: cookie functions 
}

CSS:

#header { 
width:600px; 
height:100px; 
border:1px solid #000; 
} 
.pattern1 { 
background:#666 url(/img/banner1.jpg) 0 0 no-repeat; 
}

(Not tested)

[silent1643]

this is as far as i got with searching the internet

<?php

$images = array(
'image1.jpg',
'image2.jpg',
'image3.jpg'
);

header('Content-Type: image/jpeg');
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');

readfile($images[array_rand($images)]);

?>

and i just plugged in image.php into my css background
background: #111 url('image.php') repeat-x 0 0;

the only thing is this just changes the bg of the page when its loaded. I want the user to be able to select a choice and then have that choice saved through out the site

ajax or javascript - doesn't matter as long as it works