| | |
Random Images on Refresh
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
•
•
Join Date: Apr 2007
Posts: 1
Reputation:
Solved Threads: 1
•
•
•
•
Wow thanks, a code that actually works... but I still have a problem/query...
Is there any way that in 4 refreshes every image is shown once?
Dont think I can explain much more...![]()
Thanks for any help in advance.
•
•
•
•
This script will load random images and they will change when you refresh. I hope this is what you are looking for:
Put in the head:
[html]<SCRIPT LANGUAGE="JavaScript">
var theImages = new Array()
//Random-loading images
theImages[0] = 'images/home_rotate1.gif' // replace with names of images
theImages[1] = 'images/home_rotate2.gif' // replace with names of images
theImages[2] = 'images/home_rotate3.gif' // replace with names of images
theImages[3] = 'images/home_rotate4.gif' // replace with names of images
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
if(whichImage==0){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
}
else if(whichImage==1){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
}
else if(whichImage==2){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
}
else if(whichImage==3){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
}
else if(whichImage==4){
document.write('<a href ="link.html"><img src="'+theImages[whichImage]+'" border=0 width=452 height=181></a>');
}
}
</script>
//Then put this where you want the images to appear:
<script>showImage();</script>[/html]
Is there a way to do this multiple times on one page??
•
•
Join Date: Apr 2008
Posts: 1
Reputation:
Solved Threads: 1
Please edit the image size of your random images in script you put it in head part
Lets say you wanted to have two images on the page change at the same time... and the images related to each other so that ....
When showImage loads you have a 2nd image location on the page that goes along with it.
I'm trying to make it so that the leftcolumn and rightcolumn of my page change insync with each other but at random.
I'm just learning javascript but think I understand the logic needed.
When showImage loads you have a 2nd image location on the page that goes along with it.
I'm trying to make it so that the leftcolumn and rightcolumn of my page change insync with each other but at random.
I'm just learning javascript but think I understand the logic needed.
•
•
Join Date: Jan 2005
Posts: 10
Reputation:
Solved Threads: 1
are you looking for something like this? http://www.amerimod.com/
•
•
Join Date: Oct 2009
Posts: 1
Reputation:
Solved Threads: 0
•
•
•
•
Lets say you wanted to have two images on the page change at the same time... and the images related to each other so that ....
When showImage loads you have a 2nd image location on the page that goes along with it.
I'm trying to make it so that the leftcolumn and rightcolumn of my page change insync with each other but at random.
I'm just learning javascript but think I understand the logic needed.
JavaScript Syntax (Toggle Plain Text)
<SCRIPT LANGUAGE="JavaScript"> var theImages = new Array() theImages[0] = 'Picture_Index_Left_Rotate_1.jpg' theImages[1] = 'Picture_Index_Left_Rotate_2.jpg' theImages[2] = 'Picture_Index_Left_Rotate_3.jpg' theImages[3] = 'Picture_Index_Left_Rotate_4.jpg' theImages[4] = 'Picture_Index_Left_Rotate_5.jpg' var j = 0 var p = theImages.length; var preBuffer = new Array() var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ if(whichImage==0){ document.write('<img src="Picture_Index_Left_Rotate_1.jpg" width="407" height="336" border="0" />'); } else if(whichImage==1){ document.write('<img src="Picture_Index_Left_Rotate_2.jpg" width="407" height="336" border="0" />'); } else if(whichImage==2){ document.write('<img src="Picture_Index_Left_Rotate_3.jpg" width="407" height="336" border="0" />'); } else if(whichImage==3){ document.write('<img src="Picture_Index_Left_Rotate_4.jpg" width="407" height="336" border="0" />'); } else if(whichImage==4){ document.write('<img src="Picture_Index_Left_Rotate_5.jpg" width="407" height="336" border="0" />'); } } function showImage2(){ if(whichImage==0){ document.write('<img src="Picture_Index_Right_Rotate_1.jpg" width="518" height="336" />'); } else if(whichImage==1){ document.write('<img src="Picture_Index_Right_Rotate_2.jpg" width="518" height="336" />'); } else if(whichImage==2){ document.write('<img src="Picture_Index_Right_Rotate_3.jpg" width="518" height="336" />'); } else if(whichImage==3){ document.write('<img src="Picture_Index_Right_Rotate_4.jpg" width="518" height="336" />'); } else if(whichImage==4){ document.write('<img src="Picture_Index_Right_Rotate_5.jpg" width="518" height="336" />'); } } </script>
after this use
<script>showImage();</script> and <script>showImage2();</script>
where you need the image to show up in the body
(note - took out link so if you need it to link add the <a href> tag)
Also - the images are called staticly...so no need for the i variable here
Last edited by peter_budo; Oct 4th, 2009 at 7:48 am. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
![]() |
Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: bookmarklet problem
- Next Thread: Detect browser window closing event in Firefox -
| Thread Tools | Search this Thread |
ajax ajaxcode ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column cookies createrange() css cursor dependent disablefirebug dom download dropdown editor element engine error events explorer ext file form forms google gwt gxt hiddenvalue highlightedword html htmlform ie8 iframe image() images internet java javascript jawascriptruntimeerror jquery jsf jsfile jump libcurl math matrixcaptcha media microsoft mimic object onmouseoutdivproblem onreadystatechange parent pdf php player post problem progressbar rated rating regex runtime scroll search security select session shopping size software sql star stars synchronous text textarea unicode validation w3c web website window windowofwords windowsxp wysiwyg xml \n





