Javascript Help...
- Started
- Last post
- 15 Responses
- Knuckleberry
I have been trying to work this code and it is giving me some major grief (in its defense this is my first venture into javascript).
I am trying to set a div panel to show multiple pictures while using an arrow for scrolling through. The idea behind it is based on this sites javascripting tutorial... but I cannot get it to work. Any thoughts. http://www.mcfedries.com/JavaScr…
Except a lot better (trust me).
- 7point340
without seeing your code, it's kinda hard to tell what's not working
- acescence0
wait... i'm sensing something...
- acescence0
nope, lost it, sorry.
- 7point340
do you have 10 images? if not, have you changed the numbers accordingly?
is your img named correctly. (the one that is changing)
- Knuckleberry0
entire 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>//// KNUCKLEBERRY DESIGN \\\\</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#apDiv2 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 14px;
top: 13px;
}
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:1;
top: 105px;
margin-left: 20px;
}
#apDiv4 {
position:absolute;
width:74px;
height:35px;
z-index:2;
top: 772px;
overflow: visible;
}
#apDiv5 {
position:absolute;
width:80px;
height:36px;
z-index:3;
top: 771px;
overflow: visible;
margin-left: 938px;
}
#apDiv6 {
position:absolute;
width:80px;
height:43px;
z-index:2;
top: 775px;
}
#apDiv7 {
position:absolute;
width:69px;
height:33px;
z-index:3;
top: 775px;
margin-left: 938px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Use the following variable to specify the number of images
var NumberOfImages = 3var img = new Array(NumberOfImages)
// Use the following variables to specify the image names:
img[0] = "jetblackhalo_closeup1.jpg"
img[1] = "jetblackhalo_closeup2.jpg"
img[2] = "crew_overall1.jpg"
img[3] = "crew_overall2.jpg"var imgNumber = 0
function NextImage()
{
imgNumber++
if (imgNumber == NumberOfImages)
imgNumber = 0
document.images["VCRImage"].src = img[imgNumber]
}function PreviousImage()
{
imgNumber--
if (imgNumber < 0)
imgNumber = NumberOfImages - 1
document.images["VCRImage"].src = img[imgNumber]
}//-->
</SCRIPT>
<body>
<p align="center"> </p>
<p align="center"> </p>
<div align="center">
<table width="1024" height="457" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><div align="center">
<div id="apDiv3"><img src="images/index_images/knuck_info.png" /></div>
<div id="apDiv6">
<div align="left"><A HREF="<A HREF="javascript:PreviousImage()"> <IMG SRC="reverse.gif" BORDER=0></A">
<IMG SRC="images/index_images/knuck_leftarrow.png" BORDER=0></A></div>
</div>
<div id="apDiv7">
<div align="left"><A HREF="<A HREF="javascript:NextImage()"> <IMG SRC="forward.gif" BORDER=0></A>">
<IMG SRC="images/index_images/knuck_rightarrow.png" BORDER=0></A></div>
</div>
<img src="images/jetblackhalo/jetblackhalo_closeup1.jpg" name="mainpic" width="1024" height="768" align="middle" id="mainpic" /></div></td>
</tr>
</table>
</div>
</body>
</html>Sorry I am not a web guy... and thank you for your help.
- 7point340
var numberofimages should be = 4
- 7point340
change the name of the jetblackhalo_closeup1.jpg at the bottom there to "VCRimage" like in the code
- acescence0
i tlooks like you've named your pic mainpic, so it should be
document.images["mainpic"].src = img[imgNumber];
- acescence0
also, i'm assuming this stuff is the proper characters and not all html encoded like here?...
<A HREF="<A HREF="javascript:NextImage()"> <IMG SRC="forward.gif" BORDER=0></A>">
- acescence0
oops, i forgot to fix it, haha, use this one...
- Thank you so much.... What was it if you dont mind me asking?Knuckleberry
- Knuckleberry0
Sorry for being the retard on the block... but is there a special place the images are supposed to go (as in a specified folder?). The reason I ask is because it is trying to scroll through but they are not showing?
- Knuckleberry0
I think I have it figured out. Thank you so much for your help everyone. Especially you acescence.
- acescence0
hm, not sure what happened, but this definitely works, i tried it this time!