Random Image With CSS?

It was having problems dou to another pieice of javascript :stuck_out_tongue:

how can you assign a different link to each image??

can you set each one a different % to show?? for example, one 50% of the times, anotehr 15%, a third one 35%?

thanks n-n

You would need some sort of database to store how many times each image has been displayed, similar to an ad tracking system.

-J

im having issue displaying the images. on the page i get this code displaying

 2:27 AM 8/17/2009 if (document.getElementById) { window.onload = swap }; function swap() { var numimages=2; rndimg = new Array("Images/FIL3902.JPG", "Images/FIL3903.JPG", "Images/FIL3904.JPG", "Images/FIL3905.JPG", "Images/FIL3906.JPG"); x=(Math.floor(Math.random()*numimages)); randomimage=(rndimg[x]); document.getElementById("picture").style.backgroundImage = "url("+ randomimage +")"; }  

i put the script in the head part and added the

 div#picture{
background-image:url(Images/FIL3908.jpg);
width:607px;
height:85px;
float:left;
}

in the styles sheet. but it isnt working for me. any help please

You have 5 images so you need to change the variable to 5.


[B]var numimages=5; [/B]


I assume this code isnā€™t present in your actual script:


 2:27 AM 8/17/2009 

Get rid of it if it is.

If itā€™s still not working provide a link or the full html/css.

Yeag i saw that but i need something like that but the bg img is CSS

There its javascript

Iā€™ve no idea what you just said :slight_smile:

Please explain what you require in detail and not in some cryptic sentence and weā€™ll try to help.

Iā€™ll have a guess at what you meant and if you want to change images randomly then it canā€™t be done by css alone as css does not do dynamic changes as that is the realm of scripting.

The JS simply supplies a random url for the background property to replace the default.

hey paulā€¦ thank you so much for your help . this script is awesome. I LOVE YOU :slight_smile: hahahā€¦ thanks again .

EDIT: my images are bigger ā€¦ how do make it so that it fits to the div box i have ? some images are big in size, and its just showing half or portion of it.

hey this probably not related to this thread.

I have a problem when i click on the link ā€˜homeā€™ or refresh in Windows Internet Explorer it takes me to the main page. but when i click i can see something flashing at the background. but in Firefox it works fine. what could be the issue??

any help please.

Hi,

EDIT: my images are bigger ā€¦ how do make it so that it fits to the div box i have

You would need to set the container that the images are displayed in to the height of the largest image you are using.

e.g.


#banner {
[B] height:100px;[/B]/* adjust height to size of largest image */
 border:1px solid #000;
 background:#ffffcc url(images/pmoblogo5.jpg) no-repeat center center;
}


As we are using background images then they take up no space on the page and the element would need to have a height pre-set. Usually with headers and banners you would have the same height images all the time so there is no problem. it may be a bit disconcerting to have different size images unless they are centred in the background.

If you wanted images in the html then you would need to script it so that the img src is updated instead of the background property.

Something like this I would guess (but Js isnā€™t my strongpoint so perhaps someone else will jump in).

If you are still talking about the image swap then thatā€™s probably the default image showing while the other image gets loaded. Weā€™d need to see a link to the page in question.

Lets say the DIV box is 200x200 in size, andi got images like 200x200, 400x400, 640x500 in size etc.

what i want to do is, those pictues to get resized so that it fits in the 200x200 box. but if the picture is smaller than 200x200 ( lets say 50x50) i want that to remain 50x50, just the bigger pictures to get resized. I hope it makes sense

Hi,

I think you would need to use an image in the html to do that as Iā€™m not sure how you can resize background images other than by clipping them.

Here is a rough example (that I hope someone here can tidy up ) that sets the image to a max width or height and hopefully maintains some of the aspect ratio.

http://www.pmob.co.uk/temp/randombgimage5.htm

The issues I see are that the default image and the resizing are visible for a fraction each time you refresh.

Hopefully someone else can step in and tidy this up as Iā€™m going back to the CS forum where I belong :slight_smile: