mojobullfrog
27 Jan 2010, 12:53 AM
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 (http://www.webmegood.com/temp/test/tourbox.htm) I've mocked up, and see the code below:
CSS:
#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:
<!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>
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 (http://www.webmegood.com/temp/test/tourbox.htm) I've mocked up, and see the code below:
CSS:
#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:
<!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>