|
JavaScript - How Can I Run Two Random Image Slideshows At The Same Time?
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. 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 Hi, This is my site at the moment in testing: http://whnpf.perdu.servertrust.com/ I have the ideal layout of my slides underneath the actual slide itself. My problem is, everytime I copy the code and place it in again, for some reason the slide goes to the next line and not next to the other slide. Here is my code for the current slide: <script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"></script> <script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"> </script> <style type="text/css"> .stepcarousel{ position: relative; /*leave this value alone*/ border: 1px solid GREY; overflow: scroll; /*leave this value alone*/ width: 313px; /*Width of Carousel Viewer itself*/ height: 262px; /*Height should enough to fit largest content's height*/ } .stepcarousel .belt{ position: absolute; /*leave this value alone*/ left: 0; top: 0; } .stepcarousel .panel{ float: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 0px; /*margin around each panel*/ width: 313px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */ } </style> <script type="text/javascript"> stepcarousel.setup({ galleryid: 'mygallery', //id of carousel DIV beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content autostep: {enable:true, moveby:1, pause:3000}, panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true}, defaultbuttons: {enable: true, moveby: 1, leftnav: ['/v/vspfiles/assets/images/backward.jpg', 80, 215], rightnav: ['/v/vspfiles/assets/images/forward.jpg', -135, 215]}, statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file'] }) </script> <div id="mygallery" class="stepcarousel"> <div class="belt"> <div class="panel"> <img src="/v/vspfiles/assets/images/HOTDEALS.jpg" /> </div> <div class="panel"> <img src="/v/vspfiles/assets/images/POPULAR.jpg" /> </div> <div class="panel"> <img src="/v/vspfiles/assets/images/HOTDEALS.jpg" /> </div> <div class="panel"> <img src="/v/vspfiles/assets/images/POPULAR.jpg" /> </div> <div class="panel"> <img src="/v/vspfiles/assets/images/HOTDEALS.jpg" /> </div> </div> </div> Any help would be greatly appreciated, thank you First of all I'd like to take the time to thank anyone who can assist me with this dilemma..... On the page I am designing I have 2 js slideshows. The first one slides images right to left and the second contains the caption for the image and fades in and out. Here is an example of the exact concept of what I'm trying to do: http://designsensory.com/ The problem I'm having is that the slides will not maintain the same timing and I'm not sure how to create a single user control that controls both slideshows simultaneously. I would really appreciate if someone could help me solve the issue or at least point me in the right direction (tutorials possibly?). Here is the JS code: Code: <script type="text/javascript">
var firstreel=new reelslideshow({
wrapperid: "myreel", //ID of blank DIV on page to house Slideshow
dimensions: [500, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["css/500_300/Dairy plant.jpg"], //["image_path", "optional_link", "optional_target"]
["css/500_300/slider-big.jpg", "http://en.wikipedia.org/wiki/Cave", "_new"],
["css/500_300/Hospital image.jpg"],
["css/500_300/Picture2.jpg"] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, pauseonmouseover:false},
orientation: "h", //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 800 //transition duration (milliseconds)
})
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [280, 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["css/images/Test1.png", "", "", ""],
["css/images/Test2.png", "", "_new", ""],
["css/images/Test3.png"],
["css/images/Test4.png", "", "", ""] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3500, cycles:0, wraparound:false, pauseonmouseover:false},
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 800, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
</script>
Once again, Thanks alot for any assistance Hi, I am new to Javascript, but am trying to work with a bit of script I found online to create a crossfade slideshow for my page. The problem I am having is that I want to have several slideshows on my page. On it's own, a single slideshow works fine but when I add a second (and do my best to hack the code with my limited knowledge) only one slideshow will work, or sometimes neither. I found the article from this site that explained about event conflict, but the example used looked quite a bit different to mine. Here is the js file I started with Code: window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init()
{
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000);
}
function so_xfade()
{
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0)
{
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);
}
else
{
setTimeout(so_xfade,50);
}
function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
This uses a couple of CSS files and then you just add a div=rotator on the html to add the object and then the images and links within that div. If anyone can help, or perhaps give me a better solution, I'd be most grateful. Thanks I just created a slideshow that is working (finally). I want to put a description beside the photos that is styled in the way I want it, but I can't seem to figure this out. For an example of what I want to finished slideshow to resemble, I found this website: www.equisearch.com. I like the features area on this website. Here is my code so far: Code: <html>
<head>
<script type="text/javascript">
// Modified for: http://codingforums.com/showthread.php?p=949514#post949514
var ImgPtr = -1; // -1 for first pass only
var BaseDirectory = 'http://s200.photobucket.com/albums/aa216/Jilldear/';
ImgArray = [ // format: ['imageName','Comments about image']
['pinto-1.jpg','<a class="duh" href="paintorpinto.html">Paint or Pinto?</a>'],
['shedding.jpg','<a class="duh" href="sheddingout.html">Shedding Out Tips</a>'],
['dewormer-1.jpg','<a class="duh" href="sampledchart.html">Sample Deworming Chart</a>'] // Note: No comma after last entry
];
var intervalAction;
function ShowSlide(slide_num) {
document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0];
document.getElementById('mypic').alt = ImgArray[slide_num][1];
document.getElementById('Caption').innerHTML = ImgArray[slide_num][1];
}
function slideshow() {
ImgPtr++;
ImgPtr = ImgPtr % ImgArray.length;
// document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr;
ShowSlide(ImgPtr);
}
onload = function() {
slideshow();
intervalAction = setInterval("slideshow()",3000);
}
</script>
</head>
<body>
<div style="width:300;text-align:left;margin-left:auto;margin-right:auto">
<div id="Caption" class="duh"></div>
<img src="http://i200.photobucket.com/albums/aa216/Jilldear/pinto-1.jpg" border="0" alt="Photobucket" id="mypic" name="mypic" alt="" border="0" height="300" width="398">
<br />
</div>
</body>
</html>
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 trying to run three continuous slideshows on the same page. The script I am currently using is written below. Can it be modified so I can run all three slides at once on the same page? <html> <head> <script type="text/javascript"> <!-- var image1=new Image() image1.src="firstcar.gif" var image2=new Image() image2.src="secondcar" var image3=new Image() image3.src="thirdcar.gif" //--> </script> </head> <body> <img src="firstcar.gif" name="slide" width="100" height="56" /> <script> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src") if (step<3) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> I am pretty new to JavaScript, so I apologize if this is a stupid mistake. I am using this code, but trying to have several slideshows on the page. I have set up two to test it, and one works while the other just displays a static image. What is the best way to do this? Do I need to repeat the script code in the head? Thanks in advance for any help.
Hi, I am wanting to do menus and image slideshows using javascript because my existing flash menus and slide shows no longer work on many newer devices. To save time learning all about Javascript, I purchased WoW Slider and Apycom Menus, two programs that do it all for you. Independantly both programs work perfectly, however if I use both programs together on the same website, as soon as I add my image slider it messes up my menu for that page. the menu item colours and bouncy effects when I do a mouseover on menu items no longer work correctly. Example http://www.dorset-self-catering.com note the menu working correctly on mouseover, then go to second page called "Information", this page also has a slideshow and if you now do a mouseover on the menu, you will see that all the nice properties no longer work. Is anyone able to offer some advice please. David Priest Hello here is my code that im dealing with and only second sliceshow works for me i need them both that would be working together please help me! thanks for any help here is my script <head> <title>Easy Slider jQuery Plugin Demo</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true, nextId: "slider1next", prevId: "slider1prev" }); }); </script> <link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" /> <link rel="stylesheet" type="text/css" href="leidyba/css/demo.css" /> <link rel="stylesheet" type="text/css" href="leidyba/css/styleleidyba.css" /> <link rel="stylesheet" type="text/css" href="leidyba/css/jquery.jscrollpane.css" media="all" /> <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Coustard:900' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' /> <div id="container"> <div id="header"> <h1>Easy Slider jQuery Plugin - Multiple sliders</h1> </div> <div id="content"> <div id="slider"> <ul> <li><a href="http://templatica.com/preview/30"><img src="slide/images/01.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/7"><img src="slide/images/02.jpg" alt="Css Template Preview" /></a></li> <li><a href="http://templatica.com/preview/25"><img src="slide/images/03.jpg" alt="Css Template Preview" /></a></li> </ul> </div> <div class="container"> <div id="ca-container" class="ca-container"> <div class="ca-wrapper"> <div class="ca-item ca-item-1"> <div class="ca-item-main"> <div class="ca-icon"></div> <h3>Knygų leidyba</h3> <h4> <span class="ca-quote">“</span> <span>The greatness of a nation and its moral progress can be judged by the way in which its animals are treated.</span> </h4> <a href="#" class="ca-more">plačiau...</a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <h6>Knygų leidyba</h6> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p>I am so happy, my </p> <p>When, while the </p> <p>She packed her .</p> </div> <ul> <li><a href="#">Read more</a></li> <li><a href="#">Share this</a></li> <li><a href="#">Become a member</a></li> <li><a href="#">Donate</a></li> </ul> </div> </div> </div> <div class="ca-item ca-item-2"> <div class="ca-item-main"> <div class="ca-icon"></div> <h3>Reklaminiai bukletai</h3> <h4> <span class="ca-quote">“</span> <span>I hold that the more </span> </h4> <a href="#" class="ca-more">plačiau...</a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <h6>Would you eat your dog?</h6> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p>I am so happy, my .</p> <p>When, while the </p> <p>She packed her </p> </div> <ul> <li><a href="#">Read more</a></li> <li><a href="#">Share this</a></li> <li><a href="#">Become a member</a></li> <li><a href="#">Donate</a></li> </ul> </div> </div> </div> </div> </div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="leidyba/js/jquery.easing.1.3.js"></script> <!-- the jScrollPane script --> <script type="text/javascript" src="leidyba/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="leidyba/js/jquery.contentcarousel.js"></script> <script type="text/javascript"> $('#ca-container').contentcarousel({ }); </script> </div> </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 =) 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 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, 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>
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 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, 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! 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 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>
|
|||||||