Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post

    Rotate background image of a div

    Hello, I have current div and the background image background.jpg.


    Code:
    #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?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,742
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello guvneck,
    That is beyond what CSS can do...you'll need java for that. Have a look at a google search.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,742
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Yeah I know, and I always get them flopped. I'm dyslexic.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    This is what I tried, makes sense but does not work:

    Code:
    <div id="backdrop" onMouseover="this.style.background=\'images/backdrop2.jpg\';" onMouseout="this.style.background=\'images/backdrop.jpg\';">

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,742
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    If you prefer the JS method then you need to correct your syntax. This would work
    Code:
    <div id="backdrop" onMouseover="this.style.background='url(images/backdrop2.jpg)';" onMouseout="this.style.background='url(images/backdrop.jpg)';">
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    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?

  • #9
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #10
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    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

  • #11
    Regular Coder
    Join Date
    Jan 2006
    Posts
    377
    Thanks
    8
    Thanked 1 Time in 1 Post
    Now it's OK. Let me summarize what he did:

    CSS file:

    Code:
    /* 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:

    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •