use dom to change body id tag

Hey folks,

I've got a simple gallery page which currently uses getAttribute and getElementById to take the [link] title text and place it into an id [description]. Yes, I lifted this code from the Friends of Ed book.

My goal is, when the user clicks a link, to show "active" state by changing the body ID text to whatever is the link title text (in combination with a little cascading ID selector action). I'm honestly not even sure this will work. If someone else has an more practical idea, I'm open. I just think it would be cool to be able to ID the active link without the page having to reload.

Right now, the description.firstChild.nodeValue = text; literally replaces the body id with text, which simply appears on the page.

Anyhow, any help or ideas are greatly appreciated.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""">
<html xmlns="" xml:lang="en">
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <script type="text/javascript">
   function showPic(whichpic) {
        var source = whichpic.getAttribute("href");
        var placeholder = document.getElementById("placeholder");
        var text = whichpic.getAttribute("title");
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;

<body id="description">

    <li id="fireworks"><a href="images/fireworks.jpg" id="linkfireworks" title="fireworks" onclick="showPic(this); return false;">Fireworks</a></li>
    <li id="coffee"><a href="images/coffee.jpg" id="linkcoffee" title="coffee" onclick="showPic(this); return false;">Coffee</a></li>
    <li id="rose"><a href="images/rose.jpg" id="linkrose" title="rose" onclick="showPic(this); return false;">Rose</a></li>
    <li id="bigben"><a href="images/bigben.jpg" id="linkbigben" title="bigben" onclick="showPic(this); return false;">Big Ben</a></li>
  <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
Who is Participating?
aescntConnect With a Mentor Commented:
First of all I apologize if I came of harsh on my comments. Anyway, are you trying to change the ID of `description`? if so then it's: = text;
mullagatawnyAuthor Commented:
Hi R.A,

Thanks for the note. I try not to use IFRAMES when I can help it. Unless, of course you are referring to another point on this page? In this example, the onclick=showPic(this); works well as far as swapping the images without refreshing the page.

- Sa
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Here's how to change the body tag's ID: = "foo";

Btw, I'm not quite sure how rama_krishna580's link can help you, it seems totally unrelated to the question.
@aescnt ; >>>> it seems totally unrelated to the question
did you read the whole article...?
anyway i will go with asker, its his/her final choice to choose the correct answer.

it is EE's policy to let the question asker pick the most helpful solution, but I beileve experts are also obliged to understand the problem, and post helpful comments. (

Rama Krishna: Yes, I did... and I don't think the question has anything to do with AJAX, or asynchronous calls via IFrame, or cookies, or PHP. I did find a small line buried in the code that goes " = 'remotingDiv'" which is similar to the solution I proposed, although it's used on a dynamically created element, and wasn't pointed out by the article, or you.

I also tried understood the asker's problem to the best of my ability, and tried to be helpful by posting a straight-forward response.
mullagatawnyAuthor Commented:
Just to defuse, I appreciate any attempt, from any user, regardless of it's usefullness. It really comes down to how well I pose my question. In this case, I still do not have the answer I am looking for, although I appreciate the reference as to how to identify the body id using DOM.

Regarding = "foo"; do either of you know how I may replace "foo" dynamically using the following?

var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;

--> = "foo";

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.