Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Random background image on load. How to?

MacBoobsPro

MacBoobsPro

macrumors 603
Original poster
Jan 10, 2006
5,114
6
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. :)
 
Last edited:
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...
 
Hermes Monster said:
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...
Click to expand...

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.
 
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.
 
harpster said:
A little jquery might do the trick... try this and remember you need to have a link in your script to jquery (either locally by downloading jquery or calling it via google is another common way to include it).

http://www.robwalshonline.com/posts/jquery-plugin-random-image-on-page-load/
Click to expand...

manueld said:
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.
Click to expand...

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?
 
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>
 
harpster said:
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!
Click to expand...

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!
 
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.
 
Laird Knox said:
I'
Nice function but why cram it all on one line?
Click to expand...

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
 
harpster said:
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
Click to expand...

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?
 
Last edited:
MacBoobsPro said:
Wow I really appreciate that but I still cant get it to work.
Click to expand...

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.
 
harpster said:
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.
Click to expand...

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).
 
Last edited:
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!
 
harpster said:
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!
Click to expand...

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
 
harpster said:
Feel free to break up the function in as MANY lines as you want :)
Click to expand...

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. :)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back