• Print Article
• Email Article
• Report it

Firstly, I’ve set up a basic HTML page with a list of links:

<h3>Image Selector</h3>
<ul id="imagegallery">
<li><a href="images\Bluehills.jpg"title="Blue Hills">Blue Hills</a></li>
<li><a href="images\sunset.jpg"title="Sunset">Sunset</a></li>
<li><a href="images\lilies.jpg"title="Water Lilies">Water Lilies</a></li>
<li><a href="images\winter.jpg"title="Winter">Winter</a></li>
</ul>
 <imgid="placeholder" src="images/placeholder4x3.jpg" alt="my image gallery" />
<p id="description">Choose anImage</p> 

Here is what my Image Gallery Should do:

1. When I click on a link, I want to stay on the same page. I also want to see the image on the same page plus its description.

And here is how:

1. Put a placeholder image on the page and a blank description tag.
2. Using Javascript, more specifically, the DOM Model, I’ll intercept the default browser behaviour and replace the text and image with the correct image and description.
   

To do this I’m going to create a Javascript Function. This will enable my image gallery to be reused. The function is going to be called ‘showPic’ and will have one argument, whichpic, which will select the picture on which the function will act:

function showPic(whichpic) {
}

I need to find the URL of the Image I want to display, so I use ‘get.Attribute’ to get the HREF. I then store it in a variable for later use.

var source = whichpic.getAttribute(“href”);

And now I need to find the image I want to replace. You will notice that in the code it has an id of placeholder, so we can find it using that id:

var placeholder = document.getElementById(“placeholder”);

The placeholder image gets its image via the ‘src’. So, I need to change this using Javascript. Luckily, I can use ‘set.Attribute’.

placeholder.setAttribute(“src”, source);

The syntax for the set.Attribute is:

set.Attribute(“attribute”, valuetoset);

That’s our function for switching the pictures done! Obviously it wont work yet, because we have not added an event handler. Now we need to work on changing the text in the paragraph with the id ‘description’.

Just to recap, currently our function is:

function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementByID("placeholder");
placeholder.setAttribute("src", source);
}

So, time to take a break, because there is still a long way to go! Next we need to add the script which will change the description to the image which is selected.

Firstly, I want to get the description of each image. The description is stored in the title tag. We can use get.Attribute, like earlier, to do this.

var text = whichpic.getAttribute("title");

Notice for the first time I am now referencing the function’s only argument, whichpic. Basically, this line will get the value of the title attribute and assign it to a variable, called text. I’m now going to add a variable called ‘description’, which will be the paragraph called description. I’m doing this for easy referral later in the script.

var description = document.getElementById(“description”);

Now lets do some text swapping! This is where the knowledge of nodes is so helpful. I need to find the place where my text in the title attribute will go. The text, is the first child of the <p> tag, so I use:

description.firstChild.nodeValue

And now I need to assign a value to it. The value is the variable ‘text’, which I set earlier, which gets the value of the title attribute of the image.

description.firstChild.nodeValue = text; 

Done! It’s really as easy as that! The full function is:

function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementByID("placeholder");
placeholder.setAttribute("src", source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}

 Now, to activate this (Known as an Event Handler), we need to place this code in each link:

onclick=”showPic(this); return false;” 

So your links now should each be like this: 

<li><a href="images\winter.jpg" title="Winter" onclick="showPic(this); return false;">Winter</a></li>

And remember to include your javascript! The recommended way is to place it all in an eternal file and then in the <head> section place:

<script type=”text/javascript” src=”yourjavascriptfile.js”></script>

This script is pretty much as basic as you will get. There are so many things that could be improved with this script. For instance, if you had 50 links, try adding the ‘onClick…’ over and over again! There are ways of doing it for you. Watch out, as in next month’s editor’s article I’ll be posting a follow up tutorial that will help you improve and develop this script.