...

View Full Version : Rotate background image of a div



guvenck
12-11-2006, 04:59 PM
Hello, I have current div and the background image background.jpg.




#backdrop
{
height: 98px;
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?

Excavator
12-11-2006, 07:37 PM
Hello guvneck,
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)

_Aerospace_Eng_
12-11-2006, 07:43 PM
No not java. Java is NOT javascript. You need javascript for what you want to do. Don't confuse java and javascript please, they are two totally different languages.

Excavator
12-11-2006, 08:30 PM
Yeah I know, and I always get them flopped. I'm dyslexic.

guvenck
12-11-2006, 09: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\';">

Excavator
12-11-2006, 10:53 PM
It looks like your trying to do a rollover effect since your using mouseover... That would change the background when someone put their mouse on the image, instead of randomly changing the background like that javascript I linked you to.

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/)

_Aerospace_Eng_
12-11-2006, 11: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)';">

guvenck
12-12-2006, 12:33 PM
Hello,

@Aerospace

I had a typo in the syntax, based on your fix it works now. See here:

http://www.queenturk.com/index.php



@Excavator

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?

ahallicks
12-12-2006, 12:40 PM
Have a look at http://www.photographersregistry.com/

Friend of mine built it and it uses an image array in javascript to randomly display a different image everytime you refresh the page... just add all the images you want :)

guvenck
12-12-2006, 02: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

guvenck
12-12-2006, 02:30 PM
Now it's OK. Let me summarize what he did:

CSS file:



/* Images for Array*/

#mainpic{
background-image:url(images/main_picture.jpg);
width:206px;
height:253px;
float:left;
}

#mainpictwo{
background-image:url(images/main_picture_two.jpg);
width:206px;
height:253px;
float:left;
}

#mainpicthree{
background-image:url(images/main_picture_three.jpg);
width:206px;
height:253px;
float:left;
}


JS Code:



<script language="JavaScript"><!--
images = new Array(3);
images[0] = "<div id='mainpic'></div>";
images[1] = "<div id='mainpictwo'></div>";
images[2] = "<div id='mainpicthree'></div>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
// -->
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum