Hey all,
Started the road to using Javascript, and have made an image gallery. However, it is not working as it should. The 'return false' does not work.
HTML:
- Code: Select all
<h3>Image Selector</h3>
<ul>
<li><a href="images\Bluehills.jpg" title="Blue Hills" onClick="showPic(this); return false;">Blue Hills</a></li>
<li><a href="images\sunset.jpg" title="Sunset" onClick="showPic(this); return false">Sunset</a></li>
<li><a href="images\lilies.jpg" title="Water Lilies" onClick="showPic(this); return false;">Water Lilies</a></li>
<li><a href="images\winter.jpg" title="Winter" onClick="showPic(this); return false;">Winter</a></li>
</ul>
<img id="placeholder" alt="My Image Gallery" src="images/placeholder4x3.jpg" width="400" height="300">
<p id="description">Choose an Image</p>
javascript
:
- Code: Select all
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;
}
What is happening is that when you click the link it is just opening that picture in a new page, not where the placeholder is. If I take away the last 3 lines of javascript, it works. I'm following this from '
DOM Scripting' by Jeremy Keith.
I'm linking to the javascript external file with:
- Code: Select all
<script type="text/javascript" src="java.js"></script>
Any ideas - I bet it's me with a stupid mistake
Many Thanks
Jack