javascript - Dynamically assign 'sticky' selected state for menu items that exchange iframe content -


i new javascript , couldn't find existing answers solve/address issue. basic working setup this:

site has menu on left side, corresponding page content loaded iframe right. clicking menu-link exchanges .htm displayed in iframe, accomplished javascript. hover-effect links css background-color change transparent menu images.

these aspects working ok! see relevant code parts:

<head> <script type="text/javascript">     function change_frame( srcurl ) {         if ( !srcurl ) { return }         var a_frame = document.getelementbyid('frame1');         a_frame.src = srcurl;     } </script> </head> <body> <div class="menu_lft">     <div class="rollover">          <a href="javascript:change_frame('media_nasd.htm')"><img src="img/cpf/clp_nas.gif" width="160" height="9" border="0" /><br /></a>         <a href="javascript:change_frame('media_ibm.htm')"><img src="img/cpf/clp_ilm.gif" width="160" height="9" border="0" /><br /></a>         <a href="javascript:change_frame('media_indo.htm')"><img src="img/cpf/clp_dgt.gif" width="160" height="9" border="0" /><br /></a>         <a href="javascript:change_frame('media_att.htm')"><img src="img/cpf/clp_att.gif" width="160" height="9" border="0" /><br /></a>         <a href="javascript:change_frame('media_the.htm')"><img src="img/cpf/clp_the.gif" width="160" height="9" border="0" /><br /></a>         <a href="javascript:change_frame('media_ibs.htm')"><img src="img/cpf/clp_ibs.gif" width="160" height="9" border="0" /><br /></a>     </div> </div> <div class="content">        <iframe frameborder="0" width="100%" height="600" id="frame1" name="frame1" src="media_nasd.htm"></iframe>   </div> </body>

note: default (i.e. when main page first accessed) content top-most link loaded iframe.

now question, how can dynamically assign "selected" state chosen menu item?

my classes menu behavior:

    .rollover { display:block; width:160px; height:9px; margin-bottom:4px;          background-color: #fff;      }     .rollover a:hover { background-color: #dddedf; }         .rollsel { background-color: #fcc; }

what mean: menu item clicked, changed content displayed in iframe, class .rollsel or style="background-color: #fcc " should display indicate correlation, i.e. 'stick' long related iframe content being viewed.

it seem should possible extending/adding javascript... dynamically insert style change link used?

yet have no clue how go :( can please advise - appreciate support!

i think best way go creat css class (ie: .rolloverselected or similar) , use javascript change class of selected item. easiest way go use js framework such jquery simplify code. keep in mind that, whenever change class of element other must "reset" default class.

hope gave idea of how go :)


Comments

Post a Comment