By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,513 Members | 1,158 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,513 IT Pros & Developers. It's quick & easy.

How can I highlight clicked menu item?

P: 3
Hi all,

I have a vertical menu consisting of CSS rollovers. When clicked, each one dynamically loads a new Flash movie via Javascript, within the same page. This works fine. However, what I would really like, is to have each menu item highlighted after it has been clicked, to show the user what is being shown. This could be the same image as is displayed in the active CSS state.

Does anyone know how I can do this? Because each link is simply dynamically loading flash movies, and not going to a new html page, I can't simply add an ID element.

Take a look at a basic example I've mocked up, and see the code below:


CSS:

Expand|Select|Wrap|Line Numbers
  1. #navlist {
  2.     font-family:Arial, Helvetica, sans-serif;
  3.     font-size:.8em;
  4.     font-weight:bold;
  5.     list-style:none;
  6. }
  7. #navlist a {
  8.     display:block;
  9.     width:155px;
  10.     color:#fff;
  11.     text-decoration:none;
  12.     background:url(../images/tab.gif) no-repeat;
  13.     padding-top: 7px;
  14.     padding-right: 4px;
  15.     padding-bottom: 6px;
  16.     padding-left: 10px;
  17. }
  18. #navlist a:hover { 
  19.     background-position:0 -29px;
  20.     color: #1e5ebd;
  21. }
  22. #navlist a:active {
  23.     background-position:0 -58px;
  24.     color:#1e5ebd;
  25. }



HTML:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <title>Test Page</title>
  7.  
  8. <link href="css/guided-tour-box.css" rel="stylesheet" type="text/css" />
  9.  
  10.  
  11.  
  12.  
  13. <script>
  14. function changeFlash(url){
  15. var d=document;
  16. (d.all)? d.all("flashMov1").movie = url :
  17. d.embeds["flashMov2"].src = url;
  18. }
  19. </script>
  20.  
  21. </head>
  22.  
  23.  
  24.  
  25. <body>
  26.  
  27.  
  28.  
  29.     <!-- Tour Box Begins Here -->
  30.  
  31.     <div id="box">
  32.  
  33.         <div id="titleBar"></div>
  34.  
  35.         <div id="content">
  36.  
  37.             <div id="menu">
  38.  
  39.  
  40.  
  41.  
  42.                 <ul id="navlist">
  43.                     <li><a href="javascript: changeFlash('f1.swf')">Menu Item 1</a></li>
  44.                     <li><a href="javascript: changeFlash('f2.swf')">Menu Item 2</a></li>
  45.                     <li><a href="javascript: changeFlash('f3.swf')">Menu Item 3</a></li>
  46.                 </ul>
  47.  
  48.  
  49.  
  50.             </div>
  51.  
  52.             <div id="videoDisplay">
  53.                   <object id=flashMov1
  54.                     classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  55.                     codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
  56.                     width="233" height="156">
  57.                     <param name="movie" value="sb-main.swf" />
  58.                     <param name="quality" value="high" />
  59.                     <param name="SCALE" value="exactfit" />
  60.                     <embed src="sb-main.swf"
  61.                     width="233" height="156" name=flashMov2 quality=high
  62.                     type="application/x-shockwave-flash"
  63.                     pluginspage="http://www.macromedia.com/go/getflashplayer" scale="exactfit"> </embed>
  64.                   </object>
  65.             </div>
  66.  
  67.         </div>
  68.  
  69.     </div>
  70.  
  71.     <!-- Tour Box Ends Here -->
  72.  
  73.  
  74. </body>
  75.  
  76. </html>
Jan 27 '10 #1
Share this Question
Share on Google+
4 Replies


P: 86
1) Give each of your menu items a unique CSS id
2) In the function changeFlash, make it so it sets the background to another value for the correct layer.
Jan 27 '10 #2

P: 3
Thanks Larz. I think this solution might do the trick.
Jan 28 '10 #3

P: 3
Here's a follow-up, with a twist:

What if I wanted to replicate the function of the first menu item, with a flash button? - that is, when the flash button is clicked, it loads the first flash movie and also highlights the first menu item. I can easily do the first part using the following AS2 code attached to the button:


Expand|Select|Wrap|Line Numbers
  1. on (release, keyPress "<Enter>") {
  2.         url = "f1.swf";
  3.         getURL("javascript:changeFlash('" + url + "');");
  4. }

But I'm not too sure how to do something similar to highlight the first menu item though. Assume this is the method I'm using:


Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.  
  4. <script>
  5. function changeFlash(url){
  6.     var d=document;
  7.     if (d.all) d.all("flashMov1").movie = url;
  8.     else      d.embeds["flashMov2"].src = url;
  9. }
  10. </script>
  11.  
  12.  
  13. <script type="text/javascript">
  14.  
  15. function highlightLinks(obj) {
  16.    var linkList = document.getElementById("rollover").getElementsByTagName("a");
  17.    for (i = 0; i < linkList.length; i++) {
  18.       linkList[i].className = "";
  19.    }
  20.    obj.className = "selected";
  21. }
  22.  
  23. </script>
  24.  
  25.  
  26. </head>
  27.  
  28.  
  29.  
  30. <body>
  31.  
  32. <div id="rollover">
  33. <a href="javascript: changeFlash('f1.swf')" onclick="highlightLinks(this)" class=""></a>
  34. <a href="javascript: changeFlash('f2.swf')" onclick="highlightLinks(this)" class=""></a>
  35. <a href="javascript: changeFlash('f3.swf')" onclick="highlightLinks(this)" class=""></a>
  36. </div>
  37.  
  38.  
  39. </body>
  40.  
  41. </html>
Jan 28 '10 #4

P: 86
Shouldn't that be posted under "flash"?
Jan 28 '10 #5

Post your reply

Sign in to post your reply or Sign up for a free account.