Javascript Usability Structure

Photo Gallery and Phone Number List

[TymArtist]

Hey guys, this is more of a general idea post (aka "rant post") since I pretty much know how to code what I'm about to do. But in terms of usability, I'm not sure about the best way to approach the issue and hopefully you guys can provide some useful feedback.

My apologies for any long-windedness, just want to bounce some ideas off my fellow webmasters!

Essentially what we have here is several listings per page, each with a Person's name, phone number, email address, and photograph. The photo is not the most important part of the equation, but the name and phone number should always be accessible. Email address comes second in priority, and photograph comes third.

My first thought was to set up the code like this:
<li><h3><a href="images/portraits/firstName-lastName.jpg" id="email" title="999-999-9999">firstName lastName &raquo;</a></h3>
<h4>Title</h4></li>

When they click on the Person's Name (which is the only thing displayed for each listing initially plus the title), it would display the image and append the phone number and email address (all the id's have the same domain name) from the link id and title to their own paragraph.

In terms of usability, this would just show the image when you click on the link if Javascript is disabled, so probably no good?

The idea of each person having an html file of their own and then loading it dynmically into the main page seemed tedious, whereas I could just reload the page using a GET request through a server-side language.

The other idea would be to list out all the content (minus the photos) on the page and hide/show certain aspects using Javascript - that way if someone had Javascript disabled then they would just see everything listed out instead of having to "drop down". Then the photo could be appended as per necessary based on the person's name.

All of these sounds like they're close to the point but I'm thinking perhaps a hybrid css/javascript mix for accessibility would be the ultimate solution. I could be wrong too, what do you all think of my crazy ideas here? Anyone have any different ideas that someone who is fairly new to Javascript couldn't think of?

If you have seen something that works well and can't post it here, feel free to email me the link at tymartist at hotmail dot com or get ahold of me via AIM at TymArtist. Thanks!

[TymArtist]

You know what, nevermind! After posing this I got a great idea for structure and additional Javascript functionality:
<li> the person's name in <h3>, surround the <h3> with <a>, put the title in <h4>, the phone and email as a <p> tag.

• the list tag for each record will effect the elements and values inside
  
• the <h3> and <h4> tags appear by default on pages that have javascript enabled
  
• upon clicking the <a> tag within the <li> tag, we can show the <p> tag that contains the phone number and email. if the page has javascript disabled, all the phone and emails on the page show anyway
  
• after showing the phone and email, append an <img> to the end of the list tag based on the person's name, since the image is a tertiary and would take up unneeded space in the case of javascript being disabled
  
• dynamically add an id to the <li> tag that's clicked and through css changes the style of the background color
  
• when you click a different person's name, the new name information shows and the other one hides
  

in terms of usability this seems to take care of all the issues, any other ideas?

more than anything, i think it shows that we can be using DOM/Javascript for behavior modification, but to make sure that people can get all the information regardless of having it enabled or disabled.