JavaScript - Please - Help Getting A Random Image Script To Work
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 Similar TutorialsHere'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 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.
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 =) Hi, I wonder if someone can help me. I'm building a site which has a random image generated on the page each time it loads. It does work at the moment, but I'd like it to be xhtml compliant. Currently the page loads the javascript from an external .js file, but it needs a line in the body of the page to make it work fully. This line is currently causing 15 errors when I try and validate it. The line is as follows: <script type="text/javascript">document.writeln('<td'+'><img src="'+xoxo[choice]+'"height=26 width=970 border=0 ><'+'/TD>');</script> Does anyone have any suggestions about how to make this line compliant? I'm a bit of a beginner, so any help would be greatly appreciated! I would like to add a submenu that pops up when the mouse moves over the first-level menu option. I succesfully added the submenu. However, now the image-swap script (the script that makes that the image that you see change as you move your mouse on the image) doesn't work anymore. Does anyone have any idea what I'm doing wrong? The relevant part of the header: Code: <script type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> #nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; float : left; width : 20.35em; } #nav li { /* all list items */ position : relative; float : left; line-height : 0em; margin-bottom : -1px; width: 11em; } #nav li ul { /* second-level lists */ position : absolute; left: -999em; margin-left : 18.35em; margin-top : -1.35em; } #nav li a { width : 10em; display : block; color : none; font-weight : bold; text-decoration : none; background-color : none; padding : 0 0.5em; } #nav li a:hover { color : none; background-color : none; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ left: auto; } #content { margin-left : 12em; } --> </style> <script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> The relevant part of the body code: Code: <table width="314" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="315"><div align="center"><a href="ob.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','afbeeldingen/menuob2.gif',1)"><img src="afbeeldingen/spacer.gif" alt="spacer" width="5" height="10" hspace="0" vspace="0" border="0" /><br /> <img src="afbeeldingen/menuob1.gif" alt="OB" name="Image10" width="309" height="27" border="0" id="Image10" /></a><br /> <a href="MS.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menums2.gif',1)"><img src="afbeeldingen/menums1.gif" alt="MS" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br /> <a href="kt.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','afbeeldingen/menukt2.gif',1)"><img src="afbeeldingen/menukt1.gif" alt="KT" name="Image12" width="309" height="27" border="0" id="Image12" /></a> <a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','afbeeldingen/menucontact2.gif',1)"><img src="afbeeldingen/menucontact1.gif" alt="Contact" name="Image15" width="309" height="27" vspace="3" border="0" id="Image15" /><br /></a> </div></td> </tr> </table> <ul id="nav"> <li> <a href="MS.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menums2.gif',1)"><img src="afbeeldingen/menums1.gif" alt="MS" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br /> <ul> <li> <a href="aa.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menuaa2.gif',1)"><img src="afbeeldingen/menuaa1.gif" alt="AA" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br /> </li> <li> <a href="bb.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menubb2.gif',1)"><img src="afbeeldingen/menubb1.gif" alt="BB" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br /> </li> <li> <a href="cc.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menucc2.gif',1)"><img src="afbeeldingen/menucc1.gif" alt="CC" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br /> </li> </ul></li></ul> Hi All. I am new to all this and I am posting a problem up here that I think is quite rare or has not been looked into for a long time now. I am basically looking to create a background for my website and when you refresh the page the image changes to another picture for the background. I have asked one of my good friends to have a look at it and he gave me some code to work with and so I have changed bits here and there and it worked in firefox and safari but will not work in IE. When I asked him he had no clue what to do. So here I am now! I am hoping it is simple but I also know it wont be to an extent! Any help would be much appreciated here. I have attached the code here for you and also the html file. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> </head> <style type="text/css"> <!-- #myFlash { position:absolute; width:100%; height:100%; margin:0; padding:0; left:0; right:0; z-index:20; } --> </style> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Experts Connect</title> <meta name="keywords" content="Experts connect Preston, Experts connect Lancashire, Medical reports, Preston medical and legal agency, Lancashire medical and legal agency, specialist providers of independent medical evidence, diagnostic and rehabilitation services to the personal injury market, Medico Legal, personal injury claims, refferers." /> <meta name="description" content="Experts Connect are an established legal and medical agency providing reports for persobal injury claims. We work to get the best possible examination we can to ensure your claim goes through with no fuss. We are based nationally and work all over the United Kingdom." /> <meta name="robots" content="INDEX,FOLLOW" /> <meta name="revisit-after" content="10 days" /> <link rel="stylesheet" type="text/css" href="/common/basic.css" /> <script type="text/javascript" src="crossfade.js"></script> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> swfobject.registerObject("myFlashContent", "9.0.0", "expressInstall.swf"); </script> <style type="text/css"> body { width:auto; height:auto; background-color:#CCCCCC;} #bgimage { filter:alpha(opacity=40); -moz-opacity:0.40; -khtml-opacity:0.40; opacity:0.40; width:100%; height:100%; position:absolute; margin:0; padding:0; left:0; right:0; } </style> <title>Untitled Document</title> <SCRIPT LANGUAGE="JavaScript"> <SCRIPT/> <!-- 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] = 'back4.jpg' theImages[1] = 'back2.jpg' theImages[2] = 'back5.jpg' theImages[3] = 'back6.jpg' theImages[4] = 'back8.jpg' // do not edit anything below this line 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 id="bgimage" src="'+theImages[whichImage]+'">'); // End --> </script> </head> <div id="myFlash"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="myFlashContent" name="expertsconnect" align="middle"> <param name="movie" value="experts-connectwebsite.swf" /> <param name="quality" value="high" /> <param name="scale" value="exactfit" /> <param name="wmode" value="transparent" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="experts-connectwebsite.swf" width="100%" height="100%" align="middle"> <param name="quality" value="high" /> <param name="scale" value="exactfit" /> <param name="wmode" value="transparent" /> <param name="allowfullscreen" value="true" /> <param name="allowscriptaccess" value="always" /> <!--<![endif]--> <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage(); // End --> </script> <!-- Script Size: 1.49 KB --> </body> </html> There is also a flash file embedded into this document! Any help would be great with this. Thank you, Mark Hi All, I have two scripts which I want to try and integrate. I am using a nice gallery script to show thumbnails which are appended to a an image wrapper which on click of the thumbnail shows the larger image in the image wrapper, I am trying to implement cloud zoom which is a plugin which uses image srcs to then point to an anchor href to show another larger zoom image either in the same place.. which is what I am trying to do or in another div beside. I have had to set me img srcs up in a certain way to easily enter some product details. and I need to try an manipulate the code to make it work to suit my file layout. I am using a var= images [ with a series of file locations and info such as below { src: 'romanticabride/thumbs/tn_Shauna.jpg', srcBig: 'romanticabride/images/Shauna.jpg', title: 'Shauna', longDescription: '<b><H1>Shauna</H1></b><br><b>Romantica Of Devon <br><br><h2>Sizes Available:</h2><br> 6 - 32.<b><br><b><br><b><b><b><H2>Colours Available:</h2><b><br>Various<br>Please Enquire Below<br><br><br><br><a href="mailto:tracy@cherishbridal.co.uk?subject=Web Enquiry Regarding Romantica Shauna Bridal Gown"class="enquiry rose glow" >Click To Enquire About This Item </a>' }, what I need is for cloud zoom to work when the main image wrapper is hovered over which means it will need to add a class or when the whichever srcBig: is hovered over it gets wrapped by href to make the script work . one of my pages is http://www.cherishbridal.co.uk/romaticabride.html the cloud zoom script is at http://www.professorcloud.com/mainsite/cloud-zoom.htm.. I am happy to share a jsfiddle with someone or explain further or post some code. Thank you in advance Hi guys, Could do with a bit of help! I've found this code elsewhere and am currently using it to load 5 random pages that automatically refresh to another in the array after 10 seconds. This works great. But is there a way of altering this code so it doesn't repeat any of the pages - atleast until it's displayed each page once? At the moment it can display 'page5' 3 or 4 times before I even see 'page2' for example - which is annoying! Code: <script type="text/javascript"> <!-- Array.prototype.random = function () {return this[Math.floor(Math.random() * this.length)]} Date.ONE_SECOND = 1000; url = ['page1.html', 'page2.html', 'page3.html', 'page4.html', 'page5.html',] setTimeout('location = url.random()', 10 * Date.ONE_SECOND) // --> </script> I'm very new to all this, so I aplogise if this is all very obvious! Greetings I'm using a script to display rotating youtube videos in the sidebar of my invision board. The problem is that the random thing causes the same video to be repeated twice in row at times. I need to add a cookie so that no video gets displayed to the same user until all other videos have been displayed. I also look for adding - if possible - a line to count the videos, so that I don't have to edit the number each time I add more videos.. Can someone please help me with that? Here is the script I'm using: Code: <script type="text/javascript"> function rand ( n ) { return ( Math.floor ( Math.random ( ) * n + 1 ) ); } // Store youtube [CHANGES NEEDED IN THE 3 URLS BELOW] var vids = new Array ( ); vids[0] = "http://www.youtube.com/embed/aF4M0JtoIPk"; vids[1] = "http://www.youtube.com/embed/KMxWhovYfzc"; vids[2] = "http://www.youtube.com/embed/ffZUWZQE0EU"; vids[3] = "http://www.youtube.com/embed/povUgNcf4aI"; vids[4] = "http://www.youtube.com/embed/Zs9u7X0rrd0"; vids[5] = "http://www.youtube.com/embed/D4L0KpqNzkU"; vids[6] = "http://www.youtube.com/embed/Mfdnb0Q7IBM"; vids[7] = "http://www.youtube.com/embed/D-JJpPBjQwI"; vids[8] = "http://www.youtube.com/embed/kn5NSCJ2tiI"; vids[9] = "http://www.youtube.com/embed/BDxDMCWShds"; // Pick a random video from the list function pick_vid ( ) { var numberOfImages = 10; //[CHANGE THE 3 TO THE TOTAL NUMBER OF VIDS YOU USE] var num = rand(numberOfImages)-1; document.getElementById("random_youtube_vid").src = vids[num]; } </script> <script type="text/javascript">window.onload=pick_vid;</script> <p style="padding: 6px 0;text-align:center"> <iframe id="random_youtube_vid" width="250" height="200" frameborder="0" allowfullscreen></iframe> </p> I found another scripts that could be of help, as it uses div and cookies.. But its for general display of anything. It doesn't have the iframe for the video. I don't know how to merge both scripts. Or perhaps you have better ideas.. Code: <div id="randomdiv1" style="display:none;"> [content for div 1] </div> <div id="randomdiv2" style="display:none;"> [content for div 2] </div> <div id="randomdiv3" style="display:none;"> [content for div 3] </div> <script type="text/javascript" language="JavaScript"><!-- /* Random Div Display Version 1.0 March 9, 2009 Will Bontrager http://www.willmaster.com/ Copyright 2009 Bontrager Connection, LLC For information about implementing this software, see the article at http://www.willmaster.com/library/javascript/random-div-display.php */ // One place to customize: // // Type the number of div containers to randomly display. NumberOfDivsToRandomDisplay = 3; // No other customizations required. //////////////////////////////////// var CookieName = 'DivRamdomValueCookie'; function DisplayRandomDiv() { var r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); if(NumberOfDivsToRandomDisplay > 1) { var ck = 0; var cookiebegin = document.cookie.indexOf(CookieName + "="); if(cookiebegin > -1) { cookiebegin += 1 + CookieName.length; cookieend = document.cookie.indexOf(";",cookiebegin); if(cookieend < cookiebegin) { cookieend = document.cookie.length; } ck = parseInt(document.cookie.substring(cookiebegin,cookieend)); } while(r == ck) { r = Math.ceil(Math.random() * NumberOfDivsToRandomDisplay); } document.cookie = CookieName + "=" + r; } for( var i=1; i<=NumberOfDivsToRandomDisplay; i++) { document.getElementById("randomdiv"+i).style.display="none"; } document.getElementById("randomdiv"+r).style.display="block"; } DisplayRandomDiv(); //--></script> Many thanks in advance. 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> I am stuck on some javascript homework I realize it is probably really easy but my stupid textbook is not clear on one point. I have to access code in an external javascript page (random.js) which I have done. But then i have to create a second script element to create the function showlmg() and within that I require statements to declare a variable named imgNumber equal to the value returned by the randomInteger() (which is from the external sheet found in data files from the textbook therefore I know they are right). I am supposed to use 9 as the value of the size parameter in the randomInteger() function. The second statement should be command that writes the following text to the document: <img src='imgNumber.jog' alt= ' '/>. So basically the coding I have done is : Code: <script type= "text/javascript" src= random.js"> </script> <script type="text/javascript"> function showlmg() { var imgNumber= randomInteger(9);// Return a random number from 0 to 9. document.write("<img src='imgNumber.jpg' alt=''/>"); } </script> all in the head of the document and then Code: function randomInteger(size) { return Math.floor((size+1)*Math.random());} from the external file. and Code: <tr> <td colspan="2" class="center"> <script type= "text/javascript"> showlmg(); showlmg(); showlmg(); showlmg(); showlmg(); </script> </td> </tr> to post in a table on the page... I believe the issue is in the declaring a variable the is equal to the result of the function random integer which the text book or anywhere that I can find online fails to explain how to do. Thank you. Hi, I am pretty much a noob when it comes to javascript. I am looking for a script that redirects random.html to 1 of 86 predefined pages, randomly. If someone could help me out, that would be great. Thanks for your help Hello, I need help again :3 Heres what I need: I need some javascript to random a script. Simply like this: The script randoms a number Based on the number it runs some lines of PHP script. Random 1-10 If 1 Then run this PHP script *PHP script* *PHP script* *PHP script* *PHP script* If 2 Then run this PHP script *Different PHP script* *Different PHP script* *Different PHP script* *Different PHP script* If 3 Then run this PHP Script *some more different PHP Script* *some more different PHP Script* *some more different PHP Script* *some more different PHP Script* If 4 etc etc etc Each bit of PHP Will be similar, but be different in some ways. There may be more compressed ways of doing this. But if it at all possible, I would like it in the way I wrote it above. For instance I dont want: Random 1-3 If 1 Run function 1 If 2 Run function 2 If 3 Run function 3 Function 3 *PHP Script* *PHP Script* *PHP Script* Function 1 *PHP Script* *PHP Script* *PHP Script* Function 2 *PHP Script* *PHP Script* *PHP Script* I will thank the best answer! This website is awesome and has answered so many of my questions! Thanks in advance! Random non-repeating images script. Hope this helps someone... you can see an example at http://www.empireelite.org/. Refresh and you'll see the PS3 boxarts on the top left will show randomly, with no repeats. In your html page in head tag Code: <style> img.boxart{ margin:0; border: none; display:block; float:left}</style> <script type="text/javascript" src="ps3boxart.js"></script> in body tag (place whereever in the body you want the pictures to show) Code: <script type="text/javascript"> randomorder(ps3ba, '') </script> In a seperate .js file in the same folder (this one I have as ps3boxart.js) Code: var ps3ba=new Array() ps3ba[0]='<a href="http://www.amazon.com/God-War-III-Playstation-3/dp/B000ZK9QCS/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261056951&sr=8-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/gow3.jpg" class="boxart" title="God of War III"></a>' ps3ba[1]='<a href="http://www.amazon.com/Heavy-Rain-Playstation-3/dp/B002CZ38KA/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059415&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/hr.jpg" class="boxart" title="Heavy Rain"></a>' ps3ba[2]='<a href="http://www.amazon.com/Killzone-2-Playstation-3/dp/B000FQBF1M/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059510&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/kz2.jpg" class="boxart" title="Killzone 2"></a>' ps3ba[3]='<a href="http://www.amazon.com/LittleBigPlanet-Game-Year-Playstation-3/dp/B002ELCUUG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059556&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/lbp.jpg" class="boxart" title="LittleBigPlanet"></a>' ps3ba[4]='<a href="http://www.amazon.com/Metal-Gear-Solid-Patriots-Playstation-3/dp/B000FQ2D5E/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059605&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/mgs4.jpg" class="boxart" title="Metal Gear Solid 4"></a>' ps3ba[5]='<a href="http://www.amazon.com/Ratchet-Clank-Future-Crack-Playstation-3/dp/B00275A7LI/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059662&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rcfacit.jpg" class="boxart" title="Ratchet & Clank Futu A Crack In Time"></a>' ps3ba[6]='<a href="http://www.amazon.com/Resistance-Fall-Man-playstation-3/dp/B000JLIXIG/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059703&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/rfom.jpg" class="boxart" title="Resistance: Fall of Man"></a>' ps3ba[7]='<a href="http://www.amazon.com/Uncharted-Drakes-Fortune-Playstation-3/dp/B000UW21A0/ref=sr_1_2?ie=UTF8&s=videogames&qid=1261059750&sr=1-2"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc.jpg" class="boxart" title="Uncharted: Drakes Fortune"></a>' ps3ba[8]='<a href="http://www.amazon.com/Uncharted-2-Among-Thieves-Playstation-3/dp/B001JKTC9A/ref=sr_1_1?ie=UTF8&s=videogames&qid=1261059750&sr=1-1"><img src="http://www.empireelite.org/images/boxart/ps3/mini/uc2.jpg" class="boxart" title="Uncharted 2: Among Thieves"></a>' function randomorder(targetarray) { var randomorder=new Array() var the_one var z=0 for (i=0;i<targetarray.length;i++) randomorder[i]=i while (z<targetarray.length) { the_one=Math.floor(Math.random()*targetarray.length) if (targetarray[the_one]!="_selected!"){ document.write(targetarray[the_one]) targetarray[the_one]="_selected!" z++ } } } Then obviously, you would use this as a baseline and change your .js file name to whatever your pictures are for, like ads.js or whichever. Change the links in ahref to whereever you want each page to link. Change the image locations in img src to whereever your images are saved. Remember, where it says var z=0... this is where you hide extra random images. For example, my 200px cell only fits 9 22px wide images (they equal 198px). I only have 9 in my ps3 boxart image folder. If I want 50 in there... I would upload the pics to the folder with the other ones, add them to the list in the .js file. Such as ps3ba[9]=, ps3ba[10]=, etc. up to [49] (49 + 1 for [0] = 50). Then since I can only fit 9 in my cell, I would have to change the variable to var z=41 (to hide 41 of them and only show 9). Hope this helps somebody. Good luck. Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here. Code: function fade(obj, duration, toggle) { steps = 1000; elem = document.getElementById(obj); function fadeIn() { for(var i = 0; i <= 1; i+=(1/steps)) { setTimeout("elem.style.opacity = "+ i +"", i * duration); setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration); } } function fadeOut() { for(var i = 0; i <= 1; i+=(1/steps)) { setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration); setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration); } } /* One for Fade in and anything will be fade out*/ if(toggle == 1) { fadeIn(); } else { fadeOut(); } } Thanks, Jon W I need to assign a key in the javascript to actually make the javascript work,. I have a bookmark in chrome , a javascript , which actually works when clicked on it .,. but how can i edit it so that i can actually make it work on click a key or combination of keys. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. Thanks in advance ., Nani Hi, I have a Javascript which I'm using to display one of four Flash SWF files randomly. These need to be actually displayed twice, so I'm basically calling the script twice. This works great aside from one thing- occasionally the same movie appears in both scripts, for example the first instance picks movie 3 of 4 and th second instance does the same. What I need is to somehow make sure that if the first instance of the script picks movie x then the second script will pick any movie EXCEPT movie x. This is the script as it stands: Code: <script language="JavaScript"> // Generate a Random Number var randomnumber = Math.round(Math.random()*3); // Select a swf and execute the corresponding function if (randomnumber == 1) {movie1();} else if (randomnumber == 2) {movie2();} else if (randomnumber == 3) {movie3();} else {movie4();} //Functions to write out the correct flash movie resource. function movie1(){ document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/1.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/1.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>") } function movie2(){ document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/2.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/2.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>") } function movie3(){ document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/3.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/3.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>") } function movie4(){ document.write("<object classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0\" width=\"120\" height=\"285\"><param name=movie value=\"assets/images/ads/hotels/4.swf\"><param name=quality value=high><embed src=\"assets/images/ads/hotels/4.swf\" quality=high pluginspage=\"http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash\" type=\"application/x-shockwave-flash\" width=\"120\" height=\"285\"></embed></object>") } </script> I have to create a website as a project for my university course. Said course has nothing at all to do with computers really so it's really throwing us into the deep end as the majority of us have/had no interest in this particular field. Regardless, I am creating a website that uses the Random Quote Generator Javascript that I copied from the Hotscripts website. The code details are below and my question is: is there any way I could change the formatting for each quote? For example, change quote 1 to be, say, yellow or bold and change quote 3 to be aligned right and blue? I mainly want to change the colour for each quote but having any other info on how to format it would be really helpful. Code: var quotes=new Array(); quotes[0] = "This is quote 1."; quotes[1] = "This is quote 2."; quotes[2] = "This is quote 3."; var q = quotes.length; var whichquote=Math.round(Math.random()*(q-1)); function showquote(){document.write(quotes[whichquote]);} showquote(); Also if you could put it into total idiot-speak for me I'd be oh so grateful. hi I'm just new to java and I'm trying to write a script that will shuffle the information in a array with no gaps and no repeats. below is that code that i have so far. thanks ben [CODE] //constants SWAPS_TO_BE_MADE = 30; //variables var myArray = new Array('Ace',2,3,4,5,6,7,8,9,10,'Jack','Queen','King'); // the array that entities will be shuffled from var temp = 0; var outPutArray = new Array (12); var arrayLength = myArray.length; var index = 0; var swapIndex = 0; var self_swaps = 0; var counter = 0; temp=myArray[swapIndex] document.write('<h1>Array shuffling</h1>'); document.write('<p>Before shuffle: '+myArray+'</p>'); //loop while(counter < SWAPS_TO_BE_MADE) { index =Math.floor(Math.random()*arrayLength); swapIndex =Math.floor(Math.random()*arrayLength); var index_value = index; var range = 1; myArray.splice(index_value,range,'spilced'); outPutArray[swapIndex] = index; if(index == swapIndex) { self_swaps++; } counter++; index = (index + 1 % arrayLength); swapIndex= (swapIndex + 1 % arrayLength); } document.write('<p>After shuffle: '+outPutArray+'</p>'); document.write('<p>After shuffle: '+myArray+'</p>'); [ICODE] This script isnt working. Im not sure what im doing wrong. forgive me i havent programmed in javascript before. titles.js Code: <script type="text/javascript" language="javascript"> <!--// function random_Title(){ if (parseInt(navigator.appVersion) >= 4) { var num = 3; var rantitle = new Array(num+1); rantitle[1] = "Random Title1"; rantitle[2] = "Random Title1"; rantitle[3] = "Random Title1"; ranNumber = parseInt(num * Math.random() + 1); document.title = rantitle[ranNumber]; } //--> } </script> html page Code: <html> <head> <script type='text/javascript' src='http://www.flashmajic.com/Google/titles.js'></script> <script> document.title = random_Title() ; </script> </head |