JavaScript - How To Add A Url To Each Image In This Random Image Selector Code?
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> Similar TutorialsI 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. 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 I would appreciate some help, I want to use the Drop Down Image selector II script on a website, to display fabric, as there is a large number of samples, I want to break the list up alaphabetically. Is is possible to use the script more than once on a page, when I tried to do this the script did not work, if it can not be used more than once on a page, has anyone seen a program that could be. Thanks I'm currently setting up a website that will display, for each link in the drop down, an image below the box, and text or, if necessary, an image to the right, describing the item & listing materials & prices. I've tried iframes with a drop down, but because I'm hosted with BraveHost, I end up with 50 ads on the main page, and 50 more in the iframe, so I'd like to avoid that if possible. If you want to see what I'm looking for, go here. http://andicrafts78.bravehost.com/test.html. How can I modify the drop down selector to make it happen?
its me again! and yeah i need some insight from you guys. i cant seem to get this code to work and i know my flaw is in my "bloat();" function. help me out? 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> <title>Test 4</title> <script type = "text/javascript"> function preload(){ images = new Array(); images[0] = new Image(); images[0].src = "image1.png"; images[1] = new Image(); images[1].src = "image2.gif"; images[2] = new Image(); images[2].src = "image3.png"; images[3] = new Image(); images[3].src = "image4.jpg"; images[4] = new Image(); images[4].src = "image5.gif"; } function bloat(){ if(document.getElementById("image1").onMouseOver === true){ document.getElementById("main").src = "image1.png";} else if(document.getElementById("image2").onMouseOver === true){ document.getElementById("main").src = "image2.gif";} else if(document.getElementById("image3").onMouseOver === true){ document.getElementById("main").src = "image3.png";} else if(document.getElementById("image4").onMouseOver === true){ document.getElementById("main").src = "image4.jpg";} else(document.getElementById("image5").onMouseOver === true){ document.getElementById("main").src = "image5.gif";} } </script> </head> <body onLoad = "preload();" bgcolor = "orange"><center> <img src = "bloat();" alt = "main" id = "main" height = "400" width = "450"><br /><br /> <a href = "http://www.joystiq.com"> <img src = "image1.png" alt = "image1" id = "image1" onMouseOver = "bloat();" height = "200" width = "225"></a> <a href = "http://www.engadget.com"> <img src = "image2.gif" alt = "image2" id = "image2" onMouseOver = "bloat();" height = "200" width = "225"></a> <a href = "http://www.amazon.com"> <img src = "image3.png" alt = "image3" id = "image3" onMouseOver = "bloat();" height = "200" width = "225"></a> <a href = "http://www.newegg.com"> <img src = "image4.jpg" alt = "image4" id = "image4" onMouseOver = "bloat();" height = "200" width = "225"></a> <a href = "http://www.smc.edu"> <img src = "image5.gif" alt = "image5" id = "image5" onMouseOver = "bloat();" height = "200" width = "225"></a> </center></body> </html> so essentially the way this should look is a list of five images tiled length wise. when you onMouseOver one it becomes a bigger image right above them. when you click the "thumbnails" as i'll call it, you get linked to a web page. i got everything formatted right however i think there is an error with my function. any insight fellas? thanks! 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, 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! 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.
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 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, 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 =) 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> Hi guys, As a relative newcomer to Javascript this is killing me! Maybe someone can help... I am trying to put an image on the front page of my website that changes to one of two random images on mouseover. This part was easy, and has been done (I got the code from http://www.joemaller.com/javascript/randomroll.shtml). But what I am finding difficult is to make each image link to a different page. For example, if the user mouseovers the main image and sees the 'thumbs up' image, then clicks on it, they should be taken to the 'thumbs up' page. And if the user mouseovers the main image and sees the 'thumbs down' image, then clicks on it, they should be taken to the 'thumbs down' page. The site is he www.uninvitedcritic.com I think using 2 arrays is the way to go, but am not sure. Any help would be appreciated! Hi I am a complete novice with Javascript. I posted a question on another site as I want to show a series of 9 images in a random order - ie all 9 images but changing their order every time the page loaded. Someone responded with the following script: onload= function(){ var n, pic, A= [1, 2, 3, 4, 5, 6, 7, 8, 9];// replace integers with urls var pa= document.getElementById('image_set'); // reference the container element pa=mr('evalBlock') while(A.length){ pic=document.createElement('img'); n= Math.floor(Math.random()*A.length); pic.src= A.splice(n, 1); pa.appendChild(pic); } } However - I don't know how to put it into my pages to get it to work and they have not replied to my further query. I think I have to put something in the () after function, also, do the URLs have to be absolute and do they need enclosing in ' or ". Also what code do I then have to put on the page to call the image? Would anyone here be able to help? Many thanks Carol 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. I placed this code in an external js file. Nothing happens. What do I need to change? Code: var randomPic = new Array(); randomPic[0] = "images/home/binoculars.jpg"; randomPic[1] = "images/home/conductor.jpg"; randomPic[2] = "images/home/dandelion.jpg"; randomPic[3] = "images/home/dog.jpg"; var whichPic = Math.floor((Math.random() * randomPic.length)); document.getElementById('tag').style.backgroundImage = randomPic[whichPic]; I have a form that used php to load a random image but now i would like to use javascript instead and am sure I nearly have it. I need to have a random number between 0 -5. Here is my code Code: <script type='text/javascript'> var random = Math.floor( Math.rand() * 6); document.write("<img src='images/'"+random+"'.jpg' alt='random image' /><input name='image' type='hidden' value='"+random+"' />") </script> Random Image Slideshow (I want two!?) Hi I have use the code from he http://www.javascriptkit.com/script/...domslide.shtml (which works well for me) Can anyone tell me how I can get a second other random image to display on the page beside the first? I cant work it out. It seems I cant run the script twice? Here's my page: http://www.bookmarkpeople.com/chillax2.htm Any help much appreciated? A bear of simple brain. Jules. So I found this script and i give all props to the author but can anyone help me to add text to the random images. Also i need a button that will generate the random images/text not when you refresh the page but when your press the button and to not display any image/text till the button is pressed? Thanks in advance. [CODE] <script language="Javascript"> var currentdate = 0 var core = 0 function StringArray (n) { this.length = n; for (var i =1; i <= n; i++) { this[i] = ' ' } } image = new StringArray(10) image[0] = 'images' image[1] = 'images' image[2] = 'images' image[3] = 'images' image[4] = 'images' image[5] = 'images' image[6] = 'images' image[7] = 'images' image[8] = 'images' image[9] = 'images' var ran = 60/image.length function ranimage() { currentdate = new Date() core = currentdate.getSeconds() core = Math.floor(core/ran) return(image[core]) } document.write("<img src='" +ranimage()+ "'>") </script> <form> <p><input type="button" name="B1" value="Switch It Up" onclick="ranimage()"></p> </form> [CODE] |