|
JavaScript - Random Image Rotation With Onclick?
Hey guys,
Right now I have a random rotating slideshow with delay script implemented on a website. However I want to make ONE of the slides/images clickable to open up a PDF doc. Can you please let me know what I need to add/change in this to make it do what I need? I am not big on java so need some help. Thanks in advance! Code:
<script language="javascript">
/*
Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
For this script and more, visit http://www.javascriptkit.com
*/
var delay=12000 //set delay in miliseconds
var curindex=0
var randomimages=new Array()
randomimages[0]="images/simple_img_11.jpg"
randomimages[1]="images/simple_img_2.jpg"
randomimages[2]="images/simple_img_3.jpg"
randomimages[3]="images/simple_img_4.jpg"
randomimages[4]="images/simple_img_5.jpg"
randomimages[5]="images/simple_img_6.jpg"
randomimages[5]="images/simple_img_7.jpg"
var preload=new Array()
for (n=0;n<randomimages.length;n++)
{
preload[n]=new Image()
preload[n].src=randomimages[n]
}
document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')
function rotateimage()
{
if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
document.images.defaultimage.src=randomimages[curindex]
}
setInterval("rotateimage()",delay)
</script>
Similar TutorialsHi guys! I need your help so much. I have this beautiful script for pocket pc that randomly rotates pictures in the background with fade in/out effect. Now, what I want it to do is to split all the pictures I have in groups so that on every refresh the script randomly chose a GROUP of pictures and THEN rotated only the pictures from this group. I want to do this because if you include say 30 pictures into the script this really hangs the RAM memory, and if there are only 5 pictures to choose from its much more faster. Here's the script from html page: Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
body {
background-color: white;
margin: 0;
padding: 0;
}
img {
-webkit-transition-property: opacity;
-webkit-transition-duration: 3s;
position: absolute;
width: 320px;
height: auto;
}
img.fade-out {
opacity: 0;
}
img.fade-in {
opacity: 1;
}
</style>
</head>
<body style="color: black">
<img src="01.jpg"/>
<img src="02.jpg"/>
<img src="03.jpg"/>
<img src="04.jpg"/>
<img src="05.jpg"/>
<img src="06.jpg"/>
<img src="07.jpg"/>
<img src="08.jpg"/>
<img src="09.jpg"/>
<img src="10.jpg"/>
<img src="11.jpg"/>
<img src="12.jpg"/>
<img src="13.jpg"/>
<img src="14.jpg"/>
<img src="15.jpg"/>
<script>
var interval = 4 * 1; // Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function(){
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 1000);
};
fade();
</script>
</body>
So here you can see there are 15 pictures, what should I include in this script to split them into say 3 groups of 5 pictures and make the script randomly select a group each time? Thanks for help! Dear all, I'm trying to use Javascript to have an array of images that load randomly AND work in a slideshow manner so change every 3 seconds (in a logical order). The code I have below presents a random image but how do I get them to continue from the random image and change to the next every 3 seconds? Code: <script language="JavaScript"> images = new Array(3); images[0] = "<a href = 'photo1.html'><img src='images/photo1.jpg' alt='Photo 1'></a>"; images[1] = "<a href = 'photo2.html'><img src='images/photo2.jpg' alt='Photo 2'></a>"; images[2] = "<a href = 'photo3.html'><img src='images/photo3.jpg' alt='Photo 3'></a>"; index = Math.floor(Math.random() * images.length); document.write(images[index]); </script> Kind regards Jon Hi, I need some help with my code for background image and title rotation! I'd like to get images one, two and three to rotate every one second, and have titles change according to the images. Currently both background and titles are not rotating.. ;-; Code:
<script>
window.onload = rotate;
var adImages = new Array('one.jpg','two.jpg','three.jpg');
var titleImages = new Array('title1','title2,'title3');
var thisAd = 0;
function rotate() {
thisAd++;
if (thisAd == adImages.length) {
thisAd = 0;
}
document.getElementById("picture1").style.backgroundImage = "url(adImages[thisAd])";
document.getElementById("picture1").title = titleImages[thisAd];
setTimeout("rotate()", 1 * 1000);
}
</script>
And here's my HTML Code: <div id="picture1" style="background-image:url(one.jpg);"></div> And here's my css Code: #picture1{
background-image: url(one.jpg);}
Would really appreciate any help with my request.... Im looking to setup a project for my uni assignment. its going to be a time radio site and i'm looking to create a page that has some javascript to carry out an image rotation. I want to have: - three images side by side - all images to rotate from a folder containing 100+ pictures - they all have different file names and extensions but i can change them if need be - i want the images to rotate automatically without the page having to be reloaded or mouseovers or anything - i would like them to rotate on different time frames i.e. first picture 3 sec rotation, second picture 5 seconds, third image 7 seconds.... something like that if any can help me with this i would be really grateful... iv tried scanning the web but come up short. cant use php or anything its got to be a html page using javascript. just to point out im not cheating by the way the module im doing it for is for media design not programming just cant find the code to do what i want. again thanks for everyones time cheers Here's what I usually use and have been using for years and it works great, just not for this particular purpose. I don't have a clue when it comes to javascript. Code: <noscript><img src="no_script_quote.gif" width="406" height="94"/></noscript><script language="javascript">
var delay=6000
var curindex=0
var images=new Array()
images[0]="quote1.gif"
images[1]="quote2.gif"
images[2]="quote3.gif"
images[3]="quote4.gif"
images[4]="quote5.gif"
var preload=new Array()
for (n=0;n<images.length;n++)
{
preload[n]=new Image()
preload[n].src=images[n]
}
document.write('<img name="defaultimage" src="'+images[Math.floor(Math.random()*(images.length))]+'">')
function rotateimage()
{
if (curindex==(tempindex=Math.floor(Math.random()*(images.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
document.images.defaultimage.src=images[curindex]
}
setInterval("rotateimage()",delay)
</script>
But, now I want to be able to set a default picture to be shown first and have the random pics appear next. I also don't want the default pic to show up again in the random array. So basically, every time the page was first visited, or refreshed it would show the default picture then move into the random pics. Is there anyway to modify the code that I'm using to accomplish this? Or... Any help would be appreciated. Thanks, Dell Hey folks.. Hope you can help, I'm completely new to this and have no knowledge at all when it comes to javascript. Have been using this script on my site for a while. Is there anyway I can add a URL link to the images that are in my selector? When clicked would go to that page on my website. Thanks in advance of any help Nat <script language="JavaScript"> /* Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com) For this script and more, visit http://www.javascriptkit.com */ var delay=10000 //set delay in miliseconds var curindex=0 var randomimages=new Array() randomimages[0]="http://www.anywebsite.com/images/splash1.jpg" randomimages[1]="http://www.anywebsite.com/images/splash2.jpg" randomimages[2]="http://www.anywebsite.com/images/splash3.jpg" randomimages[3]="http://www.anywebsite.com/images/splash4.jpg" randomimages[4]="http://www.anywebsite.com/images/splash5.jpg" var preload=new Array() for (n=0;n<randomimages.length;n++) { preload[n]=new Image() preload[n].src=randomimages[n] } document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">') function rotateimage() { if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){ curindex=curindex==0? 1 : curindex-1 } else curindex=tempindex document.images.defaultimage.src=randomimages[curindex] } setInterval("rotateimage()",delay) </script> Does anyone have a script, that can display a random image of the images I select?I'm going to use it for a type of captcha. I think this would be easier in javascript, so yes I am in the right section.
I have a tutorial I have to complete for my web class out of the "New Perspectives HTML, XHTML, and Dynamic HTML 4th edition book" (the tutorial I'm doing is number 10) and I can't figure out how to get the numbers to show up. Here is the code that is given to start out with. Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on HTML and XHTML 5th Edition
Tutorial 10
Review Assignment
Monroe Public Library
Author:
Date:
Filename: mpl2.htm
Supporting files: mpl2.jpg, mplstyles.css, random.js, 0.jpg - 9.jpg
-->
<title>Monroe Public Library</title>
<link href="mplstyles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="pageContent">
<div id="head">
<img src="mpl.jpg" alt="Monroe Public Library" />
</div>
<div id="links">
<span>Quick Links</span>
<a href="#">Home Page</a>
<a href="#">Online Catalog</a>
<a href="#">Friends of MPL</a>
<a href="#">New Books and Other Good Reading</a>
<a href="#">Ohio Virtual Library</a>
<a href="#">Internet Public Library</a>
<a href="#">Services and Collection</a>
<a href="#">Adult Programs</a>
<a href="#">Teen Central</a>
<a href="#">Children's Room</a>
<a href="#">Computers at MPL</a>
<a href="#">Computer Rules and Procedures</a>
<a href="#">Staff Directory</a>
<a href="#">Library Records</a>
</div>
<div id="main">
<h2>Library Records</h2>
<p>To view the library records, enter your username and password.</p>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<th>Username</th>
<td><input size="20" /></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" size="20" /></td>
</tr>
<tr>
<td>As a final security check, enter the 5 numbers
you see displayed below.</td>
<td><input size="6" /></td>
</tr>
<tr>
<td colspan="2" class="center">
<input type="button" value="View Library Records" />
</td>
</tr>
<tr>
<td colspan="2" class="center">
</td>
</tr>
</table>
</div>
<address>
<b>Monroe Public Library</b>
580 Main Street, Monroe, OH 45050
<b>Phone</b>(513) 555-0211
<b>Fax</b>(513) 555-0241
</address>
</div>
</body>
</html>
Then these are the directions given in the book. 1. In the head section, just above the closing </head> tag, insert a script element that accesses the code in the random.js file. 2. add a second script element for the cod e that you'll add to the mpl2.htm file 3. Within the second script element, create a function named showImg(). The purpose of this function is to write an inline image tag into the current document. The function has no parameters. Add the following statements to the function: a. Add the following multiline comment to the start of the function, just below the opening showImg() function statement. The showImg() function displays a random image from the 0.jpg through 9.jpg files. The random image is designed to thwart hackers attempting to enter the library records database by requiring visual confirmation. b. Declare a variable named imgNumber equal to the value returned by the randomInteger() function. Use 9 as a value of the size parameter in the randomInteger() function. c. append the statement that creates the imgNumber variable with the following single-line comment: Return a random number from 0 to 9 d. inster a command that writes the text <img src='imgNumber.jpg' alt='' /> to the document, where imgNumber is the value of the imgNumber variable. 4. scroll down to the bottom of the file and locate the last table cell in the document. Within this empty table cell, insert a script element. 5. within the script element, call the showImg() function five times. YOu do not need to specify a parameter value. ___________________________ It's a lot of info but I just can't figure out how to get the images to show up, any help will be appreciated, I think I gave all the info needed. Hi, my assignment is to create an online quiz with a random image generator. I have created my online quiz using 5 linking files and everything works great. My only problem is getting the images to show up on my quiz. All I get is the filename with a red X. Which the files do show up at random when I refresh, so I know that part is working. I just don't know what I am missing to get the actual picture to show up. Please take a look at my code below and see if I am missing anything. Please keep in mind this isn't the whole code as I have different linking files for this assignment. Thank you in advance. Code: <?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Assignment CH10 Solution -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Online Quiz</title>
<script type = "text/JavaScript">
<!--
var rimg = 0;
var pictures = [ "logo", "logo2", "logo3", "logo1", "cover" ];
function randpics(){
var myQuiz = document.getElementById( "myQuiz" );
rimg = Math.floor( Math.random() * 5 );
myQuiz.logo.src = pictures[rimg]+'.gif';
myQuiz.logo.alt = rimg + ' : ' +pictures[rimg];
}
function checkAnswers() {
var myQuiz = document.getElementById( "myQuiz" );
if ( myQuiz.elements [ 0 ].checked )
alert ( "Congratulations, your answer is correct" );
else // if the answer is incorrect
alert ( "Your answer is incorrect. Please try again" );
} // end function checkAnswers
-->
</script>
</head>
<body onload="randpics()">
<form id = "myQuiz" onsubmit = "return checkAnswers()" action = "">
<img name="logo" src="logo.gif" alt="javascript logo"/>
<br />
<p>Which company first implemented the JavaScipt language?<br />
<input type = "radio" name = "radiobutton" value = "logo" />
<label>Netscape Communications Corp.</label>
<input type = "radio" name = "radiobutton" value = "logo2" />
<label>Microsoft Corp.</label>
<input type = "radio" name = "radiobutton" value = "logo3" />
<label>Sun Microsystems Corp.</label>
<input type = "radio" name = "radiobutton" value = "logo1" />
<label>Consortium of all the companies</label><br />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</p>
</form>
<p>
Click here to continue <a href = "page1.html" target="_self">Next Question</a>
</p>
</body>
</html>
Hi, please look at: http://bit.ly/hO5VBE then click 'play app match' you'll see the images are taken from the first 15 in an array, then doubled and randomized. however, i want the the images taken to be a random selection from an array of 15+ images. so the array would be e.g. 25 images, and i want any 15 of those 25 to be chosen (then doubled and randomized) rather than the first 15 taken. any help would be great! James p.s. if you load the main page while hovering over an icon, its tooltip will be "undefined".. any ideas to stop this? Thanks! Forgive me if this is in the wrong forum as I am unsure as to whether this should be PHP or Java, or a WP plugin. Basically I need to have a slideshow that picks images from a folder without the need to use arrays as there will be a large amount of images and I need to literally be able to drop images in a folder and they appear in a random order within the slideshow. As you can appreciate with a large amount of images, the code needs to call them as and when needed rather than loading them in at the beginning. I have been using Wordpress's nextgen gallery and have been hacking away at a few plugins etc, and the closest I have come is to make WP select a different post with gallery each time creating the illusion that the images are in a different order, however this isn't going to be ideal as its not truly random, and breeds duplicates. If I have to stay away from WP that's fine, uploading to an ftp would be ok. Hope someone can point me in the right direction! Thank You A I have 3 background images, and 1 is picked at random to be the background image of the body when loading the page.My code is below. Right now it's just white, can't get any pictures to load. I have checked the URLs and they are correct. Can someone help out? Here is my code in the header: Code: <script type="text/javascript">
function getBackground(){
var bgimg = new Array();
bgimg[0] = "background1";
bgimg[1] = "background2";
bgimg[2] = "background3";
var random = Math.floor(Math.random() * bgimg.length);
var imgurl = bgimg[random];
document.body.style.backgroundImage = 'url(' + imgurl + ')';
}
</script>
body: Code: <body onload="getBackground()"> Hi, im wondering if anyone can help me, i have a random image script and it works fine, apart from when you click on the images they link to the right place but ALL go to _self I want [2],[3]and[6] to link to the places they are already linking to but _blank NOT _self, does anyone know how to do this, it would be a massive help :) Below is the code for the script i am using: Code: <script language="JavaScript">
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="images/layout/bottom gallery.png"
myimages[2]="images/layout/bottom facebook.png"
myimages[3]="images/layout/bottom twitter.png"
myimages[4]="images/layout/bottom team.png"
myimages[5]="images/layout/bottom whats on.png"
myimages[6]="images/layout/bottom forum.png"
//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="gallery.html"
imagelinks[2]="http://www.facebook.com/tos.php?api_key=fcddbaae811ef62bf3c4fb2ac7b1fd07&next=http%3A//dailyphoto-1402445175.us-east-1.elb.amazonaws.com/dailyphoto/applications/buffer/id%3A1/pid%3A2828044108236222753/from%3Apublisher.attachment.own.image?ref=nf&v=1.0&canvas#/group.php?gid=87957825200&ref=ts"
imagelinks[3]="https://twitter.com/groundzereo"
imagelinks[4]="team.html"
imagelinks[5]="whatson.html"
imagelinks[6]="http://groundzero.forumotion.co.uk/"
var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}
random_imglink()
//-->
</script>
Thanks in advance =) I know theres a lot of codes out there online for this but I cannot seem to get any of them to work for me. I am trying to make my layout for an item page for an online store. I'd like one big image, with one or 2 thumbnails under it which when clicked will switch the big image. Clicked, not mouseover. Lets say my big images would be REG1.jpg and REG2.jpg, the first being the image on the page that will switch. THUMB1.jpg and THUMB2.jpg being the thumbnails. Is there a simple way to do this or is the code a complete mess like I've been seeing on so many pages? I'd say I have an intermediate understanding of HTML and I've just started teaching myself javascript but I'm starting to fall off the wagon, I can't decipher the stuff coming up in these example codes. Any help would be thoroughly appreciated!! Here is my code for two tab images. Code: <a href="#page-2"><img src="/images/but02.png" style="margin-top:8px; float:left;"></a>
<a href="#page-1"><img src="/images/but01.png" style="margin-top:8px; float:left;"></a>
I need to have it so when tab '#page-2' is clicked it will change the image to '/images/but03.png' and when tab '#page-1' is clicked it will change the image to '/images/but04.png' ? Its basically to show which tab is active, one image is lighter then the other. Can anyone help ? Hi guys.. Im looking to basically have an image which is a button with a value, and when i click the image, it gets replaced by another image with a different value. when clicked again it would return to the original image and value.. Is this possible? and if so, please help cos im terrible at javascript! Many thanks Hello. I need some help with refreshing an image(cgi chart) onclick. This is because the chart changes every minute(due to database update) and i want whenever you click on it to refresh. My code so far is: HTML: Code:
<label for="choseChart">Change chart!</label>
<select id="choseChart" onchange="changeChart('choseChart');">
<option value="0" selected="selected">Chart of Months(column)</option>
<option value="1">Chart of Branches(column)</option>
<option value="2">Chart of Months(pie)</option>
<option value="3">Chart of Branches(pie)</option>
</select><br/>
<img id="chartType" style="cursor: pointer; cursor: hand" onclick="" alt="Chart" src="1.cgi"/>
Javascript: Code: function changeChart(chartid)
{
var chart = document.getElementById(chartid).selectedIndex;
document.getElementById("chartType").src=changeImage[chart];
}
Hi I implemented some coding tor create a random image on the page with a corresponding 'alt' tag and all was fine for a while... Then I got ambitions and modified the script to generate code that would generate two seperate sets of random image and associated 'alt' tag pairs.... and all seemed fine for a while.... ... however after having used the code on my page for a while I notice that occasionally I get a broken file link to the image which then fails to show... and shows the 'alt' text of "undefined". All the code links to images are correct and all images DO show from time to time with the tags.... only occasionally this extra blank/undefined pair is generated. Anyone have any ideas? Here's the code... Code: <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'images/240 Images/belmarsh-peat-240.jpg'
theImages[1] = 'images/240 Images/98-florence-rd-maidstone240.jpg'
theImages[2] = 'images/240 Images/boxgrove-biface-240.jpg'
theImages[3] = 'images/240 Images/Fieldwalking2-240.jpg'
theImages[4] = 'images/240 Images/Hawkinge-Pot-240.jpg'
theImages[5] = 'images/240 Images/Justin_Barton-240.jpg'
theImages[6] = 'images/240 Images/StaffPages/Hadrians-Wall.jpg'
theImages[7] = 'images/240 Images/Chilley_Farm_Pevensey240.jpg'
// do not edit anything below this line
var theImages2 = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages2[0] = 'images/LeafletImages/Fronts/Building/Building4.jpg'
theImages2[1] = 'images/LeafletImages/Fronts/Fieldwork/Fieldwork4.jpg'
theImages2[2] = 'images/LeafletImages/Fronts/Finds/Finds4.jpg'
theImages2[3] = 'images/LeafletImages/Fronts/Forensic/Forensic4.jpg'
theImages2[4] = 'images/LeafletImages/Fronts/GeoArch/GeoArch4.jpg'
theImages2[5] = 'images/LeafletImages/Fronts/Heritage/Heritage4.jpg'
theImages2[6] = 'images/LeafletImages/Fronts/Landscape/Landscape4.jpg'
// do not edit anything below this line
var theAlts = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theAlts[0] = 'Peat bog excavations at Belmarsh Prison.'
theAlts[1] = 'An archaeological watching brief underway in Maidstone, Kent.'
theAlts[2] = 'A flint biface hand-axe the from Boxgrove excavations, West Sussex.'
theAlts[3] = 'Fieldwalking.'
theAlts[4] = 'Excavation of a cremation urn at Hawkinge, Kent.'
theAlts[5] = 'An MA Student from University College London a records ceramic vessel.'
theAlts[6] = 'The Hadrian’s Wall Management plan was prepared in consultation with Archaeology South-East (Copyright - Image by Simon Warner).'
theAlts[7] = 'Historic Building Recording at Chilley Farm, Pevensey.'
var theAlts2 = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theAlts2[0] = 'Building Recording Services.'
theAlts2[1] = 'Fieldwork Services.'
theAlts2[2] = 'Finds and Environmental Specialist Services.'
theAlts2[3] = 'Forensic Archaeology.'
theAlts2[4] = 'Geoarchaeological Services.'
theAlts2[5] = 'Heritage Management Services.'
theAlts2[6] = 'Landscape Research Services.'
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(){
document.write('<img src="'+theImages[whichImage]+'" border="1" alt="'+theAlts[whichImage]+'">');
}
function showImage2(){
document.write('<img src="'+theImages2[whichImage]+'" border="0" alt="'+theAlts2[whichImage]+'">');
}
// End -->
</script>
and its called by the code... Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage(); // End --> </script> and.. Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage2(); // End --> </script> Many thanks in advance. |
|||||||