Log In

Email:
Password:
Keep me logged in

Forgot Password

Email:




Archives
2013
March (7)
February (13)
January (14)
2012
December (12)
November (12)
October (12)
September (6)
August (12)
July (6)
June (12)
May (6)
April (12)
March (6)
February (12)
January (12)
2011
December (11)
November (14)
October (11)
September (4)
August (16)
July (8)
Categories
CSS (28)
jQuery (116)
PHP (52)
.htaccess (5)
iPod (1)
iPhone (16)
Sponsored Links


Random Background Image
Javascript jQuery
Browse Category | Sunday, April 8, 2012 |

Description: Javascript funtion that select a random photo the display that as the background image.







Code:
<html>
<head>
<script src="http://wcetdesigns.com/assets/javascript/jquery.js"></script>
<script>
function bg(){
var img = []; //BLANK ARRAY UNTIL INPUTS ARE FILLED

var l = $('.imgsrc').length; //NUMBER OF INPUTS
for(i=0; i<l; i++){
var imgsrc = $('.imgsrc').eq(i).val(); //INPUT VALUE, SHOULD BE IMG URL
if(imgsrc){
img[i] = imgsrc; //ADDS THE URL INTO THE ARRAY
} else {
img[i] = 'http://images.wcetdesigns.com/banners/MiniBanner.png'; //IF INPUT IS BLANK DEFAULT URL WILL BE ADDED INSTEAD
}
}
var i = Math.floor(Math.random()*l); //GETS A RANDOM NUMBER FROM 0 - "var l" MINUS 1
var bg = img[i]; //THE CHOSEN IMAGE URL
$('body').css({'background-image':'url('+bg+')'}); //MAKES THAT IMAGE THE BACKGROUND
}
</script>
</head>
<body>
<input class="imgsrc" placeholder="Image URL"><br>
<input class="imgsrc" placeholder="Image URL"><br>
<input class="imgsrc" placeholder="Image URL"><br>
<input class="imgsrc" placeholder="Image URL"><br>
<input class="imgsrc" placeholder="Image URL"><br>
<input onClick="bg()" type="button" value="Randomize">
</body>
</html>
 0    0
Views: 557 Downloads: 10




(Optional in case you want a reply)



0 Comments