please help rotate image banner

[X=?]

I would please like to know how I could get the banner to random a different image instead of just a single jpg.:confused:

this is what I have to work off

thanks!



a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #373B3F; text-decoration: underline; }
a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #373B3F; text-decoration: underline; }
a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #373B3F; text-decoration: underline; }
a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #395E70; text-decoration: none; }

td.plugin_3_3 a:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #B5BCC0; text-decoration: underline; }
td.plugin_3_3 a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #B5BCC0; text-decoration: underline; }
td.plugin_3_3 a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #B5BCC0; text-decoration: underline; }
td.plugin_3_3 a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; text-decoration: none; }

a.copyright:link { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #B5BCC0; font-stretch:expanded; text-decoration: none; }
a.copyright:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #B5BCC0; font-stretch:expanded; text-decoration: none; }
a.copyright:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #B5BCC0; font-stretch:expanded; text-decoration: none; }
a.copyright:hover { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; font-stretch:expanded; text-decoration: none; }

img { border: 0; }

.width_100
{ width: 100%; }


body, html {
margin: 0px;
padding: 0px;

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;

background-color: #2F3235;
background-image:url(images/ln_background_1.jpg);
background-repeat:repeat-x;
background-position:top;
text-align: center;
}

td, table
{ font-size: 11px; color: #373B3F; vertical-align: top; text-align:left; }

div
{ font-size: 11px; color: #373B3F; vertical-align: top; text-align:left; }

textarea, input
{ border: 1px #B4B1AD solid;
color:#373B3F;
padding: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
margin: 1px;
background-color: transparent;

overflow:hidden;
}

hr
{ height: 1px;
border: 0px;
color: #B4B1AD;
background-color: #B4B1AD;
}

.copyright
{
font-size: 11px;
color: #B5BCC0;
text-align: center;
}

.main_1
{ width: 782px; margin-left:auto; margin-right:auto; }

.main_2
{ width: 100%; background-color: #FFFFFF; background-image:url(images/ln_background_2.jpg); background-repeat:repeat-y; background-position: left; }

.main_3
{ background-image:url(images/ln_background_3.jpg); background-repeat:repeat-y; background-position: right; }

.main_4
{ width: 100%; background-color:#FFFFFF; background-image:url(images/ln_background_2.jpg); background-repeat:repeat-y; background-position: left; }

.main_5
{ width: 100%; background-image:url(images/ln_background_3.jpg); background-repeat:repeat-y; background-position: right; }

.main_6
{ width: 100%; background-image:url(images/ln_background_6.jpg); background-repeat:repeat-x; background-position: bottom; }

.main_7
{ width: 100%; background-image:url(images/ln_background_5.jpg); background-repeat:no-repeat; background-position: bottom right; }

.main_8
{ width: 100%; background-image:url(images/ln_background_4.jpg); background-repeat:no-repeat; background-position:bottom left; }

.main_9
{ width: 100%; background-image:url(images/ln_background_9.jpg); background-repeat:repeat-x; background-position: top; }

.main_10
{ width: 100%; background-image:url(images/ln_background_7.jpg); background-repeat:no-repeat; background-position: top right; }

.main_11
{ width: 100%; background-image:url(images/ln_background_8.jpg); background-repeat:no-repeat; background-position: top left; padding: 20px 0px 20px 0px; }

.main_12
{ width: 100%; padding: 0px 17px 0px 23px; }

.main_12_alt
{ width: 100%; padding: 0px 23px 0px 23px; }

.banner
{ width: 782px; height: 175px; background-image:url(images/topimage/rotate.jpg); background-repeat:no-repeat; background-position: top; }

.spacer
{ width: 100%; height: 7px; }

.icon
{ vertical-align: top; padding-right: 15px; }

.logo
{ width: 100%; height: 2px; vertical-align:middle; text-align:right; padding: 0px 17px 0px 17px; }

.navigation_1
{ width: 100%; background-image:url(images/ln_navigation_1.jpg); background-repeat:repeat-x; background-position: top; }

.navigation_2
{ width: 100%; height: 34px; background-image:url(images/ln_navigation_2.jpg); background-repeat:no-repeat; background-position: top right; }

.navigation_3
{ width: 100%; height: 34px; background-image:url(images/ln_navigation_3.jpg); background-repeat:no-repeat; background-position: top left; }

.navigation_4
{ width: 90%; height: 34px; padding-left: 15px; padding-right: 15px; }

.navigation_5
{ width: 10%; height: 34px; vertical-align:middle; text-align:center; white-space:nowrap; }

.footer_1
{ width: 100%; background-color: #2E3234; background-image:url(images/ln_footer_1.jpg); background-repeat:repeat-y; background-position: right; border-bottom: 1px solid #202224; }

.footer_2
{ width: 100%; background-image:url(images/ln_footer_2.jpg); background-repeat:repeat-y; background-position: left; text-align:center; vertical-align:middle; padding: 10px 0px 10px 0px; }

.plugin_1_1
{ padding-bottom: 10px; }

.plugin_1_2
{ vertical-align:middle; font-family:Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #395E70; padding: 4px 12px 4px 12px; }

.plugin_1_3
{ background-image:url(images/ln_plugin_1_1.jpg); background-repeat:repeat-x; background-position: top; }

.plugin_1_4
{ background-image:url(images/ln_plugin_1_1.jpg); background-repeat:repeat-x; background-position: bottom; padding: 1px 0px 1px 0px; }

.plugin_1_5
{ border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; background-color: #F1F7F9; text-align:justify; padding: 8px 12px 8px 12px; }

.plugin_2_1
{ width: 250px; background-image:url(images/ln_plugin_2_1.jpg); background-repeat:repeat-y; background-position: left; padding-left: 17px; }

.plugin_2_2
{ width: 233px; }

.plugin_2_3
{ padding-bottom: 15px; }

.plugin_2_4
{ background-color: #535659; background-image:url(images/ln_plugin_2_2.jpg); background-repeat:repeat-y; background-position:right; }

.plugin_2_5
{ background-image: url(images/ln_plugin_2_3.jpg); background-repeat:no-repeat; background-position: top left; }

.plugin_2_6
{ background-image:url(images/ln_plugin_2_4.jpg); background-repeat:no-repeat; background-position: bottom left; vertical-align:middle; font-family:Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #FFFFFF; padding: 4px 12px 4px 12px; }

.plugin_2_7
{ background-color: #F1F7F9; background-image:url(images/ln_plugin_2_5.jpg); background-repeat:repeat-y; background-position: right; }

.plugin_2_8
{ background-image:url(images/ln_plugin_2_6.jpg); background-repeat:no-repeat; background-position: top left; }

.plugin_2_9
{ background-image:url(images/ln_plugin_2_7.jpg); background-repeat:no-repeat; background-position: bottom left; text-align:justify; padding: 10px 18px 10px 12px; }

.plugin_3_1
{ width: 100%; background-color: #25282A; border-top: 1px solid #1C1D1D; border-bottom: 1px solid #3E3F3F; background-image:url(images/ln_plugin_3_1.jpg); background-repeat:repeat-y; background-position: right; }

.plugin_3_2
{ width: 100%; background-image:url(images/ln_plugin_3_2.jpg); background-repeat:repeat-y; background-position: left; }

.plugin_3_3
{ width: 100%; padding: 15px 7px 15px 7px; }

.plugin_3_4_l
{ width: 33%; background-image:url(images/ln_plugin_3_3.jpg); background-repeat:repeat-y; background-position: right; }

.plugin_3_4_c
{ width: 34%; }

.plugin_3_4_r
{ width: 33%; background-image:url(images/ln_plugin_3_3.jpg); background-repeat:repeat-y; background-position: left; }

.plugin_3_5
{ padding: 5px 25px 5px 25px; }

.plugin_3_6
{ font-family:Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; color: #8EBA41; padding: 0px 0px 4px 0px; }

.plugin_3_7
{ color: #B5BCC0; text-align:justify; }

div.plugin_3_7 *
{ color: #B5BCC0; }

[mburt]

This will require JavaScript, or Flash (ActionScript). CSS alone can't do this. There are plenty of threads on this forum about this, try searching.

[X=?]

This will require JavaScript, or Flash (ActionScript). CSS alone can't do this. There are plenty of threads on this forum about this, try searching.

thanks for the reply
I did do a seach but did not know what to look for!?
I will try to seach java.
the other question is do just insert the script here?


.banner
{ width: 782px; height: 175px; background-image:url(images/topimage/rotate.jpg); background-repeat:no-repeat; background-position: top; }

[mburt]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Image Rotator</title>
<script type="text/javascript">
var images = ["image1.gif","image2.gif","image3.gif","image4.gif"];
var random = {
number: function() {return Math.floor(Math.random()*images.length);},
setimage: function(element) {
var obj = document.getElementById(element);
while (obj.firstChild) obj.removeChild(obj.firstChild);
var el = document.createElement("IMG");
el.setAttribute("src",images[random.number()]);
el.setAttribute("alt",images[random.number()]);
obj.appendChild(el)
}
}
window.onload = function() {
random.setimage("imagecontainer");
}
</script>
</head>
<body>
<div id="imagecontainer"></div>
</body>
</html>

[X=?]

thanks for the code
i'm tring to make a site very similar to this one:eek:

http://www.ironmaiden.com/

as they have the ramdom images!@

[mburt]

Yeah.. the script I posted does in fact work, but you may get a series of results that have some sort of relation (eg. 3,3,3 ; 1,2,3,3,2,1)

[X=?]

Yeah.. the script I posted does in fact work, but you may get a series of results that have some sort of relation (eg. 3,3,3 ; 1,2,3,3,2,1)

oh wont mind that at all..! I'm just tring to figure out where I would insert your code in with my above css? :cool:

[mburt]

You wouldn't insert the code in your CSS. That is called "JavaScript" :) Try to rewrite your entire page based on what I gave you. I could help you if you provided a link to the page in question.

[X=?]

You wouldn't insert the code in your CSS. That is called "JavaScript" :) Try to rewrite your entire page based on what I gave you. I could help you if you provided a link to the page in question.

www.uponmaiden.com

btw thanks for being very helpful!

[X=?]

Sorry!
This is all guess work for me seems that somehow I could replace the

.banner
{ width: 782px; height: 175px; background-image:url(.jpg_address); background-repeat:no-repeat; background-position: top; }
with one that show has a ramdom image address???


clueless:eek:

[mburt]

This cannot be done is CSS alone. You may have to find an alternative.

[sideshowtodd]

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Image Rotator</title>
<script type="text/javascript">....


thank you, this has helped me as well. Is there a modification that will allow the randomized image to be "repeat-x" across the top of the screen transparently as a background image and allow me to place a company logo over the left corner?

for example: www.webclark.com

[jaye]

Here's some that are completely straighforward and easy and you can also put them anywhere like you need content rotators (http://www.mooonbaby.com/scripts/absoluterotators.html/)