simple javascript question-linking button state to image swap?

Question

Hi folks, I know this is a real newbie question, but that's what I am! I've been playing with ajax, and I have these two images swapping when I press the two buttons.

Question: How do I make the button have the active state displaying while it's corrisponding image is displaying?

I'm sure I need to do something like set an id on the image, but other than that, I'm not sure...

My code (I'm not displaying the ajax stuff that is making the image swap, because I doubt you need that too):

<div class="wrapper">
<div class="transcriptionbuttons">
    <ul class="transcript">
      <li class="transcript"><a class="transcriptionhorbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback)"></a></li>
      <li class="transcript"><a class="transcriptionvertbutton" href="javascript:void()" onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback)""></a></li>
    </ul>
</div>
<div class="transcriptimage" id="targetDiv">
  <img src="this gets populated with ajax..." alt="">
</div>
</div>

Thank you! Joel

Edit: Sorry it wasn't clear. The list items are buttons. Click a list item, and it loads an image in targetDiv. I want the button that is "active" to remain active.

Answer 1

If I understood the question.... you could, for example,

<img id="targetImg" src="this gets populated with ajax..." alt="">

and in your JavaScript callback

document.getElementById("targetImg").setAttribute("src", "new_image_source.jpg");

EDIT
If instead you meant you wanted to change the <a> tag when clicked, you could...

<li class="transcript">
   <a class="transcriptionhorbutton" 
      href="javascript:void()" 
      onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>

and pass this into a function which will make the changes you want (admittedly that part is a little unclear)

EDIT 2

<li class="transcript">
   <a id="transcriptionhorbutton" class="inactive"
      href="javascript:void()" 
      onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1horizontal.txt', callback);make_active(this);"></a>
</li>
<li class="transcript">
   <a id="transcriptionvertbutton" class="inactive"
      href="javascript:void()" 
      onclick="getDataReturnText('/lessons/transcriptions/ajaxcalls/L1vertical.txt', callback);make_active(this);"></a>
</li>

<script>

var buttons = [ document.getElementById("transcriptionvertbutton"), 
                document.getElementById("transcriptionhorbutton")];

function make_active(el) {
  deactivate_buttons();
  el.setAttribute("class","active");
}

function deactivate_buttons() {
  buttons[0].setAttribute("class","inactive");
  buttons[1].setAttribute("class","inactive");
}
</script>

It's not the prettiest solution, but it should give you an idea of how the problem can be solved