Hi,
I'm trying to work out how I can change my back ground image when the user clicks the home link - or refreshes the page... I'd love my background image to change from the current static background image... is this HTML or JAVA ??
Can anyone advise ?
Thanks
Miguel
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ENDURANCE SPORTSCAR.NET - LE MANS 24 HEURES</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
auto: true,
continuous: true
});
});
// ]]>
</script>
<style type="text/css">
#slider { margin:0 42px; padding:0; list-style:none; }
#slider ul,
#slider li { margin:0; padding:0; list-style:none; }
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
#slider li { width:800px; height:261px; overflow:hidden; margin:0 auto; padding:0; }
p#controls { margin:0; position:relative; }
#prevBtn,
#nextBtn { display:block; margin:0; overflow:hidden; width:31px; height:28px; position:absolute; left:759px; top:-60px; }
#nextBtn { left:790px; }
#prevBtn a { display:block; width:31px; height:28px; background:url(images/l_arrow.jpg) no-repeat 0 0; }
#nextBtn a { display:block; width:31px; height:28px; background:url(images/r_arrow.jpg) no-repeat 0 0; }
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
<link rel="icon" href="http://www.endurancesportscar.net/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.endurancesportscar.net/favicon.ico" type="image/x-icon" />
<style type="text/css">
<!--
body {
background-image: url(images/endurance_bg01.jpg);
background-repeat: no-repeat;
}
-->
</style></head>
<body>Short answer: use JavaScript (client-side), not Java. Because the page already loads jQuery and a slider, the cleanest patterns are (A) pick/rotate a background on page load, or (B) set a flag when the Home link is clicked so the next page load applies a different image. Both avoid ugly flashes and work across page navigations.
Example — rotate/cycle background on every load (round‑robin, persisted in localStorage):
// rotate on load
(function(){
var imgs = ['images/bg01.jpg','images/bg02.jpg','images/bg03.jpg'];
var idx = parseInt(localStorage.getItem('bgIndex') || '-1', 10);
idx = (idx + 1) % imgs.length;
localStorage.setItem('bgIndex', idx);
var url = imgs[idx];
var img = new Image();
img.onload = function(){ document.body.style.backgroundImage = 'url('+url+')'; };
img.src = url;
})();Example — change background when a Home link is clicked (store choice, apply on next load):
// on click (set next background before navigation)
$('a.home').on('click', function(){
localStorage.setItem('nextBg', 'images/home-bg.jpg');
});
// on page load (apply and remove flag)
$(function(){
var next = localStorage.getItem('nextBg');
if(next){
(new Image()).src = next;
document.body.style.backgroundImage = 'url('+next+')';
localStorage.removeItem('nextBg');
}
});Troubleshooting and best practices: preload images (new Image()) to avoid flicker, compress/resize backgrounds for performance, and use background-size: cover; for responsive fit. Beware browser caching—if an image filename doesn’t change, use a version query string for cache busting. Inline style set by JS will override stylesheet rules unless !important is used in CSS; if maintainability matters, toggle body classes instead of writing inline styles. If the background should change with the slider, hook these routines into the slider’s callback so the image and slide stay in sync. For full-page/randomization on the server (no-JS fallback), implement the rotation server-side (PHP/ASP) so every refresh serves a different CSS class or inline style.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.