I followed along in Jeremy Keith's book "DOM Scripting" on how to make
a image viewer that changes on clicking links.
It is up for demo at:
http://jojowebdesign.com/dom1.html
My question is how can I begin to have the tab image for articles go
from articles_current.gif to just articles.gif (turn off the
highlight) when another tab is clicked. And the tab that is clicked
has it's image switched to for example blogs_current.gif (turn on
highlight).
Using the following code framerwork.
<script type="text/javascript">
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;
}
</script>
</head>
<body>
<div style="margin: 55px;">
<div style="margin-left: 54px; margin-top: 18px; margin-bottom: 0px;">
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen1.jpg" onclick="showPic(this); return false;">
<img src="/images/articles_current.gif" title="A fireworks display"/></
a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen2.jpg" onclick="showPic(this); return false;">
<img src="/images/videos.gif"/></a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen3.jpg" onclick="showPic(this); return false;">
<img src="/images/blogs.gif"/></a><br/>
</div>
<div style="float: left; width: 92px; position: relative;">
<a href="images/screen4.jpg" onclick="showPic(this); return false;">
<img src="/images/search.gif"/></a><br/>
</div>
</div><br style="clear: both;">
<img align="left" id="placeholder" src="/images/screen1.jpg"/><br/>
</div>
<br style="clear: both;" />
<p id="description">Choose an image.</p>
