zbbtt
June 15th, 2008, 02:34 PM
Hello,
I've just started with DOM Scripting... So far, I'm trying to read more about it, but I am also trying to adapt the gallery script (http://domscripting.com/domsters/photos.html) from Jeremy Keith's DOM Scripting book/site (http://domscripting.com/) 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[i].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.
I've just started with DOM Scripting... So far, I'm trying to read more about it, but I am also trying to adapt the gallery script (http://domscripting.com/domsters/photos.html) from Jeremy Keith's DOM Scripting book/site (http://domscripting.com/) 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[i].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.