PDA

View Full Version : Body onload Image Gallery


adamWeiler
01-26-2008, 01:54 PM
Hi, I'm not too sure how to do something with Javascript. I am making a Photogallery from textbook instructions. The gallery itself works; the user clicks on a link and the image appears on the same page. Clicking another link loads another picture in the same spot, on the same page. This is the code:

HTML: <a onclick="return showPic(this,1)" href="images/photographs/image1.jpeg">Image One</a>
<a onclick="return showPic(this,2)" href="images/photographs/image2.jpeg">Image Two</a>

Javascript:
function showPic (whichpic, numeral) {
//Determines which picture to display.
if (document.getElementById) {
document.getElementById('placeholder').src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}

return false;
} else {
return true;
}
}

My problem is, nothing happens until the user clicks on one of the links. I want to use body onload so an image loads when the page opens up. I'm not sure how to do this, because the link uses this, and I don't fully understand how to apply a this to a body onLoad.

Any suggestions on how to do this?

freshOne
01-27-2008, 03:10 AM
the spot where the clicked image appears, it's an image tag & its src changes by the click of the user??

adamWeiler
01-27-2008, 12:39 PM
Sorry, I forgot an important piece of the html:

HTML:

<span id="desc"><img id="placeholder" src="images/trans.gif" alt="" /></span>


This is the part where the image loads. If the user clicks on the first link, the first image loads here and replaces the trans.gif. If the user clicks on the second link, the second image loads here and replaces the first image.

(My mistake; without this piece of code, the image opens on a fresh page, but that's not what I'm trying to do.)

freshOne
01-28-2008, 02:08 AM
ok so u can put the initial image u want to appear once the page is loaded instead of trans.gif..?

adamWeiler
01-28-2008, 10:13 AM
Doh! Yes, that works, thank you! (This proper code kind-of messes up the CSS borders, but that's easy enough to fix.)


(Something I tried before: I put the first image as the background, and loaded new pictures overtop. Unfortunately, that didn't work because not all the pictures were the same width, and you could see the first image behind some of the other images.)

freshOne
01-29-2008, 08:37 AM
gr8 :D
if needed anything with the css just ask
good luck