View Full Version : Rotate background image of a div
12-11-2006, 03:59 PM
Hello, I have current div and the background image background.jpg.
background: url(images/backdrop.jpg) no-repeat white;
border-left: solid 1px #808080;
border-right: solid 1px #808080;
border-top: solid 1px #808080;
I have created different background.jpg images and would like to display them randomly. I have two ideas:
1- Load a random image with every page load.
2- Change the image every x seconds while displaying the page.
How can I do this?
12-11-2006, 06:37 PM
That is beyond what CSS can do...you'll need java for that. Have a look at a google search. (http://www.google.com/search?q=random+background+image&rls=com.microsoft:*&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1)
12-11-2006, 06:43 PM
12-11-2006, 07:30 PM
Yeah I know, and I always get them flopped. I'm dyslexic.
12-11-2006, 08:19 PM
This is what I tried, makes sense but does not work:
<div id="backdrop" onMouseover="this.style.background=\'images/backdrop2.jpg\';" onMouseout="this.style.background=\'images/backdrop.jpg\';">
12-11-2006, 09:53 PM
CSS can do that. I whipped up a little tutorial if you'd like to see how. Hope I'm not totally misunderstanding what your asking...
See the demo here. (http://www.nopeople.com/CSS/CSS_rollover/)
12-11-2006, 10:43 PM
If you prefer the JS method then you need to correct your syntax. This would work
<div id="backdrop" onMouseover="this.style.background='url(images/backdrop2.jpg)';" onMouseout="this.style.background='url(images/backdrop.jpg)';">
12-12-2006, 11:33 AM
I had a typo in the syntax, based on your fix it works now. See here:
Right, that was not what I really wanted, but till I find a solution for rotating this backdrop image, I'll stick to it. Maybe I should write/find a small JS that changes the backdrop each 10 seconds and load it with onLoad?
12-12-2006, 11:40 AM
Have a look at http://www.photographersregistry.com/
12-12-2006, 01:20 PM
Hi, the site generates this error:
Warning: main(/mnt/lib/mysql.class.php): failed to open stream: No such file or directory in /mnt/subsite/inc/start.inc.php on line 44
Fatal error: main(): Failed opening required '/mnt/lib/mysql.class.php' (include_path='.:/usr/share/pear') in /mnt/subsite/inc/start.inc.php on line 44
12-12-2006, 01:30 PM
Now it's OK. Let me summarize what he did:
/* Images for Array*/
images = new Array(3);
images = "<div id='mainpic'></div>";
images = "<div id='mainpictwo'></div>";
images = "<div id='mainpicthree'></div>";
index = Math.floor(Math.random() * images.length);
Powered by vBulletin® Version 4.2.2 Copyright © 2016 vBulletin Solutions, Inc. All rights reserved.