coothead
02-07-2006, 07:49 AM
Hi there folks,
here is a novel way of doing onload random images, it's very smooth as only one image is used. :loopy:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>smooth way of doing random image</title>
<base href="http://mysite.orange.co.uk/coothead/"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background-color:#eee;
color:#000;
}
#logo {
width:360px;
height:280px;
background-image:url(six.jpg);
background-repeat:no-repeat;
border:4px solid #000;
margin:50px auto;
}
.logo0 {
background-position:0 0;
}
.logo1 {
background-position:-360px 0;
}
.logo2 {
background-position:-720px 0;
}
.logo3 {
background-position:-1080px 0;
}
.logo4 {
background-position:-1440px 0;
}
.logo5 {
background-position:-1800px 0;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
onload=function() {
var num=Math.floor(Math.random()*6);
document.getElementById('logo').className='logo'+num;
}
//]]>
</script>
</head>
<body>
<div id="logo" class="logo0"></div>
</body>
</html>
View the image used here...
http://mysite.orange.co.uk/coothead/six.jpg
here is a novel way of doing onload random images, it's very smooth as only one image is used. :loopy:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>smooth way of doing random image</title>
<base href="http://mysite.orange.co.uk/coothead/"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background-color:#eee;
color:#000;
}
#logo {
width:360px;
height:280px;
background-image:url(six.jpg);
background-repeat:no-repeat;
border:4px solid #000;
margin:50px auto;
}
.logo0 {
background-position:0 0;
}
.logo1 {
background-position:-360px 0;
}
.logo2 {
background-position:-720px 0;
}
.logo3 {
background-position:-1080px 0;
}
.logo4 {
background-position:-1440px 0;
}
.logo5 {
background-position:-1800px 0;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
onload=function() {
var num=Math.floor(Math.random()*6);
document.getElementById('logo').className='logo'+num;
}
//]]>
</script>
</head>
<body>
<div id="logo" class="logo0"></div>
</body>
</html>
View the image used here...
http://mysite.orange.co.uk/coothead/six.jpg