Linking to the random image script in CSS

Discussion in 'CSS' started by amacfx, Jan 17, 2010.

0
  1. #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>
    Code (markup):
    The code for the script to activate is nice and simple, like so.......

    <script type="text/javascript" language="JavaScript"><!--
printImage();
//--></script>
    Code (markup):
    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}
    Code (markup):
    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 ?
     
    amacfx, Jan 17, 2010 IP
  2. krsix

    krsix Peon

    Messages:
    435
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2 
    <script type="text/javascript">
imagestorotate = 5;
fpath = '/images/testran';
ftype = '.png';
var r = Math.ceil(Math.random() * imagestorotate);
document.write('<style type="text\/css">div#body{background:url('+fpath+r+ftype+') left top no-repeat;}<\/style>');
</script>
    Code (markup):
     
    krsix, Jan 17, 2010 IP
  3. amacfx

    amacfx Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Holy crap, that worked !

    Just wanted to say a big thank you. I posted this query on a number
    of forums and got loads of "you can't do it" "it'll never work" replies
    or hugely complex solutions I couldn't wrap my head around.

    With a somewhat sceptical face, I changed to your code and it worked
    like a charm.

    Now I just need to sit down and work out why it worked. :)

    Once again, many thanks for helping a newbie.

    Al.
     
    amacfx, Jan 22, 2010 IP
  4. krsix

    krsix Peon

    Messages:
    435
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #4
    No problem.

    As for why it worked. document.write just spits out another style line saying to set the background to +fpath+r+ftype+.

    fpath would be the image path, r would be a number, and type would be the filetype, so: /images/testran+1-5+.png.


    The "preferred" way would probably be to use PHP or something to reference as an image directly, as Javascript support isn't 100% on every single platform.
     
    krsix, Jan 22, 2010 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Basically, javascript affects HTML, not your CSS sheet.

    The best you can do to affect the CSS is to add inline styles, which is what the above script does. Inline styles normally suck giant balls but it's mostly the way to do it.

    Though... there's another way you could have done it, but I don't think it would be less code, but more:
    have a bunch of classes pre-written in the CSS like
    .class1 {
    background: url(theimage.png) 0 0 no-repeat;
    }
    .class2 {
    background: url(theimage2.png) 0 0 no-repeat;
    }
    .class3 {
    background: url(theimage3.png) 0 0 no-repeat;
    }

    for your 5 images.

    Then the Javascript could randomly change the class on the div/element/whatever (cause again, js only affects the HTML).

    When <div> becomes <div class="class1"> then it shows background for class1, etc.

    However adding and removing classes is more code than what krsix posted above. Though, if the whole page were larger and more complicated, it could maybe be a more robust way... the classes could control anything, not just background images.
     
    Stomme poes, Jan 23, 2010 IP
  6. krsix

    krsix Peon

    Messages:
    435
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Yeah, for me, the easiest would be to just make a PHP script pick out the random image and include it, then url('test.php') in CSS
     
    krsix, Jan 23, 2010 IP