Random background image on load. How to?

Discussion in 'Web Design and Development' started by MacBoobsPro, Feb 2, 2011.

  1. MacBoobsPro, Feb 2, 2011
    Last edited: Feb 2, 2011

    MacBoobsPro macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #1
    Hi guys,

    I've been trying to find a simple way to change the background image of a div tag in CSS (using Dreamweaver). I'm a total 'noob' when it comes to web design although I have a VERY basic grip of CSS.

    Everywhere I look for a solution to my problem people simply jump into code talk and it goes way over my head. I want to understand it but if its not explained from start to finish and exactly where I need to put stuff I really struggle with it.

    I would be grateful if someone could take a look at my site here and have a look at the code and pretty much tell me exactly what I need to do get the large image (div tag '#mainimage') to choose a random image on load. The image size of which is 750px x 276px. I have the alternative images ready I just simply cannot figure out the code templates that i keep downloading and what I need to change in them and where to put them.

    If anyone can help me it would be gratefully appreciated. :)

    EDIT: Also what you see on my site I have learned from scratch so I'm not afraid to learn I simply really struggle with code as I am a visual thinker. :)
     
  2. Hermes Monster macrumors 65816

    Hermes Monster

    Joined:
    May 4, 2010
    Location:
    UK
    #2
    When you say random, do you mean a selection of images on a rotation?

    I'm nit aware of a way to do this with CSS yet, maybe CSS3 will but I'm not sure. What you'll likely need is j-query to do it or java script to do it...
     
  3. MacBoobsPro thread starter macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #3
    Sorry because Im still learning the lingo i said 'random' which seems to be better known as 'rotating' an image. So yes I want to 'rotate' the images. I'm aware it requires Javascript but thats what I'm struggling with, I simply cannot translate the code to suit my site as I dont understand the template codes available. Any help would be appreciated.
     
  4. harpster macrumors regular

    Joined:
    Jan 26, 2010
    #4
  5. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #5
    You'd have to rework your html code to make it work with most jquery image rotating scripts. The images are inline rather than in the CSS.
     
  6. MacBoobsPro thread starter macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #6
    Even what you say here goes over my head a bit lol. :eek: I'll check out the link in more detail but it doesnt tell me (as far as I can see) where I put the code in my file?
     
  7. harpster macrumors regular

    Joined:
    Jan 26, 2010
    #7
    Here is a simple script that you can modify as needed. I made three images (400px X 300px).... red, green, & blue named img1.jpg, img2.jpg, & img3.jpg. They are in a folder named "images" that is in the same folder as the script below.

    Using jquery, one of the three images will load randomly when the page is loaded/refreshed. The jquery code puts the randomly selected image in a div named header_img and it's a css background element. I put up a temp demo of this script running at http://www.justharp.com/imgtest/randimg.html

    This is about as simple as it's gonna get... good luck!


    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    
    <script type="text/javascript">
    	$(document).ready(function() { var randomImages = ['img1','img2','img3']; var rndNum = Math.floor(Math.random() * randomImages.length); $("div#header_img").css({ background: "url(images/" + randomImages[rndNum] + ".jpg) no-repeat" }); });
    </script>
    
    <style type="text/css">
    	#header_img {height: 300px};
    </style>
    
    </head>
    
    <body>
    	<div id="header_img">
    </div>
    
    </body>
    </html>
    
     
  8. manueld macrumors 6502

    Joined:
    Jun 8, 2009
    #8
    As he stated previously, I think he got random mixed up with rotating. But that's a great simple script for a random image. Thanks!
     
  9. Laird Knox macrumors 68000

    Joined:
    Jun 18, 2010
    #9
    I've done similar things in the past with CGI. I just point the image source to the script but that was so 90s. ;)

    Nice function but why cram it all on one line?

    If the OP wants to rotate the images then the script is still a good place to start.
     
  10. harpster macrumors regular

    Joined:
    Jan 26, 2010
    #10
    Feel free to break up the function in as MANY lines as you want :)

    From what I've read he wants a random image on load and had the alternate images ready but didn't provide links to them. To me "rotate" is to turn it and I think he wants an image swap. Now if you mean to rotate through all the images 123,123,123 on a page load in order that could be tricky and may need some php and or cookies to remember the state of the last image.

    Anyway this is not a bad solution but it is random so the images will not appear in any kind of order. Since he was struggling with this in the first place, to add cookies and php is probably out of the question. This is a very simple solution for swapping those images on page load and was very easy to modify in the code from the http://www.stuartluff.co.uk link provided.

    I updated the demo with some images on a copy of the stuartluff page.
    http://www.justharp.com/imgtest/stuartluff.html
     
  11. MacBoobsPro, Feb 3, 2011
    Last edited: Feb 3, 2011

    MacBoobsPro thread starter macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #11
    Wow I really appreciate that but I still cant get it to work. :confused: I'll upload pics and html in a sec.

    EDIT: Go here and download the stuartluff.zip for the html and images. :)

    I REALLY appreciate the help. Once I see it working in an environment I understand I'll be able to study it and understand it. Dont be fooled by what you see on my site. I've spent months and months sticking different values in different boxes in Dreamweaver until I got what I wanted. I REALLY don't know what I'm doing!

    EDIT2: Sorry should of said the images I want to 'rotate/swap' (whatever you want to call it - basically a different image on load) are in the portfolio folder so path would be images/portfolio/something I guess.

    EDIT3: Where it says var randomImages = ['img1','img2','img3']; do I change img1 etc to the path of each image? Like images/portfolio/brand_snowstorm.jpg for example?
     
  12. harpster macrumors regular

    Joined:
    Jan 26, 2010
    #12
    1. Using the Dreamweaver editor, Put the following code in the head tag before the line "<style type="text/css">".

    Code:
    <script src="http://code.jquery.com/jquery-1.5.js"></script>
    
    <script type="text/javascript">
    	$(document).ready(function() { var randomImages = ['img1','img2','img3']; var rndNum = Math.floor(Math.random() * randomImages.length); $("div#mainimage").css({ background: "url(images/" + randomImages[rndNum] + ".jpg) no-repeat" }); });
    </script>
    2. Notice in the above code the target div is your div#mainimage so that's where the images will appear. Also the part .css({ background: "url(images/" specifies the image folder as "images" and that folder would be in the same directory (folder) as the main html script.

    That's all you need to do just make sure the images are named img1.jpg, img2.jpg, & img3.jpg. If you want to use different image names you need to modify the above functions image names. Note that .jpg is added to those names in the function so your actual images must include the .jpg.

    That should do it.
     
  13. MacBoobsPro, Feb 3, 2011
    Last edited: Feb 3, 2011

    MacBoobsPro thread starter macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #13
    I'll give it a go mate but don't hold your breath lol. I'll let you know how I get on with it :) Really appreciate your help :)

    EDIT: You sir are a friggin amazing human being of epic proportions (I don't mean you're fat). It worked!!!! Finally!

    As you explained so simply I was even able to modify the path etc so I didnt have to change my file structure already inplace. Mate I think I love you :D

    If you ever need any design work doing its on me mate (as long as its not an airline rebrand or something lol).
     
  14. harpster macrumors regular

    Joined:
    Jan 26, 2010
    #14
    Appreciate it man - I was just up for the challenge and you know I might need to do this a site of my own someday and now I got the code for that!

    At the same time you replied I uploaded a new (final) version from the code files you provided with your images. I'll be taking it down in a day or so now that you got it figured out.

    http://www.justharp.com/stuartluff/index.html

    Yours should look like this. It is random so different users will get different images when they go to the site but the same user clicking refresh a lot will see the previous image sometimes. Hopefully this will work for you and give yourself some credit it looks pretty good to boot!
     
  15. MacBoobsPro thread starter macrumors 603

    MacBoobsPro

    Joined:
    Jan 10, 2006
    #15
    Yeh cheers mate. I can do the designing just not the coding :D

    I'm now rearranging my files structure lol so its a bit more logical. As its been a very long process of learning certain, images got put in certain folders and it was getting a bit messy back there. Now everything will be in the main images folder but with a much better file naming system.

    Seriously mate if you ever need some business cards or something doing just let me know. PM me first so I know its you and not someone else on the forum pretending to be you :p
     
  16. Laird Knox macrumors 68000

    Joined:
    Jun 18, 2010
    #16
    LOL, it was just driving me nuts for a minute. I was looking at your post and the line just happens to get cut off right after you declare the image array. I kept looking at it and saying what the heck is this doing? I eventually noticed the horizontal scrollbar and had a "duh" moment. :)
     
  17. harpster macrumors regular

    Joined:
    Jan 26, 2010
    #17
    Yeah the long scroll bar thing :)

    Update: I removed the pages I made (links above) with references to the stuartluff site's original content. However I'm leaving this link up for awhile that demonstrates the changing a css background image on page load.

    http://www.justharp.com/imgtest/randimg.html
     

Share This Page