Hello,

I've started with DOM Scripting, uh, yesterday. So far, I'm trying to read more about it, but I am also trying to adapt the gallery script from Jeremy Keith's DOM Scripting book/site to my own purposes. So far, the image switch works and I'm replacing the alt text of the larger images with the title from the links. But now I need to swap the class of the links once they are clicked, so they become the "selected" link. I've tried working it with my very limited knowledge and failed. Maybe you can help me out? Here's the script:

function showPic(whichpic) {
if (!document.getElementById("visual")) return true;
var source = whichpic.getAttribute("href");
var visual = document.getElementById("visual");
visual.setAttribute("src",source);
if (!document.getElementById("visual")) return false;
if (whichpic.getAttribute("title")) {
var text = whichpic.getAttribute("title");
} else {
var text = "";
}
var descricao = document.getElementById("visual");
if (descricao.getAttribute("alt")) {
descricao.setAttribute("alt",text);
}
return false;
}

function prepareGallery() {
if (!document.getElementsByTagName) return false;
if (!document.getElementById) return false;
if (!document.getElementById("thumb")) return false;
var gallery = document.getElementById("thumb");
var links = gallery.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links.onclick = function() {
return showPic(this);
}
}
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}

addLoadEvent(prepareGallery);


And here's the links part of the page:

<div id="thumb">
<!-- LIST -->
<ul><li class="t_on"><a href="sample_1.jpg" title="Image 1">1</a></li>
<li class="t_off"><a href="sample_2.jpg" title="Image 2">2</a></li>
<li class="t_off"><a href="sample_3.jpg" title="Image 3">3</a></li>
</ul>
</div>

Class t_on is the current/selected image, class t_off is the unselected images. I want to be able to:
- click a t_off class link and it will change class to t_on, so it becomes selected (visually, the background image of the link changes).
- as a new link is clicked, the current t_on link becomes class t_off, so it appears as unselected (background image disappears).
- if i click on a t_on class, it all stays the same, basically.

Since the number of links on each page varies, I want a general purpose function to accomplish this, like the preparegallery function with the for loop. I tried playing around with the code, using className.match and setAttribute with class and the t_on/t_off values, but no dice. Thank you for any help.

Really? This script comes from a pretty reputable source. I like how the author set it up, and I think I understand how it works. I tried changing the class as you suggested, but alas, I still cannot change the class of the link! :(

Thanks for your reply though. If you have any other ideas, I'm all ears.

Hello,

Thank you for your reply! I didn't want to use any inline js... I tried several things, but couldn't get it to work. But I got a solution posted over at Kirupa's forum, it works as intended (seems a little bit similar to what you've posted, but they use a nested loop).

Thanks again. Hopefully this will help someone else, some other time. :)