| | |
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 ajaxexample ajaxhelp ajaxjspservlets animate automatically beta box browser bug captchaformproblem checkbox close codes createrange() css cursor debugger dependent disablefirebug dom download dropdown editor element engine enter error events explorer ext file firefox form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump listbox maps masterpage math media menu microsoft mp4 object onmouseoutdivproblem onreadystatechange paypal pdf php player position problem programming progressbar prototype redirect regex runtime safari scale scriptlets search security select size software sql text textarea unicode w3c window windowofwords windowsxp wysiwyg \n





