How can I highlight clicked menu item?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mojobullfrog
    New Member
    • Jan 2010
    • 3
    #1

    How can I highlight clicked menu item?

    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:

    Code:
    #navlist {
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	font-weight:bold;
	list-style:none;
}
#navlist a {
	display:block;
	width:155px;
	color:#fff;
	text-decoration:none;
	background:url(../images/tab.gif) no-repeat;
	padding-top: 7px;
	padding-right: 4px;
	padding-bottom: 6px;
	padding-left: 10px;
}
#navlist a:hover { 
    background-position:0 -29px;
    color: #1e5ebd;
}
#navlist a:active {
    background-position:0 -58px;
    color:#1e5ebd;
}



    HTML:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Page</title>

<link href="css/guided-tour-box.css" rel="stylesheet" type="text/css" />




<script>
function changeFlash(url){
var d=document;
(d.all)? d.all("flashMov1").movie = url :
d.embeds["flashMov2"].src = url;
}
</script>

</head>



<body>



	<!-- Tour Box Begins Here -->
	
	<div id="box">
	
		<div id="titleBar"></div>
		
		<div id="content">
		
			<div id="menu">
			
				
				
				
				<ul id="navlist">
					<li><a href="javascript: changeFlash('f1.swf')">Menu Item 1</a></li>
					<li><a href="javascript: changeFlash('f2.swf')">Menu Item 2</a></li>
					<li><a href="javascript: changeFlash('f3.swf')">Menu Item 3</a></li>
				</ul>

				
					
			</div>
			
			<div id="videoDisplay">
				  <object id=flashMov1
					classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
					codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0"
					width="233" height="156">
					<param name="movie" value="sb-main.swf" />
					<param name="quality" value="high" />
					<param name="SCALE" value="exactfit" />
					<embed src="sb-main.swf"
					width="233" height="156" name=flashMov2 quality=high
					type="application/x-shockwave-flash"
					pluginspage="http://www.macromedia.com/go/getflashplayer" scale="exactfit"> </embed>
				  </object>
			</div>
		
		</div>
		
	</div>

	<!-- Tour Box Ends Here -->


</body>

</html>
    Tags: css rollovers, dynamically loading flash
    • larztheloser
      New Member
      • Jan 2010
      • 86
      #2
      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.

        Comment

        • mojobullfrog
          New Member
          • Jan 2010
          • 3
          #3
          Thanks Larz. I think this solution might do the trick.

            Comment

            • mojobullfrog
              New Member
              • Jan 2010
              • 3
              #4
              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:


              Code:
              on (release, keyPress "<Enter>") {
		url = "f1.swf";
		getURL("javascript:changeFlash('" + url + "');");
}

              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:


              Code:
              <html>
<head>

<script>
function changeFlash(url){
    var d=document;
    if (d.all) d.all("flashMov1").movie = url;
    else      d.embeds["flashMov2"].src = url;
}
</script>


<script type="text/javascript">

function highlightLinks(obj) {
   var linkList = document.getElementById("rollover").getElementsByTagName("a");
   for (i = 0; i < linkList.length; i++) {
      linkList[i].className = "";
   }
   obj.className = "selected";
}

</script>


</head>



<body>

<div id="rollover">
<a href="javascript: changeFlash('f1.swf')" onclick="highlightLinks(this)" class=""></a>
<a href="javascript: changeFlash('f2.swf')" onclick="highlightLinks(this)" class=""></a>
<a href="javascript: changeFlash('f3.swf')" onclick="highlightLinks(this)" class=""></a>
</div>


</body>

</html>

                Comment

                • larztheloser
                  New Member
                  • Jan 2010
                  • 86
                  #5
                  Shouldn't that be posted under "flash"?

                    Comment

                    Previous template Next
                    Working...