Changing css style with Javascript - with a difference [Archive] - Web Design & Web Development Forum: HTML, CSS, JavaScript, PHP

mojobullfrog

28 Jan 2010, 08:58 PM

Hi all. I have a query regarding using a javascript function to change a class, however, it needs to get called when a flash button is pressed. It's easier if you take a look at this page:

So here's my working example (http://www.webmegood.com/temp/footytips/test1/tourbox.htm)

It's just one Flash button that needs working in the same way as the "Placing Win/Place Bets" javascript button on the top right. Obviously the left hand menu is using javascript to change style without a problem. I just need the javascript that responds to the flash button click, to latch onto the top button and change its style. This is the bit I'm having difficulty with. Here's my updated code:

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>Sporting Bet Guided Video Tour</title>

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





<script type="text/javascript">
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>

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



</head>

<body>



<div id="box">

<div id="titleBar"></div>

<div id="content">

<div id="menu">

<div id="rollover">
<div id="button1"><a href="javascript: changeFlash('vids/winplace.swf')" onclick="highlightLinks(this)" class=""></a></div>
<div id="button2"><a href="javascript: changeFlash('vids/exotics.swf')" onclick="highlightLinks(this)" class=""></a></div>
<div id="button3"><a href="javascript: changeFlash('vids/multis.swf')" onclick="highlightLinks(this)" class=""></a></div>
</div>

</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="466" height="312">
<param name="movie" value="sb-main-orig.swf" />
<param name="quality" value="high" />
<param name="SCALE" value="exactfit" />
<embed src="sb-main-orig.swf"
width="466" height="312" name=flashMov2 quality=high
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" scale="exactfit"> </embed>
</object>
</div>

</div>

</div>



</body>

</html>

CSS:

@charset "UTF-8";

/*--------------------------------------------------------------------

- General Styles
- Project: SportingBet Guided Video Tour
- Date: 26 Jan 2010

---------------------------------------------------------------------*/

#box {
margin: 0px;
width: 670px;
}
#box #titleBar {
background-image: url(../images/title-bar.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
height: 70px;
}
#box #content {
width: 644px;
height: 340px;
border: 1px solid #909090;
background-image: url(../images/box-bg.jpg);
background-repeat: repeat-x;
background-position: 0px 1px;
background-color: #CCCCCC;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 12px;
padding-left: 12px;
}
#box #content #menu {
width: 172px;
display: block;
float: left;
}
#box #content #menu #rollover #button1 a {
display:block;
width: 167px;
height: 95px;
font: bold 13px sans-serif;
color:#ECECEC;
background: url(../images/rollover-image1.jpg) no-repeat 0px 0px;
text-decoration: none;
margin-bottom: 24px;
}
#box #content #menu #rollover #button1 a:hover {
background-position: 0 -119px;
}
#box #content #menu #rollover #button1 a:active {
background-position: 0 -238px;
}
#box #content #menu #rollover #button1 a.selected {
background-position: 0 -238px;
}
#box #content #menu #rollover #button2 a {
display:block;
width: 167px;
height: 95px;
font: bold 13px sans-serif;
color:#ECECEC;
background: url(../images/rollover-image2.jpg) no-repeat 0px 0px;
text-decoration: none;
margin-bottom: 24px;
}
#box #content #menu #rollover #button2 a:hover {
background-position: 0 -119px;
}
#box #content #menu #rollover #button2 a:active {
background-position: 0 -238px;
}
#box #content #menu #rollover #button2 a.selected {
background-position: 0 -238px;
}
#box #content #menu #rollover #button3 a {
display:block;
width: 167px;
height: 95px;
font: bold 13px sans-serif;
color:#ECECEC;
background: url(../images/rollover-image3.jpg) no-repeat 0px 0px;
text-decoration: none;
margin-bottom: 24px;
}
#box #content #menu #rollover #button3 a:hover {
background-position: 0 -119px;
}
#box #content #menu #rollover #button3 a:active {
background-position: 0 -238px;
}
#box #content #menu #rollover #button3 a.selected {
background-position: 0 -238px;
}

#box #content #videoDisplay {
border: 1px solid #AEAEAE;
background-color: #FFFFFF;
width: 466px;
height: 312px;
float: right;
padding-top: 20px;
}

/*---- Hacks for Chrome and Safari ----*/

/*\*/
html>body*.classx {}
/**/

FLASH BUTTON:

on (release, keyPress "<Enter>") {
url = "vids/winplace.swf";
getURL("javascript:changeFlashAndHighlight('" + url + "');");
}