ボタン画像の下のFlashにポインタを移動するとロールオーバーのまま（IE以外）

質問

例として、三洋電機と三菱電機のサイトをあげます。
http://www.sanyo.co.jp/
http://www.mitsubishielectric.co.jp/index.html

これらのサイトは、メニューにボタン画像を使用しており
ロールオーバーの効果をもたせています。
そして、ボタン画像のすぐ下にページのメイン要素となるFlashが配置されています。

私もこのような構造のサイトを作っているのですが、
ひとつ解決できない問題があり悩んでいます。

私の作ったサイトでボタン画像にポインタを乗せるとロールオーバーするのですが、
ロールオーバー状態でポインタをFlashに移動させると
ボタン画像が通常の画像に戻らずロールオーバーのままなのです。
ポインタをFlashの領域から外すと通常のボタン画像に戻ります。

この現象は、Win IE以外のブラウザ（FirefoxやSafari）で起こります（Macではまだ検証していません）。
しかし、先述の三洋や三菱のサイトでは、
ボタン画像にポインタを乗せロールオーバー状態でポインタをFlashに移動させても、
ボタン画像が通常の画像に戻ります。

ちなみに、私のサイトでは、ボタン画像をJavaScriptの「rollover.js」を、
Flashは「SWFObject」を使って配置しています。

何か解決策をご存知の方いらっしゃいましたら
どうぞ宜しくお願いします。

回答No.1

abril

以前、ちょっと類似したご質問があったのでもしかしたら…と思ったのですが。

<div id="navi">
<ul>
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
</ul>
</div>

<div id="flash">
（Flashに関する記述）
</div>

こんな感じの構造になっているでしょうか？もしかして、ナビの<a>の部分が一部閉じていなかったりはしませんか？
同様の構造のサンプルで試してみましたら、この場合、<a>の領域が正しく判断できなくなる為なのか、Firefoxなどのより文法にストリクトなブラウザではロールオーバーがONの状態になり放しになる様です。しかし、とかく何かと解釈の緩いIEではそのあたりを勝手に補正（迷惑な話です）してしまう様で、問題がない様に見えてしまいます。

既にHTMLの文法チェック済みで該当しない様でしたら忘れて下さい。

お礼

ご回答ありがとうございます。

＞こんな感じの構造になっているでしょうか？

はい。以下のような感じです。

<div id="gnavi">
<ul>
<li><a href="1.html"><img src="abc.gif" class="imgover" /></a></li>
<li><a href="2.html"><img src="xyz.gif" class="imgover" /></a></li>
</ul>
</div>

<div id="flash">
Flash
</div><!-- / #flash -->

<script type="text/javascript">
// <![CDATA[

var so = new SWFObject("aiueo.swf", "xx", "800", "300", "9", "#fff");
so.addParam("menu", "false");
so.addParam("wmode", "window");
so.addVariable("flashVarText", "this is passed in via FlashVars for example only");
so.write("aiueo");

// ]]>
</script>

HTML自体は「Another HTML-lint gateway」でチェックをかけていて、
問題はありませんでしたので、<a>タグの抜けはありません。

このほか、私のサイトでは以下のXML宣言をしていますが、
<?xml version="1.0" encoding="shift_jis"?>
消してみても解決しませんでした。
文書型宣言は「XHTML 1.0 Transitional」です。