|
JavaScript - Scrolling Image Script Issues
I'm building a website with scrolling images at the top, I managed to find some code which seemed to work fine but then when I uploaded it to the server there were suddenly huge gaps between the images.
www.s-remy.com/B/index.html here's the code for the scrolling Code: <script type="text/javascript">
<!--
// ********** User Defining Area **********
data=[
["scroll1.png","",""],
["scroll3.png","",""]
// no comma at end of last index
]
imgPlaces=40 // number of images visible
imgWidth=50 // width of the images
imgHeight=81 // height of the images
imgSpacer=4 // space between the images
dir=0 // 0 = left, 1 = right
newWindow=0 // 0 = Open a new window for links 0 = no 1 = yes
// ********** End User Defining Area **********
moz=document.getElementById&&!document.all
step=1
timer=""
speed=50
nextPic=0
initPos=new Array()
nowDivPos=new Array()
function initHIS3(){
for(var i=0;i<imgPlaces+1;i++){ // create image holders
newImg=document.createElement("IMG")
newImg.setAttribute("id","pic_"+i)
newImg.setAttribute("src","")
newImg.style.position="absolute"
newImg.style.width=imgWidth+"px"
newImg.style.height=imgHeight+"px"
newImg.style.border=0
newImg.alt=""
newImg.i=i
newImg.onclick=function(){his3Win(data[this.i][2])}
document.getElementById("display_area").appendChild(newImg)
}
containerEL=document.getElementById("his3container")
displayArea=document.getElementById("display_area")
pic0=document.getElementById("pic_0")
containerBorder=(document.compatMode=="CSS1Compat"?0:parseInt(containerEL.style.borderWidth)*2)
containerWidth=(imgPlaces*imgWidth)+((imgPlaces-1)*imgSpacer)
containerEL.style.width=containerWidth+(!moz?containerBorder:"")+"px"
containerEL.style.height=imgHeight+(!moz?containerBorder:"")+"px"
displayArea.style.width=containerWidth+"px"
displayArea.style.clip="rect(0,"+(containerWidth+"px")+","+(imgHeight+"px")+",0)"
imgPos= -pic0.width
for(var i=0;i<imgPlaces+1;i++){
currentImage=document.getElementById("pic_"+i)
if(dir==0){imgPos+=pic0.width+imgSpacer} // if left
initPos[i]=imgPos
if(dir==0){currentImage.style.left=initPos[i]+"px"} // if left
if(dir==1){ // if right
document.getElementById("pic_"+[(imgPlaces-i)]).style.left=initPos[i]+"px"
imgPos+=pic0.width+imgSpacer
}
if(nextPic==data.length){nextPic=0}
currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i=nextPic
currentImage.onclick=function(){his3Win(data[this.i][2])}
nextPic++
}
scrollHIS3()
}
timer=""
function scrollHIS3(){
clearTimeout(timer)
for(var i=0;i<imgPlaces+1;i++){
currentImage=document.getElementById("pic_"+i)
nowDivPos[i]=parseInt(currentImage.style.left)
if(dir==0){nowDivPos[i]-=step}
if(dir==1){nowDivPos[i]+=step}
if(dir==0&&nowDivPos[i]<= -(pic0.width+imgSpacer) || dir==1&&nowDivPos[i]>containerWidth){
if(dir==0){currentImage.style.left=containerWidth+imgSpacer+"px"}
if(dir==1){currentImage.style.left= -pic0.width-(imgSpacer*2)+"px"}
if(nextPic>data.length-1){nextPic=0}
currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i=nextPic
currentImage.onclick=function(){his3Win(data[this.i][2])}
nextPic++
}
else{
currentImage.style.left=nowDivPos[i]+"px"
}
}
timer=setTimeout("scrollHIS3()",speed)
}
function stopHIS3(){
clearTimeout(timer)
}
function his3Win(loc){
if(loc==""){return}
if(newWindow==0){
location=loc
}
else{
//window.open(loc)
newin=window.open(loc,'win1','left=430,top=340,width=300,height=300') // use for specific size and positioned window
newin.focus()
}
}
// add onload="initHIS3()" to the opening BODY tag
// -->
I'm not very familiar with JavaScript so I can't find any issues with it. I've tried changing the imgspace value but it doesn't seem to work? Similar TutorialsHello there, I am trying to incorporate Lightbox2's image gallery script into my site but I'm having difficulty. Here's where I'm accessing the script from: http://www.huddletogether.com/projects/lightbox2/ Here is my skeleton website: http://www.labellepetraie.com/photos The image thumbs are showing up but the larger images are not. I changed the 'body onload' html tag to window.onload as I'm using two different javascripts on this page and I don't want them to conflict. I've also added initLightbox() so I don't know what's wrong! Is there just an issue with the images or is there something wrong with the script. Please help! Let me know if you need additional info. A million thanks! <script type="text/javascript"> window.onload = function(){ // use this instead of <body onload …> MM_preloadImages(MM_preloadImages('../3websites/home4.jpg','../3websites/amenities1.jpg','../3websites/inquiry1.jpg','../3websites/rates1.jpg','../3websites/photos1.jpg'); initLightbox()") } </script> Hello All! Brand new to Javascript here, so please forgive my basic question. I did a search but did not find exactly what I was looking for. My web site has a splash page with a large image broken into pieces and displayed in a table. I want to preload the images so the user doesn't see the table slowly "fill in" when using a slower internet connection. I have written a basic script, using the basic format of: <SCRIPT LANGUAGE="JavaScript"> Image1= new Image(50,60) Image1.src = "something.gif" Image2 = new Image(70,80) Image2.src = "somethingelse" Image3 = new Image(90,100) Image3.src = "lastsomething.gif" </SCRIPT> and saved it as a .js file and placed it in my sites root directory. Just to be safe, I've placed the images there too. (do I have to do that though?) Still, it does not seem to be working. Below is the head from my splash page. Have I missed somthing here? I thought that by putting the script reference in the head, the images would be loaded before the table came up, but such does not seem to be the case. Any help would be most appreciated. Thanks! <html> <head> <title>Finish Well Endurance</title> <meta name="generator" content="Namo WebEditor"> <link type="text/css" rel="stylesheet" href="http://www.fwe1.net/css/index.css"> <script type="text/javascript"language="javascript"src="loadimages.js"></script> </head> <body bgcolor="#464646" text="black" link="#464646" vlink="#464646" alink="#464646"> <table border="0" align="center" cellpadding="0" cellspacing="0" width="600"> Hi. I'm very new to creating webpages. I came across this guide for making tooltips online (here's the link:http://sixrevisions.com/tutorials/ja...cript_tooltip/) I love the look of the tooltip. The problem I'm having is, when I scroll down, the tooltip stays at the top of the page. Does anyone have any idea why? Hi, I am looking for a script for a scrolling DIV with the following features: 1. DIV can be scrolled vertically using mousewheel/trackpad/finger on iPad 2. Up/Down buttons which scroll slowly on hover and fast on click 3. The DIV to be scrolled will contain an audio playlist, generated by jPlayer, written in javascript. This script has a DIV for the currently playing track, and can launch functions on track change. I would like the scrolling DIV to scroll automatically to the currently playing song when the track changes. Any help to get me going on this would be appreciated, Thanks Nick My bad if this was answered somewhere else. I did search the forums but was unable to locate an answer (It is kind of a specific question) I have an odd problem. I have the following clock script: Code: function Clock()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add lead zeros to numbers less than 10
h=checkTime(h);
m=checkTime(m);
s=checkTime(s);
document.getElementById('Clock').innerHTML=h+":"+m+":"+s;
t=setTimeout('Clock'), 500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
Loaded at the page load and assigned to a div: Code: <body onLoad = "Clock();"> <!--the clock--> <div align = "right" id = "Clock"></div> With this style applied: Code: #Clock {font-size: 30pt;
position: fixed;
top: 0px;
right: 0px;
background: #ffffff;
z-index: 3;
}
The problem I've run into is this: In Chrome, whenever I scroll down, even by just one tap/click of the down arrow, the clock stops updating the time in, pardon the pun, real-time. But the second I scroll completely to the top of the page, it goes back to counting. I tested in the current (as of Nov 20th 2010) versions of FireFox, Opera and IE9 and the only browser that seems to produce this problem is Chrome. Any ideas? Hi everyone, I'm curious if this is something simple. I'm working on a wordpress site using a plugin that is based off of the code from javascript kit called "highlighter scroller script". The plugin js is almost identical: http://javascriptkit.com/script/cut57.shtml What is causing it to wipe from left to right? I'm racking my brains trying to figure it out (and googling unsuccessfully it seems). All I'm trying to do is make it wipe instead from right to left. I'm sure it's something simple, but I don't know which variable to change. Can anyone point me in the right direction? THANKS! ***Solved***
hi i have the site xtcservers.co.uk and i have downloaded a script for a horizontal image scrolling box. i am not a very good coder and would appreciate some help. here is the code: Code: //Specify the slider's width (in pixels) var sliderwidth="300px" //Specify the slider's height var sliderheight="150px" //Specify the slider's slide speed (larger is faster 1-10) var slidespeed=1 //configure background color: slidebgcolor="#EAEAEA" //Specify the slider's images var leftrightslide=new Array() var finalslide='' leftrightslide[0]='<a href="http://"><img src="images/uploaded/_sfpg_data/thumb/" border=1></a>' //Specify gap between each image (use HTML): var imagegap=" " //Specify pixels gap between each slideshow rotation (use integer): var slideshowgap=9 at the part were you specify the images to use is there a way to use a folder of images insdead of specifying each one for it to scroll trough. also os there a way to center the scroll box if you have a look the box is to the left. thanks lee I have searched for information on this but so far no luck. site: http://www.brentpurton.com/TrueSteez go to the product page The problem: I have a set of images that have hover scrolling. The idea is that when you click on the thumbnail image at the bottom in the hover scroll area, a swap image behaviour will change the picture on the shirt. The real problem is that when I implement the swap image on the thumbnails and preveiw it. They no longer Hover Scroll, they just stay in 1 spot. They do however swap the image. here is what happens: http://www.brentpurton.com/TrueSteezSwap Any Help is apreciated. Thanks in advance I need to write a script that use cookies to keep in memory the user's preferences. First, a form to collect data. I need to know the name and second name of the user and his favorite color. After that, I need to valid all the values of the form, that is to say to be sure that they're not empty and that the color is a defined color. The form will be displayed at the first visit of the user then it will greet the user with a welcome message. Moreover, the background color will match the color that the user chose. The welcome message needs to be as follow: "Hi, Name secondName, Good morning! (if time is between 6am and 12), Good afternoon! (if time is between 12 and 6pm) or Good evening! (Between 6pm and 6am). Here's what I've done so far... What is colored in red is what I don't know what to write. 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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
function setCookie(firstNameCookie,nameCookie,colorCookie,valueCookie,DateExp)
{
strName = nameCookie;
strFirstName = firstNameCookie
strColor = colorCookie
strValue = valueCookie;
dateExpiration = DateExp;
var newCookie = strName+strFirstName+strColor+"="+ escape(strValue) +"; " + " path=/; " + "expires="+dateExpiration.toGMTString() +"; ";
window.document.cookie=newCookie;
}
function getCookieValue(firstname,name,color)
{
cookieFirstName = firstname;
cookieName = name;
cookieColor = color;
sCookieValue = document.cookie;
iCookieNameIndex = sCookieValue.indexOf(cookieFirstName,cookieName,cookieColor + "=");
if (iCookieNameIndex == -1)
{
return ("");
}
sCookieValue = sCookieValue.substring (iCookieNameIndex, sCookieValue.length);
iCookieValueIndex = sCookieValue.indexOf("=") + 1;
sCookieValue = sCookieValue.substring(iCookieValueIndex, sCookieValue.length);
indexFinCookie = sCookieValue.indexOf(" ");
if (indexFinCookie != -1)
{
sCookieValue = sCookieValue.substring (0, indexFinCookie);
}
sCookieValue = unescape(sCookieValue);
return sCookieValue;
}
var valueCookieName=getValeurCookie("name");
if(valueCookieName="");
{
}
var valueCookieFirstName=getValeurCookie("firstname");
if(valueCookieFirstName="");
{
}
var valueCookieColor=getCookieValue("color");
if(valueCookieColor="");
{
}
</SCRIPT>
</head>
<body>
<form name="nameFirstName">
<table>
<tr>
<td valign="top">
First Name :
<input type="text" name="firstname" value="">
</td>
</tr>
<tr>
<td valign="top">
Name :
<input type="text" name="name" value="">
</td>
</tr>
<tr>
<td valign="top">
What is your favorite color? :
</td>
<td>
<input name="white" type="radio" value="white">white<br>
<input name="blue" type="radio" value="blue">blue<br>
<input name="green" type="radio" value="green">green<br>
<input name="red" type="radio" value="red">red<br>
<input name="yellow" type="radio" value="yellow">yellow<br>
<input name="purple" type="radio" value="purple">purple<br>
</td>
</tr>
<tr>
<td>
<input type="button" name="bouton" Value="Submit" onClick="" >
</td>
</tr>
</table>
</form>
</body>
</html>
The second code is the part of the greeting message that shows a different greeting message depending on the time (ex.: Good morning "Firstname name", welcome to my site (if it's morning)). The tricky thing is I can't seem to figure out how to input it in the coding. Do I need to make another file and then SRC it? 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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript"> var now = new Date(); var hrs = now.getHours(); var msg = ""; if (hrs > 0) msg = "Mornin' Sunshine!"; // REALLY early if (hrs > 6) msg = "Good morning"; // After 6am if (hrs > 12) msg = "Good afternoon"; // After 12pm if (hrs > 17) msg = "Good evening"; // After 5pm if (hrs > 22) msg = "Go to bed!"; // After 10pm alert(msg); </script> </head> <body> </body> </html> I'm no coder, as you will soon discover. The web work I do is from a purely novice, even hobby standpoint and the sites I create and host are nothing more than favors for friends and acquaintances who have needed but have not had a presence on the web. This being explained, I am asking those with coding skills to please take a look at the site I've just completed for a little diner down the road. (They're just starting out and can't afford to pay a professional web designer and, unfortunately, are stuck with me.) The site is http://d-n-ddiner.com I'm the first to say that the mouseover sound would drive me crazy, but the guys who own the diner are enthusiastic and want it left as is. I have had to combine scripts in order to have the "black-and-white to color" image effect work simultaneously with sound. The sound script depends on uploaded files: soundmanager.js, soundcontroller.swf and sound-config.xml and its tags are found incorporated with each involved image, within the body. The image effects are just the result of playing around with bits and pieces I've seen, mucking about the Internet. Its script is found within the head and also within the body, in each involved image's area, in mouseover, mouseout and, of course when specifying "name=" (such as Img_1). I opted for providing the sound in this manner because I am able to use an .mp3 file, rather than having to weigh through the pros and cons of .au versus .wav, etc., and the fickle nature of different browsers and plug-in crashes. After having many test the site (friends with varying operating systems and browsers) it appears that this mp3 solution makes the mouseover sound available to a broader range of users. Success has been achieved with Firefox, Safari, Netscape, Omniweb and Chrome. However, Internet Explorer and Opera seem to be the holdouts for both Mac and PC users. All this brings me to two requests: Would someone take a look at the site (particularly with Firefox) to determine if something might be done to help the page load more smoothly? Secondly, is there some sleight-of-hand that might be incorporated into the script to help IE and Opera detect the mouseover sound or do you consider these two browsers essentially not worth the bother? I am attaching a zip of the sound files I mentioned. The mp3 is not included but any mp3 snippet would do for testing, provided the sound config file is edited to reflect its file name. My primary concern is smooth page-loading; the IE and Opera issue is of less importance. Thank you for your patience and for any assistance you would offer. OK, so I created my nav bar in Photoshop. I have a off image and on image. So, now I create a js file that displays the on image when they are hovering over that item, etc. Problem is, the js file does it for all images. For example, if the user hovers over the header banner, it tries to look for a different image. How can I update the following javascript to have it do that only in the nav bar. Code: window.onload=rolloverInit;
function rolloverInit( ) {
for ( var i=0; i<document.images.length; i++) {
if ( document.images[i].parentNode.tagName =="A" ) {
setupRollover( document.images[i]);
}
}
}
function setupRollover(thisImage) {
thisImage.outImage =new Image();
thisImage.outImage.src= thisImage.src;
thisImage.onmouseout=function() {
this.src=this.outImage.src;
}
thisImage.overImage = new Image();
thisImage.overImage.src= "images/" + thisImage.id + "_on.jpg";
thisImage.onmouseover= function( ) {
this.src=this.overImage.src;
}
}
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 Hi, I'm fairly new to javascript, I created a javascript image gallery using a tutorial found on web monkey. Please see below: Code: <script language="JavaScript" type="text/javascript">
<!--
var interval = 1500;
var random_display = 0;
var image_dir = "images/exhibition/"
var ImageNum = 0;
imageArray = new Array();
imageArray[ImageNum++] = new imageItem(image_dir + "exhibition-sealskinz.png");
imageArray[ImageNum++] = new imageItem(image_dir + "exhibition-orchard.png");
var number_of_image = imageArray.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function randNum(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
ImageNum = randNum(0, number_of_image-1);
}
else {
ImageNum = (ImageNum+1) % number_of_image;
}
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}
function getPrevImage() {
ImageNum = (ImageNum-1) % number_of_image;
var new_image = get_ImageItemLocation(imageArray[ImageNum]);
return(new_image);
}
function prevImage(place) {
var new_image = getPrevImage();
document[place].src = new_image;
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
timerID = setTimeout(recur_call, interval);
}
// -->
</script>
However unfortunately there are two issues, one is IE6 is coming up with javascript errors and IE7 gets an error when you click the previous button on the first image. The buttons look like this: Code: <div id="left-arrow-container"><a href="#" onClick="prevImage('rImage'); clearTimeout(timerID)"><img src="images/left-arrow.png" alt="left arrow" name="leftarrow" width="58" height="37" border="0" id="leftarrow" /></a></div>
<div id="see-the-whole-project"> see the whole project</div>
<div id="right-arrow-container"><a href="#" onClick="rotateImage('rImage'); clearTimeout(timerID)"><img src="images/right-arrow.png" alt="right arrow" name="rightarrow" width="58" height="36" border="0" id="rightarrow" /></a></div>
Being new to javascript I don't know how to get round these issues so if anyone could advise me I would really appreciate it. Thanks Gary So i purchased a template from template monster for wordpress. http://www.templatemonster.com/demo/28861.html On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link. My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain. --------------------------------------------------------------------- <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> ------------------------------------------------------------------------ Full code below <div id="thumbs" class="navigation"> <ul class="thumbs noscript"> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" /> </a> <div class="caption"> <div class="indent1">in grey</div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" /> </a> <div class="caption"> <div class="indent1">in grey </div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li class="last"> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> </ul> </div> </div> </div> I'm trying to create a script that will allow me to shuffle a number of images saved in the same folder as the HTML file using the script, and then write them to the page. I have the whole script/page written out but it doesn't seem to be working and I can't divine why. If anyone could look at this code and tell me what's wrong with it I'd really appreciate it: Code: <html>
<head>
<title>dripppz</title>
<script language="JavaScript">
private function shuffle(a:Array):void {
for (var i:uint = 0; i < a.length; i++) {
var tmp:Object = a[i];
var randomNum:Number = Math.round(Math.random() * (a.length-1));
a[i] = a[randomNum];
a[randomNum] = tmp;
}
}
var Image:Array = ('dripppz1.gif', 'dripppz2.gif', 'dripppz3.gif', 'dripppz4.gif', 'dripppz5.gif', 'dripppz6.gif', 'dripppz7.gif', 'dripppz8.gif', 'dripppz9.gif', 'dripppz10.gif', 'dripppz11.gif', 'dripppz12.gif', 'dripppz13.gif', 'dripppz14.gif', 'dripppz15.gif', 'dripppz16.gif', 'dripppz17.gif', 'dripppz18.gif', 'dripppz19.gif', 'dripppz20.gif', 'dripppz21.gif', 'dripppz22.gif', 'dripppz23.gif', 'dripppz24.gif', 'dripppz25.gif', 'dripppz26.gif', 'dripppz27.gif', 'dripppz28.gif', 'dripppz29.gif', 'dripppz30.gif', 'dripppz31.gif', 'dripppz32.gif');
shuffle(Image);
trace(Image);
function showImages(){
document.write('<img src="'+Image[0]+'" />');
document.write('<img src="'+Image[1]+'" />');
document.write('<img src="'+Image[2]+'" />');
document.write('<img src="'+Image[3]+'" />');
document.write('<img src="'+Image[4]+'" />');
document.write('<img src="'+Image[5]+'" />');
document.write('<img src="'+Image[6]+'" />');
document.write('<img src="'+Image[7]+'" />');
document.write('<img src="'+Image[8]+'" />');
document.write('<img src="'+Image[9]+'" />');
document.write('<img src="'+Image[10]+'" />');
document.write('<img src="'+Image[11]+'" />');
document.write('<img src="'+Image[12]+'" />');
document.write('<img src="'+Image[13]+'" />');
document.write('<img src="'+Image[14]+'" />');
document.write('<img src="'+Image[15]+'" />');
document.write('<img src="'+Image[16]+'" />');
document.write('<img src="'+Image[17]+'" />');
document.write('<img src="'+Image[18]+'" />');
document.write('<img src="'+Image[19]+'" />');
document.write('<img src="'+Image[20]+'" />');
document.write('<img src="'+Image[21]+'" />');
document.write('<img src="'+Image[22]+'" />');
document.write('<img src="'+Image[23]+'" />');
document.write('<img src="'+Image[24]+'" />');
document.write('<img src="'+Image[25]+'" />');
document.write('<img src="'+Image[26]+'" />');
document.write('<img src="'+Image[27]+'" />');
document.write('<img src="'+Image[28]+'" />');
document.write('<img src="'+Image[29]+'" />');
document.write('<img src="'+Image[30]+'" />');
document.write('<img src="'+Image[31]+'" />');
}
</script>
</head>
<body bgcolor="#ffffff">
<script language="JavaScript">
showImages();
</script>
</body>
</html>
I want to make a script selecting electronics category in this site http://eu.redeem-it.net/boutique.php A friend told me to use getElementsByClass but I still cant do it. I've got an old school script running a static slide show, but it's not showing the ninth image - regardless of what the image is (ruling out a typo in my image file). Here's the page and script: http://www.agwprefinished.com/handpainted.asp Code: <SCRIPT LANGUAGE="JavaScript">
<!--
/*
Script by FPMC at http://jsarchive.8m.com
Submitted to JavaScript Kit (http://javascriptkit.com)
For this and 400+ free scripts, visit http://javascriptkit.com
*/
//set image paths
src = [ "images/faux-stone.jpg",
"images/dining-inlay.jpg",
"images/dining-inlay-detail.jpg",
"images/faux-inlaid-marble-limestone.jpg",
"images/faux-marble-inlay-manhattan.jpg",
"images/foyer-inlay.jpg",
"images/foyer-inlay-detail.jpg",
"images/weathered-grain-1.jpg",
"images/weathered-grain-detail.jpg",
"images/weathered-grain-2.jpg",
"images/weathered-grain-3.jpg",
"images/ebonized-oak.jpg",
"images/aged-oak.jpg",
"images/ebonized-oak-transition.jpg",
"images/sample.jpg",
"images/faux-marble-tile.jpg",
"images/faux-marble-tile-2.jpg",
"images/faux-marble-medallion.jpg",
"images/metallic-1.jpg",
"images/metallic-2.jpg",
"images/painted-pattern-bath.jpg",
"images/painted-pattern-detail.jpg",
"images/faux-parkay-4.jpg",
"images/faux-parkay-3.jpg",
"images/faux-parkay-2.jpg",
"images/border-stencil-1.jpg",
"images/border-stencil-2.jpg",
"images/monogram.jpg",
"images/dining-stencil.jpg",
"images/reproduction-border.jpg",
"images/reproduction-border-detail.jpg",
"images/reproduction-hall.jpg",
"images/inlay-pattern-hall.jpg",
"images/modello-samples-1.jpg",
"images/modello-samples-2.jpg",
"images/pavlosk-inlay-imitation.jpg",
"images/st-peter-inlay.jpg",
]
//set corresponding urls
url = [""]
//set duration for each image
duration = 4;
//Please do not edit below
ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document["Ad_Image"].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout("switchAd()",duration*1000);
}
function doLink(){
location.href = url[ct];
} onload = function(){
if (document.images)
switchAd();
}
//-->
</SCRIPT>
Does anyone have a script, that can display a random image of the images I select?I'm going to use it for a type of captcha. I think this would be easier in javascript, so yes I am in the right section.
|
|||||||