disjointed rollover with Flash [Archive]

mightypants

06-26-2008, 12:56 AM

I have two .swf files that serve as links to two new pages, embedded using the swfobject. The .swf files are simple animations that I currently have configured to begin on rollover. I also have text underneath each of the .swf files, saying "Enter...," which I also have linked to the same pages. What I'd like is for the Flash animations to be triggered by a rollover of both the .swf files themselves and the text links, and for the text links' rollovers to also be triggered by hovering over the corresponding .swf.

In other words, I'd like both the .swf and links to perform their hover actions whenever either is hovered over. Any ideas? Do you think it would be easier to replace the text links with either image rollovers or .swf files? Thanks.

Here's the current 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=UTF-8" />

<title>Duyun</title>

<link rel="stylesheet" type="text/css" href="assets/styles/styles.css" />

<script type="text/javascript" src="assets/scripts/swfobject.js">
</script>

<script type="text/javascript">

swfobject.embedSWF ("assets/flash/eng_button_2.swf", "engLink", "257", "471", "9.0.0");

swfobject.embedSWF ("assets/flash/ch_button_2.swf", "chLink", "257", "471", "9.0.0");

</script>
</head>

<body>
<div id="container">

<div id="homeTop">
</div>

<div id="homeMain">

<div id="homeLeft">
<a href="english/index.html">
<div id="engLink">
<p>Alt content</p>
</div></a>
<p class="homeEnter"><a href="english/index.html">Enter English Site</a></p>
</div>

<div id="homeRight">
<a href="chinese/index.html">
<div id="chLink">
<p>Alt content</p>
</div>
</a>
<p class="homeEnter"><a href="chinese/index.html">Enter Chinese Site</a></p>
</div>

</div>

</div>
</body>
</html>

and CSS:

@charset "UTF-8";
/* CSS Document */

body {
background-color: black;
color: #c0c3c4;
}

#container {
margin: 0 auto;
width: 950px;

}

h1 {
text-align: center;
}

/*************** Home **************/

#homeTop {
height: 100px;
background-color: red;
}

#homeMain {
margin: auto;
width: 800px;
}

#homeLeft {
float:left;
width: 400px;
background-color:blue;
}

#homeRight {
float: right;
width: 400px;
background-color: green;
}

engLink {
margin: 0 auto;
width: 257px;
height: 471px;
}

chLink {
margin: 0 auto;
width: 257px;
height: 471px;
}

.homeEnter {
text-align: center;
}

/**************Bio - English**************/

#bioContainer{
margin: auto;
width: 785px;
}

#bioPic {
float: left;
margin: 20px;
}

.bio {
margin: 10px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
text-indent: 2em;
}