• 0

CSS Background Rotation Help


Question

Hopefully someone can lend me a hand on this, I am completely lost and not an expert on CSS and JavaScript or PHP

Here is my problem

I have a website where a background image is called in the CSS

HTML Code:

 <div class="water" align="left">

CSS Code

.water{
	background: url(images/water.png) no-repeat;
	border-bottom: 5px solid #ffffff;
	width: 698px;
	padding-left: 30px;
}

The client wants the background image to rotate every 5-10 seconds from a group of images. So I went ahead and created a group of images called water.png, water2.png, water3.png...water10.png

They are all stored in the images folder.

How would I go about using either PHP or javascrript to call those images and have it rotate them every few seconds. I have some scripts that work when the image is called within the HTML code but not within the CSS code.

Any help would be great, and if it is complicated I would be willing to paid someone to help me through this.

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

Thank you for the suggestion.

Not being an expert at all in javascript would something like that be tough to do for a non-programmer? Like I mentioned I would be more than happy to work with someone on this and would be happy to pay them or whatever.

Link to comment
Share on other sites

  • 0

Thank you for the suggestion.

Not being an expert at all in javascript would something like that be tough to do for a non-programmer? Like I mentioned I would be more than happy to work with someone on this and would be happy to pay them or whatever.

It is quite easy with javascript timer and onload. If you want a code/example, do not hesitate sending me a PM.

cheers.

Link to comment
Share on other sites

  • 0

Best way to do it, would be to create 5 classes, one for each background image, and do something similar to do:

var backgroundClasses = ["first", "second", "third", "fourth", "fifth"];
var duration = 5000;

var setBackground = function(classIndex) {
  var backgroundElement = $("#background");

  $.each(backgroundClasses, function(i, item) {
    backgroundElement.removeClass(item);
  });
  backgroundElement.addClass(backgroundClasses[index]);
};

var rotateBackground = function(classIndex) {
  if (classIndex >= backgroundClasses.length) {
    classIndex = 0;
  }

  setBackground(classIndex);
  setTimeout(function() {
    rotateBackground(classIndex + 1);
  }, duration);
};

$(function() {
  rotateBackground(0);
});

It requires the JQuery library, but its quite simple. Reference jQuery (you can download it from http://www.jquery.com), or reference it from a CDN (like Google's). Let me know if that helps.

Link to comment
Share on other sites

  • 0

Ok anyone mind checking this and see if I have this right? I took this from the suggestion that Cabron gave

EDIT: Will the code below does nothing...back to square 1 LOL. I don't know how you guys do all the coding

I pasted the following in my <head>

&lt;script type="text/javascript"&gt;
/* Script taken from http://www.leemessenger.co.uk - Please do not remove this line */
function ChangeCSSBgImg() {
if (!document.getElementById) return false;

var MyElement = "water" //The ID of the element you want to change
var ImgPath = "/images/water" //The file path to your images

if (!document.getElementById(MyElement)) return false;

var random_images = new Array ();
random_images[0] = "water.png";
random_images[1] = "water2.png"; // Don't forget to increase the array number each time
random_images[2] = "water3.png"; // Don't forget to increase the array number each time
random_images[3] = "water4.png"; // Don't forget to increase the array number each time
random_images[4] = "water5.png"; // Don't forget to increase the array number each time
random_images[5] = "water6.png"; // Don't forget to increase the array number each time
random_images[6] = "water7.png"; // Don't forget to increase the array number each time
random_images[7] = "water8.png"; // Don't forget to increase the array number each time
random_images[8] = "water09.png"; // Don't forget to increase the array number each time
random_images[9] = "water10.png"; // Don't forget to increase the array number each time
random_images[10] = "water11.png"; // Don't forget to increase the array number each time
random_images[11] = "water12.png"; // Don't forget to increase the array number each time

var $header = document.getElementById(MyElement);
var $backgroundurl = $header.style.backgroundImage;
var ImgURL = "url(" + ImgPath + random_images[rand(random_images.length)] + ")";

if ($backgroundurl != ImgURL) {
$header.style.backgroundImage = ImgURL;
}

movement = setTimeout("ChangeCSSBgImg()",5000);
}

/* random number generator */
function rand(n) {
return ( Math.floor ( Math.random ( ) * n ) );
}

/* Custom onload function */
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
/* trigger onload */
addLoadEvent(ChangeCSSBgImg);
&lt;/script&gt;

Link to comment
Share on other sites

  • 0

I've just PM'ed you ;-)

you can check a sample here : http://iroure.com/rotator/

and I can zip you the whole demo (quite easy and simple to use, to be true) so you can mess around with it.

Thank you Dogward - I think your pm will work great

Thank you all for the help and assistance...says a lot about the community here at Neowin.

Cheers!

Link to comment
Share on other sites

  • 0

Thank you Dogward - I think your pm will work great

Thank you all for the help and assistance...says a lot about the community here at Neowin.

Cheers!

Just PM'ed you the a link to the package. Do not hesitate contacting me/us for any trouble you may have using that.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.