title: Dynamically assign 'sticky' selected state for menu items that exchange iframe content
body: <p>I am new to JavaScript and couldn't find existing answers that solve/address my issue. 
  My basic working setup is this: </p>
  
  <p>Site has a menu on left side, corresponding page content is loaded into an iframe to the right. Clicking a menu-link exchanges the .htm displayed in the iframe, this is accomplished with javascript. Hover-effect for the links is a CSS background-color change to the transparent menu images. </p>
  
  <p>These aspects ARE working ok! see relevant code parts:</p>
  
  <pre><code>&lt;head&gt;
  &lt;script type="text/javascript"&gt;
      function change_frame( srcURL ) {
          if ( !srcURL ) { return }
          var a_frame = document.getElementById('frame1');
          a_frame.src = srcURL;
      }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="menu_lft"&gt;
      &lt;div class="rollover"&gt; 
          &lt;a href="javascript:change_frame('media_nasd.htm')"&gt;&lt;img src="img/cpf/clp_nas.gif" width="160" height="9" border="0" /&gt;&lt;br /&gt;&lt;/a&gt;
          &lt;a href="javascript:change_frame('media_ibm.htm')"&gt;&lt;img src="img/cpf/clp_ilm.gif" width="160" height="9" border="0" /&gt;&lt;br /&gt;&lt;/a&gt;
          &lt;a href="javascript:change_frame('media_indo.htm')"&gt;&lt;img src="img/cpf/clp_dgt.gif" width="160" height="9" border="0" /&gt;&lt;br /&gt;&lt;/a&gt;
          &lt;a href="javascript:change_frame('media_att.htm')"&gt;&lt;img src="img/cpf/clp_att.gif" width="160" height="9" border="0" /&gt;&lt;br /&gt;&lt;/a&gt;
          &lt;a href="javascript:change_frame('media_the.htm')"&gt;&lt;img src="img/cpf/clp_the.gif" width="160" height="9" border="0" /&gt;&lt;br /&gt;&lt;/a&gt;
          &lt;a href="javascript:change_frame('media_ibs.htm')"&gt;&lt;img src="img/cpf/clp_ibs.gif" width="160" height="9" border="0" /&gt;&lt;br /&gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="content"&gt;   
      &lt;iframe frameborder="0" width="100%" height="600" id="frame1" name="frame1" src="media_nasd.htm"&gt;&lt;/iframe&gt;  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Note: by default (i.e. when the main page is first accessed) the content for the top-most link is loaded into the iframe.</p>
  
  <p>Now my QUESTION, how can I dynamically assign the "selected" state to the chosen menu item?</p>
  
  <p>My classes for menu behavior:</p>
  
  <pre><code>    .rollover a { display:block; width:160px; height:9px; margin-bottom:4px; 
          background-color: #fff; 
      }
      .rollover a:hover { background-color: #dddedf; }    
      .rollsel { background-color: #fcc; }
  </code></pre>
  
  <p>What I mean: for the menu item that was clicked, which changed the content displayed in iframe, the class .rollsel or style="background-color: #fcc "  should display to indicate the correlation, i.e. 'stick' as long as related iframe content is being viewed.</p>
  
  <p>It would seem this should be possible by extending/adding to the javascript... to dynamically insert the style change for the link used?</p>
  
  <p>Yet I have NO CLUE how to go about it :( Can someone please advise - much appreciate your support!</p>