...

View Full Version : How to get images to change by themselves (JavaScript Problem)



electric_4_ever
10-15-2005, 04:51 PM
Hello everyone. Ok, here's the problem. Basically what I would like to happen is, is to have pictures set up, and when you click on a link a new window pops up (this part I already have done, it's the next part I need help with). Then the pictures that I have for my website, will start to scroll though themselves at timed intervals (say 2 - 3 seconds) and will continue to do so until the window is closed, so basically forever. Like I said before though, the pictures should change by themselves without user interaction and without the aid of buttons to change the pictures and such. I have been trying to get this right for some time now, and to no avial, nothing is working. I would extremely appreciate anyone's help, or for even someone to give me (or direct me to) the proper coding I should be using. Any help is appreciated. Thank you for your time.

- Cory :thumbsup:

P.S. If you do not understand something I've put, or need more information on the problem to help me, feel free to post a reply, or if you would like a quicker response from me, you can reach me at cdallin_77@hotmail.com Thanks once again. :)

rlemon
10-15-2005, 07:44 PM
post what you have now and i'll help.

electric_4_ever
10-15-2005, 09:21 PM
Ok, well here is the coding that I am using. For some reason though, the pictures will not rotate past the 9th picture, for the 10th, 11th, and 12th, nothing happens. thats really the only problem that I need fixed. Thanks. If you need any more info, let me know :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">


<HTML>
<HEAD>
<CENTER>

<script language="javascript">
<!-- window =
window.moveTo(200, 10)
window.resizeTo(600, 710)
//-->
</script>

<TITLE>Pantera In Concert With Slayer</TITLE>
<script language="JavaScript">
<!-- hide from other browsers

//Pictures to switch in between

var Rollpic1 = "Pic1.jpg";
var Rollpic2 = "Pic2.jpg";
var Rollpic3 = "Pic3.jpg";
var Rollpic4 = "Pic4.jpg";
var Rollpic5 = "Pic5.jpg";
var Rollpic6 = "Pic6.jpg";
var Rollpic7 = "Pic7.jpg";
var Rollpic8 = "Pic8.jpg";
var Rollpic9 = "Pic9.jpg";
var Rollpic10 = "Pic10.jpg";
var Rollpic11 = "Pic11.jpg";
var Rollpic12 = "Pic12.jpg";

//Start at the what pic:
var PicNumber=1;
//Number of pics:
var NumberOfPictures=12;
//Time between pics switching in secs
var HowLongBetweenPic=3;

//SwitchPic Function
function SwitchPic(counter){

if(counter < HowLongBetweenPic){

counter++;

//DEBUG in the status bar at the bottom of the screen
window.status="Switch picture at 3 : "+counter+" PicNumber: "+PicNumber+" ";

//Display pic in what <IMG> tag roll is what I called the image
document.roll.src = eval("Rollpic" + PicNumber);

//function calls itself
CallSwitchPic=window.setTimeout("SwitchPic("+counter+")",1500);

}

else{
//if its not the last picture goto the next picture
if(PicNumber < NumberOfPictures){
PicNumber++;
SwitchPic(0);
}
//its the last picture go to the first one
else{
PicNumber=1;
SwitchPic(0);
}

}

}
// Stop hiding from old browsers -->
</script>
</HEAD>

<BODY onload="SwitchPic(0)">


<img src="1.jpg" border="0" name="roll">

</script>
</CENTER>
</BODY>
</HTML>

Mr J
10-15-2005, 11:49 PM
Try this


<HTML>
<HEAD>

<TITLE>Pantera In Concert With Slayer</TITLE>

<script type="text/javascript">
<!--

//Pictures to switch in between
var Rollpic1 = "Pic1.jpg";
var Rollpic2 = "Pic2.jpg";
var Rollpic3 = "Pic3.jpg";
var Rollpic4 = "Pic4.jpg";
var Rollpic5 = "Pic5.jpg";
var Rollpic6 = "Pic6.jpg";
var Rollpic7 = "Pic7.jpg";
var Rollpic8 = "Pic8.jpg";
var Rollpic9 = "Pic9.jpg";
var Rollpic10 = "Pic10.jpg";
var Rollpic11 = "Pic11.jpg";
var Rollpic12 = "Pic12.jpg";


var speed=2 //Time between pics switching in secs
var NumberOfPictures=12 //Number of pics:

var PicNumber=1

function SwitchPic(){

document.roll.src = window["Rollpic" + PicNumber]

PicNumber++

if(PicNumber > NumberOfPictures){
PicNumber=1
}


CallSwitchPic=setTimeout("SwitchPic()",speed*1000)
}

window.moveTo(200, 10)
window.resizeTo(600, 710)

//-->
</script>
</HEAD>
<BODY onload="SwitchPic()">

<CENTER>

<img src="1.jpg" border="0" name="roll">


</CENTER>

</BODY>
</HTML>

electric_4_ever
10-16-2005, 05:04 AM
ya, that coding didn't work for some reason. Thanks all the same though.

Nightfire
10-16-2005, 05:08 AM
Not that good with javascript, but wouldn't it make more sense to put the images in an array?

Mr J
10-16-2005, 09:37 AM
ya, that coding didn't work for some reason. Thanks all the same though.

Not a very helpful reply, how exactly did it not work

I tried it in IE6, Mozilla, Firefox, and NS7

It is more common to use an array than ordinal numbered variables and would be something like this


<HTML>
<HEAD>

<TITLE>Pantera In Concert With Slayer</TITLE>

<script type="text/javascript">
<!--

Rollpic= new Array()

Rollpic[0] = "Pic1.jpg";
Rollpic[1] = "Pic2.jpg";
Rollpic[2] = "Pic3.jpg";
Rollpic[3] = "Pic4.jpg";
Rollpic[4] = "Pic5.jpg";
Rollpic[5] = "Pic6.jpg";
Rollpic[6] = "Pic7.jpg";
Rollpic[7] = "Pic8.jpg";
Rollpic[8] = "Pic9.jpg";
Rollpic[9] = "Pic10.jpg";
Rollpic[10] = "Pic11.jpg";
Rollpic[11] = "Pic12.jpg";


var speed=1 //Time between pics switching in secs

var PicNumber=0

function SwitchPic(){

document.roll.src = Rollpic[PicNumber]

PicNumber++

if(PicNumber == Rollpic.length){
PicNumber=0
}


CallSwitchPic=setTimeout("SwitchPic()",speed*1000)
}

window.moveTo(200, 10)
window.resizeTo(600, 710)

//-->
</script>
</HEAD>
<BODY onload="SwitchPic()">

<CENTER>



<img src="Pic1.jpg" border="0" name="roll">


</CENTER>

</BODY>
</HTML>

rlemon
10-16-2005, 09:19 PM
I have a nice script that not only scroll through the images, it fades between them.

seen here @ www.rlemon.com (webdesign)

electric_4_ever
10-16-2005, 10:01 PM
ok, the coding is not working for some reason. none of it. none of the pictures show up now. in the coding that I supplied, pictures 1 through 9 will show up and scroll through themselves like they should. all i need is someone to help make the coding work so that picture #'s 10,11, and 12, will show up and scroll through with the rest of the sequence. all thats happening is when it gets to #'s 10, 11 and 12, it just stays blank, and when their "turn" for "showing up" is over, it goes back to the beginning of the loop and starts again. which is what its supposed to do, its just, like i said, 10,11,and 12, wont show up.

Mr J
10-17-2005, 02:57 PM
Try the files in the attachment

rlemon
10-17-2005, 03:46 PM
ok let me extract the code from my JS file for the site and i'll post it.
Note, it looks like i've lost the hard copy of it, so this copy will be formatted ugly (i.e i removed whitespace to save room).

rlemon
10-17-2005, 04:10 PM
ok, here it is. include this code exactly where i tell you too:

in the header:



<style type="text/css" media="all">

#photoholder { width:153px; height:130px; background:#fff url('res/loading.gif') 100% 100% no-repeat;}
#thephoto { width:153px; height:130px; border: 1px solid #000000; z-index: 1; position: absolute;}
#thebackground { z-index: 0; width:153px; height:130px; border: 1px solid #000000;}

</style>



The next peice of code is optional. it is the image preloader script i got from DreamWeaver. it is pretty simple and i'm sure you could have found it somewhere else. but here it is:




<SCRIPT language="javascript">
<!--
function MM_preloadImages() {
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];}}
}
//-->
</SCRIPT>



The following is the gallery functions. this must also go in the header:




<script language="Javascript" type="text/javascript">

// IMAGE SCROLLER
var img = new Array('image1.jpg','image1.jpg','image3.jpg','image4.jpg','EOF');
var current = 0; // start image
var imgPath = "path/to/Image/";
var previous = "null";
var to;
var isLoading = 0;
var looping = 1;
function run_gal(interval, loopCount){
if(looping <= loopCount){
next_img();
looping++;
window.setTimeout(function() {run_gal(interval, loopCount)}, (interval*1000));
} else {
looping = 0;
}
}

function next_img() { if(isLoading == 0){ imageId = 'thephoto'; backgroundId = 'thebackground'; bg = document.getElementById(backgroundId); image = document.getElementById(imageId); if(current >= 1){if(img[current] != "EOF"){previous = (current-1);} else { previous = (current-1); current = 0;}}
if(previous == "null"){previous = 0;} else {bg.src=imgPath+img[previous];} image.src=imgPath+img[current]; current++;
setOpacity(image, 0); image.style.visibility = 'visible'; fadeIn(imageId,0);}
return;}
function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; obj.style.filter = "alpha(opacity:"+opacity+")"; obj.style.KHTMLOpacity = opacity/100; obj.style.MozOpacity = opacity/100; obj.style.opacity = opacity/100;}
function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 10; toRate = 50; if(current == 0){ toRate = 0;}
to = setTimeout("fadeIn('"+objId+"',"+opacity+")", 50); isLoading = 1;} else { isLoading = 0;}
}
}

</script>



configuring of the code above:

the only things you should need to alter in the JS is the config i have setup:



var img = new Array('image1.jpg','image1.jpg','image3.jpg','image4.jpg','EOF');

The image array is where all the images you will be scrolling through will be stored. The image names must not include their directory, that is defined below. Example, if the image is stored in "images/image1.gif" in the array you would enter "image1.gif".
Also note, the array must end with the value 'EOF' (end of file). i know this probably isn't the best way to do this, but the image scroller was eventually spossed to have controls to it, so i set it up this way... so for simplicity sake, just make sure the last array value is 'EOF'



var current = 0; // start image

This is the image position you wish to start on, generally this should be left as '0' (remember, the array keys start at 0 not 1).



var imgPath = "path/to/Image/";

This is the path to the images directory. Do not include the entire url if you do not need too. If the images are stored in a folder from the root a simple "folderName/" will work. Note, there must be a trailing slash on this! i.e "folderName" is incorrect, "folderName/" will work.



var previous = "null";
var to;
var isLoading = 0;
var looping = 1;

The rest of this code should not be changed. From what you have written it should be fine as is.


The last two things you will need (one if you did not include the image preloader), is the init call from the body onload and the physical html for the gallery.
First we will do the call to the function.

in the body tag add the following attributes.



onLoad="setTimeout(function(){run_gal('5','99')},1000)"

you will notice two values are being passed to the function in this call. if you look at the function you will see this is the interval (for the image scrolling) in seconds, and the number of passes you want it to do. Right now the image will change ever 5 seconds and it will pass through 99 times (repeating images where applicable). This is nice if you want to only show a selective number of images for say, a instructions slideshow? if you want this to appear endless just set the second number to 99 (like what i have done).

Now, if you wanted to preload these images (to allow them to load faster), you will need to change the attribute above slightly, and append the following :



onLoad="setTimeout(function(){run_gal('5','99')},1000); MM_preloadImages('path/to/image1.jpg','path/to/image1.jpg','path/to/image3.jpg','path/to/image4.jpg');"


Note, thisis where you must include the path to the images. Not the url, the path. I.E
www.yourDomain.com/images/image1.jpg
is WRONG

images/image1.jpg
is RIGHT


and now for the html:




<div id='photoholder'>
<img src='res/blank.gif' alt='Photo' id='thephoto' />

<img src='res/blank.gif' alt='Photo' id='thebackground' />
</div>



ohh, and here is a link to the two images i have left in here (blank.gif, and loading.gif) you can replace them if you please.

http://rlemon.com/new_sites/grl/res/blank.gif <-- blank.gif
http://rlemon.com/new_sites/grl/res/loading.gif <-- loading.gif

if you are having trouble installing this script post your code and i'll take a look.

electric_4_ever
10-17-2005, 09:25 PM
ok, before i try all this coding, i just want to know, does it matter what type of image files you use? will it work with .jpg files? or only .gif?

rlemon
10-17-2005, 09:37 PM
hrmm, i thought having a jpg in the example array would have awnsered that ;)

but yes jpg is supported, i havn't attempted to run any bmp's or png's in it, but jpg and gif are both supported.

I also have a thumbnail generator in php (laggy) if you are interested.

electric_4_ever
10-17-2005, 09:42 PM
alright. thanks. as soon as i get a break from my homework *rolls eyes*, i will try the coding and get back to you and let you know if it works or not. thanks once again :D

rlemon
10-17-2005, 09:42 PM
No Problem. if you would like an implementation of it, i don't mind doing so. unfortunatly i'm at work right now and will be for the next little bit but when i'm done i'll check the boards again and see if you repsonded

electric_4_ever
10-18-2005, 07:57 PM
hey rlemon, thanks for all these directions, and i've just started to work on using this coding. i have a question though, the second bit of coding you gave me there, the

<SCRIPT language="javascript">
<!--
function MM_preloadImages() {
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];}}
}
//-->
</SCRIPT>

part. does this also go in the header? or does this go onto the actual HTML page itself where it makes the window pop up and the pics begin 2 display?

also, while i think of it, i was wondering i could possibly give the .css style to you, to put all of the stuff in as well as create the HTML somewhat. that way i could see how you did it, and learn from that. because right now, i am completely lost and haven't the slightest idea of what i'm doing. and on top of it all, your the first person i've talked to who knows what they're doing, because every other person i've talked to over the last 4-5 months, doesn't know anything. and i am getting anxious to get this done.

rlemon
10-18-2005, 08:53 PM
Tell you what, send me your source for the page you want this implemented on (email rob.lemon@gmail.com) and i'll mark it up.

where you want the image gallery put the following code

[IMG GALLERY HERE: HEIGHT=nnn WIDTH=nnn]
where nnn is the height or width attribute you wish the images to be.

One small side note, i will comment back to my site in the code. you do not have to comment back to me in the site, but it would be appreciated :thumbsup: .

electric_4_ever
10-18-2005, 09:02 PM
ok, before i try and do it that way, let me put what i have done so far, first this is the .css style part

BODY {
font-style : normal;
font-weight : normal;
font-size : 11px ;
font-family : Tahoma ;
letter-spacing: 0px;
color : #E4BD3C;
text-decoration : none;
scrollbar-base-color: #000000;
scrollbar-shadow-color: #E4BD3C;
scrollbar-highlight-color: #E4BD3C;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #E4BD3C;}
{
onLoad="setTimeout(function(){run_gal('1','99')},1000)"
}

.HEADER {
color:#E4BD3C;
letter-spacing:1px;
padding-left:10px;
font-weight:normal;
border: solid #E4BD3C;
background-image:url('nav.png');
height:11px;
border-width:1px 1px 0px 1px;
image-background: url(nav.png);
font-family:Tahoma;
font-size:11px;
padding-right:10px;
text-align:center;
<style type="text/css" media="all">

#photoholder { width:153px; height:130px; background:#fff url('res/loading.gif') 100% 100% no-repeat;}
#thephoto { width:153px; height:130px; border: 1px solid #000000; z-index: 1; position: absolute;}
#thebackground { z-index: 0; width:153px; height:130px; border: 1px solid #000000;}

</style>

<script language="Javascript" type="text/javascript">

// IMAGE SCROLLER
var img = new Array('Pic1.jpg','Pic2.jpg','Pic3.jpg','Pic4.jpg','Pic5.jpg','Pic6.jpg','Pic7.jpg','Pic8.jpg','Pic9. jpg','Pic10.jpg','Pic11.jpg','Pic12.jpg','EOF');
var current = 0; // start image
var imgPath = "Pictures/";
var previous = "null";
var to;
var isLoading = 0;
var looping = 1;
function run_gal(interval, loopCount){
if(looping <= loopCount){
next_img();
looping++;
window.setTimeout(function() {run_gal(interval, loopCount)}, (interval*1000));
} else {
looping = 0;
}
}

function next_img() { if(isLoading == 0){ imageId = 'thephoto'; backgroundId = 'thebackground'; bg = document.getElementById(backgroundId); image = document.getElementById(imageId); if(current >= 1){if(img[current] != "EOF"){previous = (current-1);} else { previous = (current-1); current = 0;}}
if(previous == "null"){previous = 0;} else {bg.src=imgPath+img[previous];} image.src=imgPath+img[current]; current++;
setOpacity(image, 0); image.style.visibility = 'visible'; fadeIn(imageId,0);}
return;}
function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; obj.style.filter = "alpha(opacity:"+opacity+")"; obj.style.KHTMLOpacity = opacity/100; obj.style.MozOpacity = opacity/100; obj.style.opacity = opacity/100;}
function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 10; toRate = 50; if(current == 0){ toRate = 0;}
to = setTimeout("fadeIn('"+objId+"',"+opacity+")", 50); isLoading = 1;} else { isLoading = 0;}
}
}

</script>

}


.MAIN {
border: solid #E4BD3C;
border-width:1px 1px 1px 1px;
color:#E4BD3C;
font-family:Tahoma;
font-size:11px;
font-weight:normal;
background-color:#000000;
padding-left:5px;
padding-right:10px;}

.UPDATE {
color:#5B4C18;
font-size: 17px;
font-family: Arial;
font-weight: bold;
line-height: 40%;}

.A
a:active { color: #5B4C18; text-decoration: none; cursor: none;}
a:link { color: #5B4C18; text-decoration: none; cursor: none;}
a:visited { color: #5B4C18; text-decoration: none; cursor: none;}
a:hover { color: #E1CB7F; text-decoration: none; cursor: none;}

then i have the html part.

HEAD>
<CENTER>

<script language="javascript">
<!-- window =
window.moveTo(200, 10)
window.resizeTo(600, 710)
//-->
</script>

<TITLE>Pantera In Concert With Slayer</TITLE>


<div id='photoholder'>
<img src='res/blank.gif' alt='Photo' id='thephoto' />

<img src='res/blank.gif' alt='Photo' id='thebackground' />
</div>

see, the problem is, is that i dont quite understand how to get the HTML coding to read the .css where everything is set up in. because basically (the HTML coding above) is the resized window that pops up when a link on another page is clicked. i just dont see how to get the pictures to work though. as for giving you the site, i dont actually have this part of the site up and going yet. i am just working on it from my desktop. i'm also not sure if this would effect it in any way. if you need any more infor for helping me, let me know, for now, this is all i can really think of. >_< sorry for all the trouble.

rlemon
10-18-2005, 09:27 PM
The html should read the CSS automatically.

I have seen a few problems in your code so far.

Basically you were mixing up your css and javascript.

how the document should flow:
open html tag, open head tag, open title tag, title text, close title tag, open style tag, ALL CSS, close style tag, open script tag, ALL JAVASCRIPT, close script tag, close head tag, open body tag with the proper attributes, ALL BODY CONTENT, close body tag, close html tag.

look at what i've done.



<html><head><title>Pantera In Concert With Slayer</title>
<style type="text/css" media="all">
BODY {
font-style : normal;
font-weight : normal;
font-size : 11px ;
font-family : Tahoma ;
letter-spacing: 0px;
color : #E4BD3C;
text-decoration : none;
scrollbar-base-color: #000000;
scrollbar-shadow-color: #E4BD3C;
scrollbar-highlight-color: #E4BD3C;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #E4BD3C;}

.HEADER {
color:#E4BD3C;
letter-spacing:1px;
padding-left:10px;
font-weight:normal;
border: solid #E4BD3C;
background-image:url('nav.png');
height:11px;
border-width:1px 1px 0px 1px;
image-background: url(nav.png);
font-family:Tahoma;
font-size:11px;
padding-right:10px;
text-align:center;
}


.MAIN {
border: solid #E4BD3C;
border-width:1px 1px 1px 1px;
color:#E4BD3C;
font-family:Tahoma;
font-size:11px;
font-weight:normal;
background-color:#000000;
padding-left:5px;
padding-right:10px;}

.UPDATE {
color:#5B4C18;
font-size: 17px;
font-family: Arial;
font-weight: bold;
line-height: 40%;}


a:active { color: #5B4C18; text-decoration: none; cursor: none;}
a:link { color: #5B4C18; text-decoration: none; cursor: none;}
a:visited { color: #5B4C18; text-decoration: none; cursor: none;}
a:hover { color: #E1CB7F; text-decoration: none; cursor: none;}

#photoholder { width:700px; height:600px; background:#fff url('res/loading.gif') 100% 100% no-repeat; border: 1px solid #000000;}
#thephoto { width:700px; height:600px; border: 1px solid #000000; z-index: 1; position: absolute;}
#thebackground { z-index: 0; width:700px; height:600px; border: 1px solid #000000;}

</style>

<script language="Javascript" type="text/javascript">

// IMAGE SCROLLER
var img = new Array('Pic1.jpg','Pic2.jpg','Pic3.jpg','Pic4.jpg','Pic5.jpg','Pic6.jpg','Pic7.jpg','Pic8.jpg','Pic9. jpg','Pic10.jpg','Pic11.jpg','Pic12.jpg','EOF');
var current = 0; // start image
var imgPath = "Pictures/";
var previous = "null";
var to;
var isLoading = 0;
var looping = 1;
function run_gal(interval, loopCount){
if(looping <= loopCount){
next_img();
looping++;
window.setTimeout(function() {run_gal(interval, loopCount)}, (interval*1000));
} else {
looping = 0;
}
}

function next_img() { if(isLoading == 0){ imageId = 'thephoto'; backgroundId = 'thebackground'; bg = document.getElementById(backgroundId); image = document.getElementById(imageId); if(current >= 1){if(img[current] != "EOF"){previous = (current-1);} else { previous = (current-1); current = 0;}}
if(previous == "null"){previous = 0;} else {bg.src=imgPath+img[previous];} image.src=imgPath+img[current]; current++;
setOpacity(image, 0); image.style.visibility = 'visible'; fadeIn(imageId,0);}
return;}
function setOpacity(obj, opacity) { opacity = (opacity == 100)?99.999:opacity; obj.style.filter = "alpha(opacity:"+opacity+")"; obj.style.KHTMLOpacity = opacity/100; obj.style.MozOpacity = opacity/100; obj.style.opacity = opacity/100;}
function fadeIn(objId,opacity) { if (document.getElementById) { obj = document.getElementById(objId); if (opacity <= 100) { setOpacity(obj, opacity); opacity += 10; toRate = 50; if(current == 0){ toRate = 0;}
to = setTimeout("fadeIn('"+objId+"',"+opacity+")", 50); isLoading = 1;} else { isLoading = 0;}
}
}

</script>
</head><body onLoad="setTimeout(function(){run_gal('1','99')},1000)">

<CENTER>

<script language="javascript">
<!-- window =
window.moveTo(200, 10)
window.resizeTo(600, 710)
//-->
</script>

<div id='photoholder'>
<img src='res/blank.gif' alt='Photo' id='thephoto' />
<img src='res/blank.gif' alt='Photo' id='thebackground' />
</div>

</center>
</body></html>



if that doesn't work then there must be a problem with your config.

electric_4_ever
10-18-2005, 09:31 PM
alright, thanks. and this goes where? under the .css style part?

rlemon
10-18-2005, 09:40 PM
that is an entire site. read the code...

i suggest you read the following:

http://www.w3schools.com/html/ <- all pages

and

http://www.w3schools.com/css/ <- all pages

I'm not trying to insult you, but the bugs you had introduced should not have been there and they are fundamentally wrong.

your html is unstructured and broken (not all your tags have ends) and it appears you do not understand the concepts of CSS vs Javascript vs HTML and where these different elements of the site should lay.

I do not have time to explain these things right now. so, take the code i posted last and save it as .html page, then ensure all the configs are right and run that page. should work.

electric_4_ever
10-18-2005, 09:43 PM
k man. thanks a lot. i will definitely read those pages and try to solve things out from here on my own. if i need more help or have any more questions, i'll post again. but like i stated before, i am only beginning to learn and this is all brand new for me, so until i get the hang of it, i'm stuck like this >_< lol, sorry for the inconvienience, but i do really appreciate all the help you've given me :)

rlemon
10-18-2005, 10:01 PM
not a problem,
and i understand you are new to this. however i thought i had layed my post out such that it explained what you had done wrong.

read the 'page flow' section of a previous post. it should explain it.




how the document should flow:
open html tag, open head tag, open title tag, title text, close title tag, open style tag, ALL CSS, close style tag, open script tag, ALL JAVASCRIPT, close script tag, close head tag, open body tag with the proper attributes, ALL BODY CONTENT, close body tag, close html tag.

electric_4_ever
10-18-2005, 10:03 PM
ok, thanks bro. i'll get back to ya if i need help with anything else :D

PhotoJoe47
10-19-2005, 02:58 AM
Mr J's code looks like if would work if this one thing was remembered. You can not change an image object.src with a text string.
I would change the var Rollpic1 etc = "Pic1.jpg" to an array var Rollpic[0] etc. Then add the following afterward

//create image object photos
var slide = new Array ();


for(x=0; x<=19; x++)
{
slide[x] = new Image();
slide[x].src= Rollpic[x];
}

Next change:
document.roll.src = window["Rollpic" + PicNumber]

to:
document.roll.src = slide[PicNumber].src

I hope that helps

PhotoJoe



Try this


<HTML>
<HEAD>

<TITLE>Pantera In Concert With Slayer</TITLE>

<script type="text/javascript">
<!--

//Pictures to switch in between
var Rollpic1 = "Pic1.jpg";
var Rollpic2 = "Pic2.jpg";
var Rollpic3 = "Pic3.jpg";
var Rollpic4 = "Pic4.jpg";
var Rollpic5 = "Pic5.jpg";
var Rollpic6 = "Pic6.jpg";
var Rollpic7 = "Pic7.jpg";
var Rollpic8 = "Pic8.jpg";
var Rollpic9 = "Pic9.jpg";
var Rollpic10 = "Pic10.jpg";
var Rollpic11 = "Pic11.jpg";
var Rollpic12 = "Pic12.jpg";


var speed=2 //Time between pics switching in secs
var NumberOfPictures=12 //Number of pics:

var PicNumber=1

function SwitchPic(){

document.roll.src = window["Rollpic" + PicNumber]

PicNumber++

if(PicNumber > NumberOfPictures){
PicNumber=1
}


CallSwitchPic=setTimeout("SwitchPic()",speed*1000)
}

window.moveTo(200, 10)
window.resizeTo(600, 710)

//-->
</script>
</HEAD>
<BODY onload="SwitchPic()">

<CENTER>

<img src="1.jpg" border="0" name="roll">


</CENTER>

</BODY>
</HTML>

JRJR
10-21-2005, 02:09 PM
These codes really help me, but would it also be possible to have this code or any other and make it start up automaticly and then stop it with a button and start it up again.
I hope somebody can help me with this, because I have not been able to find it. Only codes that then have back and forward buttons with it, or don't start up automaticly.

Thank you so much for your help

JR

rlemon
10-21-2005, 02:33 PM
when they click the button for stop just set looping = loopcount

Mr J
10-21-2005, 03:28 PM
Photojoe47


Mr J's code looks like if would work if this one thing was remembered. You can not change an image object.src with a text string.

See post #7


.

JRJR
10-21-2005, 06:10 PM
when they click the button for stop just set looping = loopcount

thanks for this info, but where should I put this part of code?
When I make a button what should the code be for that

Something like

<input .....

sorry for the trouble, and thanks !!

electric_4_ever
10-25-2005, 01:52 AM
ok. now i have the code working. now i am just wondering how you open a window. i used to have the correct code, but i overwrote it by accident. so if someone would like to give me the code on how to open a window in HTML, that would be great. thanks. :thumbsup:

rlemon
10-25-2005, 03:00 PM
who's code, mine or yours?

electric_4_ever
10-25-2005, 07:54 PM
mine did. once i have everything done and working, and up on my site. i'll post it here so u can see what i did.

electric_4_ever
10-28-2005, 07:00 PM
ok. to whoever it may concern (however this is mostly directed at rlemon, lol, thanks buddy). ok, here is the code i am using for one of my picture pages. i realized though that there is a high waiting time for the pictures to load, so, now i am on the lookout for a image preloader. if i give you the code that i used, would you be able to a) design the correct coding for what i need, or b) point me in the right direction where i may be able to find the correct code. thanks a lot.

P.S. here is the coding

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.1">
<!-- Begin
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("None of that here! If you want to use something, ask me first!");
return false;
}
return true;
}

document.onmousedown=right;
document.onmouseup=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
if (document.layers) window.captureEvents(Event.MOUSEUP);
window.onmousedown=right;
window.onmouseup=right;
// End -->
</script>

<BODY>
<body bgcolor = "black">

<style type = "text/css" media="all">

BODY {
font-style : normal;
font-weight : normal;
font-size : 11px ;
font-family : Tahoma ;
letter-spacing: 0px;
color : #E4BD3C;
text-decoration : none;
scrollbar-base-color: #000000;
scrollbar-shadow-color: #E4BD3C;
scrollbar-highlight-color: #E4BD3C;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #E4BD3C;}

.HEADER {
color:#E4BD3C;
letter-spacing:1px;
padding-left:10px;
font-weight:normal;
border: solid #E4BD3C;
background-image:url('nav.png');
height:11px;
border-width:1px 1px 0px 1px;
image-background: url(nav.png);
font-family:Tahoma;
font-size:11px;
padding-right:10px;
text-align:center;
}


.MAIN {
border: solid #E4BD3C;
border-width:1px 1px 1px 1px;
color:#E4BD3C;
font-family:Tahoma;
font-size:11px;
font-weight:normal;
background-color:#000000;
padding-left:5px;
padding-right:10px;}

.UPDATE {
color:#5B4C18;
font-size: 17px;
font-family: Arial;
font-weight: bold;
line-height: 40%;}


a:active { color: #5B4C18; text-decoration: none; cursor: none;}
a:link { color: #5B4C18; text-decoration: none; cursor: none;}
a:visited { color: #5B4C18; text-decoration: none; cursor: none;}
a:hover { color: #E1CB7F; text-decoration: none; cursor: none;}

#photoholder { width:700px; height:600px; background:#fff url('res/loading.gif') 100% 100% no-repeat; border: 1px solid #000000;}
#thephoto { width:700px; height:600px; border: 1px solid #000000; z-index: 1; position: absolute;}
#thebackground { z-index: 0; width:700px; height:600px; border: 1px solid #000000;}

</style>

<TITLE>Pantera In Concert With Slayer</TITLE>
<script type="text/javascript">

<!--

Rollpic= new Array()

Rollpic[0] = "Pic1.gif";
Rollpic[1] = "Pic2.gif";
Rollpic[2] = "Pic3.gif";
Rollpic[3] = "Pic4.gif";
Rollpic[4] = "Pic5.gif";
Rollpic[5] = "Pic6.gif";
Rollpic[6] = "Pic7.gif";
Rollpic[7] = "Pic8.gif";
Rollpic[8] = "Pic9.gif";
Rollpic[9] = "Pic10.gif";
Rollpic[10] = "Pic11.gif";
Rollpic[11] = "Pic12.gif";



var speed=2 //Time between pics switching in secs

var PicNumber=0

function SwitchPic(){

document.roll.src = Rollpic[PicNumber]

PicNumber++

if(PicNumber == Rollpic.length){
PicNumber=0
}


CallSwitchPic=setTimeout("SwitchPic()",speed*2000)
}

window.moveTo(200, 75)
window.resizeTo(650, 600)

//-->
</script>
</HEAD>
<BODY onload="SwitchPic()">

<CENTER>



<img src="Pic1.gif" border="0" name="roll">


</CENTER>

</BODY>
</HTML>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum