Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations sizbut on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Slide images not showing up.

Status
Not open for further replies.
muppetgrrl

muppetgrrl

Programmer
Jan 21, 2005
12
US
I tried posting about this last week; here's hoping someone might figure it out this time.

The following slideshow shows the image caption; advances prev and next as it's supposed to; and shows the proper-sized BORDER of the image. But it doesn't show the image, just a blank space. Any ideas?

//make an array of images
var imageCaption = new Array(
"Add a new project",
"Enter a project number, no decimals.",
"Save the project info.",
"View the summary of the project.");
//make a counter
var counter = 0;
var imgNum = imageCaption.length - 1;
var imageArray = new Array(imgNum);
for (var i=0; i < imgNum;i++)
{
imageArray = "image" + i + ".gif";
}


//preload function
function preLoad()
{
// make an image object variable
//loop through array of images and preLoad each
for (var i=0; i < imgNum;i++)
{
var imgPreload = new Image;
imgPreload.src = "image" + i + ".gif";

}
document.getElementById("imgNum").innerHTML = "Image 1 of " + imgNum
document.getElementById("caption").innerHTML = imageCaption[0]
}

//function to move forward in the slideshow
function nextImage()
{
//test counter
if (counter < imgNum)
{
//add one to counter if not to end of array
counter++;
}
else
{
//reset counter
counter = 0;
}

//show an image from the array.
document.slide.src = imageArray[counter];
var imgCount = counter + 1
document.getElementById("caption").innerHTML = imageCaption[counter]
document.getElementById("imgNum").innerHTML = "Image " + imgCount + " of " + imgNum

}

//function to move back in the slideshow
function prevImage()
{
//test counter
if (counter > 0)
{
//subtract one from counter if not 0
counter--;
}
else
{
//subtract one from the length of the array
counter = imgNum - 1;
}
{
//show an image from the array.
document.slide.src = imageArray[counter];
var imgCount = counter + 1
document.getElementById("caption").innerHTML = imageCaption[counter]
document.getElementById("imgNum").innerHTML = "Image " + imgCount + " of " + imgNum
}
}
//-->
</script>


</head>

<body onload="preLoad();">
<noscript>
You must have Javascript enabled to view the slideshow.
</noscript>

<table align="center">
<tr>
<td name="caption" id="caption" width="500" colspan="2" height="50" class="headerBlack" valign="middle">Add a new project.</td>
</tr>
<tr>
<td height="1" width="500" bgcolor="#008080" colspan="2"></td>
</tr>
<tr>
<td width="250" height="25" name="imgNum" id="imgNum" align="left"></td>
<td width="250" height="25" align="right">
<a href="javascript:;" onclick="prevImage();"><< Previous</a> | <a href="javascript:;" onclick="nextImage();">Next >></a></td>
</tr>
<tr>
<td width="500" colspan="2" height="400" align="center" valign="center">
<img name="slide" id="slide" src="image1.gif" alt="Click for next image" border="1">
</td>
</tr>

</table>
 
Sort by date Sort by votes

My advice: Remove the name "slide" from the image, and reference the image using getElementById, instead of the hacky IE shortcut method you are currently using.

Two questions:

1. Are the images in the same folder as the page with the script on?

2. Does the initial image (image1.gif) show up but not the next/previos images... Or do none of the images show up?

You might also want to use the correct HTML character entity for the greater than signs in your code.

Hope this helps,
Dan

 
Upvote 0 Downvote
The images are in the same folder, and the initial image shows up. And the correct border size of the images also show up--just not the image itself.

I checked out a few other slideshow codes, and found that if I call the javascript using this code:

<a href="javascript:prevImage()"><< Previous</a>

it works fine. Any idea why?

I'll do the getElementById thing for the slide, too, and the greater than symbol, although here's what may be a dumb question--why remove the name "slide" from the image?

Thanks.
 
Upvote 0 Downvote
The images are in the same folder, and the initial image shows up. And the correct border size of the images also show up--just not the image itself.

I checked out a few other slideshow codes, and found that if I call the javascript using this code:

<a href="javascript:prevImage()"><< Previous</a>

it works fine. Any idea why?

I'll do the getElementById thing for the slide, too, and the greater than symbol, although here's what may be a dumb question--why remove the name "slide" from the image?

Thanks.
 
Upvote 0 Downvote

why remove the name "slide" from the image?
Click to expand...

No biggie, but if you use getElementById insted of a clunky method, you've no need for the name attribute... And if you have no need for something, why have it taking up space and possibly leading to confusion? ;o)

Dan





 
Upvote 0 Downvote
The original code, <a href="javascript:;" onclick="prevImage();">, probably doesn't execute the onClick event because the return value from the href is undefined, which would cause the VM to (correctly) assume that the event has been cancelled, and thus there would be no onClick event remaining to process. An equivalent solution would probably be to remove the href="javascript:;" - although in M$IE this means you would lose the hover event instead ;-)
 
Upvote 0 Downvote
BillyRay,

Just curious, why is using "name" hacky and clunky ?
It works with IE and Netscape for image references.

I only do programming for personal usage, but haven't found a problem. In fact sometimes remembering which letters are capitalized in getElementById has got me more than "name". I do use both methods though.
 
Upvote 0 Downvote

I never said that using "name" was hacky or clunky. In fact it is anything but.

However, the method you were using to access the image element via its name attribute, namely:

Code: 
document.slide.src

is, IMHO, hacky / clunky.

Hope this clarifies things,
Dan

 
Upvote 0 Downvote
If I've read some of the recommendations about other browsers, the safe way to access a named element would be through an associative array, like document.images['slide'].

Lee
 
Upvote 0 Downvote
BillyRay,

Thanks for the clarification. The way I read these sentences seemed like you were suggesting getting away from name and going to getElementById because (name) was hacky and clucky.
Code: 
"Remove the name "slide" from the image, and reference the image using getElementById, instead of the hacky..."

"No biggie, but if you use getElementById insted of a clunky method.."
So name could have been retained but would you suggest another method to access it ? trollacious offered an improved method to use name. Just curious, when you use name, how do you reference it. thanks for sharing your experience.
 
Upvote 0 Downvote
when you use name, how do you reference it.
Click to expand...

I personally only use the name attribute for form elements, where I use:

Code: 
document.forms['formName'].elements['elementName']

Otherwise, I use ID and getElementById.

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TheLazyPig
  • Question
Buttons not aligned after another button is clicked
Replies
2
Views
233
gmmastros
gmmastros
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
422
waubain
waubain
berkshirea
  • Locked
  • Question
Change the Default Pop Up Message 2
Replies
8
Views
506
berkshirea
berkshirea
Krus1972
  • Locked
  • Question
Pop-up Blocker Detecter
Replies
1
Views
158
spamjim
spamjim
rogerte
  • Locked
  • Question
Javascript updating form control not working
Replies
3
Views
251
rogerte
rogerte

Part and Inventory Search

Sponsor

Back
Top