Inserting script link to CSS

HTML & CSS
1

Hi Folks,

I’m hoping somebody can help me out here.

I’d like my index page to have a random background image underneath
my text, log in boxes etc.

So, I’ve got a working script inserted into the HTML header like so…

<!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>
{%PageMetadataMacro%}
[COLOR="Red"]<script type="text/javascript" language="JavaScript">
NumberOfImagesToRotate = 5;

// Specify the first and last part of the image tag.

FirstPart = '<img src="/images/testran';
LastPart = '.png" height="486" width="983">';

function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->
</script>[/COLOR]
{%PageMetadataMacro%}
</head>

<body>

<div class="holder" id="header">
	<div class="content">
		{%HeaderMacro%}
		{%SiteSloganMacro%}
		{%SwitchLocaleMacro%}
		{%LoginMacro%}
	</div>
</div>

<div class="holder" id="main">
	<div class="content">
	
		<div id="body">

			<div class="column" id="left">{%QuickSearchMacro%}</div>
			
			<div class="column" id="right"><h1><strong>{%ONLINE_MEMBERS_COUNT%}</strong><span class="status online">online</span><br />users</h1></div>
		</div>
		
{%MembersNewMacro%}

	</div>
</div>

<div class="holder" id="footer">
	<div class="content">
		{%FooterMacro%} 
{%PageTrackingCodeMacro%}
	</div>
</div>

</body>

</html>

The code for the script to activate is nice and simple, like so…

<script type="text/javascript" language="JavaScript"><!--
printImage();
//--></script>

Which is all well and good, and will work if I put the actual script link
in the body section of the html. However, I want the images to be my background rather than just inserting them into the page between stuff.

At the moment the background is controlled via the relevant bit of CSS, which is currently written up as :

div#body {width:983px; background:url(/images/testran1.png)left top no-repeat; height:486px}
	div#body div.column {display:block;}
	div#body div#left.column {float:left; width:340px}
	div#body div#right.column {float:right; width:225px; padding-right:20px; padding-top:15px}

So where the default background is /images/testran1.png above,
I’d like to change it so it references the script so it will load random images.

I’ve tried a few things and I’m not getting much luck.

Any help ?

2

Usually that type of thing is done with a server-side script like PHP because the page would load before the CSS. If it’s just simple writing a text string with a random value then instead of HTML you possibly could put it in a CSS style block syntax instead of tag. It could also be done using the DOM. I think there a better ways to do it though.

3

This looks like ASP actually…

But to answer youir question, <img>s are being inserted by thes elines

FirstPart = '<img src="/images/testran';
LastPart = '.png" height="486" width="983">';

You will want to head over to the javascript forum to actually figure out how to make them background images.

It’s something like
var element=document.getElementByTagName(‘body’);
element.style.background="url(something.jpg);

It’s been a few years since I have dabbled in JS so head on over there :).

4

Hi,

As mentioned above a PHP script would be best for this and there are many about that would suit.

If you don’t have access serverside the you could do something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
div#body {
    width:983px;
    background:url(images/screen2col1.gif) no-repeat  0 0;
    height:486px
}
</style>
<script type="text/javascript"> 
<!-- 
function swap() {
if (document.getElementById) {
        //list your image and path names here
        rndimg = new Array("images/screen2col1.gif", "images/screen2col2.gif", "images/screen2col3.gif", "images/screen2col4.gif", "images/screen2col5.gif", "images/screen2col6.gif", "images/pmoblogoa.jpg"); 
            var numimages = rndimg.length-1;
            var x=(Math.floor(Math.random()*numimages));
            randomimage=(rndimg[x]);
            document.getElementById("body").style.backgroundImage = "url("+ randomimage +")"; 
    }
}
// addLoadEvent 
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(swap);



//--> 
</script>
</head>
<body>
<div id="body"></div>
</body>
</html>

That’s very basic and there’s probably much better ways to do this:)