JavaScriptでFLASHファイルを切り替えるには

質問

いつもお世話になっています。

3つあるFLASHファイルを、

１．ページ読み込み時にはランダム
２．画像ボタンへのmouseoverで対象に変化

のようにしたいのですが、２が上手く行きません。
flashlist[num]を変化させたところ、ページ全体がオブジェクトだけになってしまいました。
何か良い方法はないでしょうか。

なお、マイクロソフトの月例パッチ（ActiveX）対策で、objectをJavaScriptで書き出しています。

/* HTMLファイルのボタン・FLASH部分 */
<script type="text/javascript" language="javascript" src="flash.js"></script>

<img src="button1.gif" mouseover="flashlist(0)" />
<img src="button2.gif" mouseover="flashlist(1)" />
<img src="button3.gif" mouseover="flashlist(2)" />

/* flash.js */

var flashlist = new Array("ｆlash1.swf","ｆlash2.swf","ｆlash3.swf");
var num = Math.floor((Math.random() * 100)) % flashlist.length;

document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"　
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" >');
document.write('<param id="movie" value="' + flashlist[num] + '" />');
document.write('<embed src="' + flashlist[num] + '"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>')
document.write('</object>');

回答No.7

LLLuna · ベストアンサー

これで動くと思います。少々長いですが……。
IE7β2、Firefox1.5.0.3、Opera8.54（何れもWindows版）で動作確認しました。

*JavaScriptファイル

var flashlist = new Array("flash1.swf","flash2.swf","flash3.swf");
var num = Math.floor((Math.random() * 100)) % flashlist.length;
var cflash;
var object;
var param;
var embed;

document.write('<div id="changeflash" style="width:589px;height:231px;">');
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" style="width:589px;height:231px;">');
document.write('<param name="src" value="' + flashlist[num] + '" />');
document.write('<embed id="movie2" src="' + flashlist[num] + '" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" style="width:589px;height:231px;"></embed>');
document.write('</object></div>');

function changeflash(flash){
if(flash!=num){
num=flash;
if(document.all && document.all("changeflash").innerHTML){
//IE向け処理
cflash=document.all("changeflash");
cflash.innerHTML='<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" style="width:589px;height:231px;"><param name="src" value="'+flashlist[num]+'" /><embed id="movie2" src="' + flashlist[num] + '" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" style="width:589px;height:231px;"></embed></object></div>';
}
else if(document.getElementById){
//標準準拠仕様
cflash=document.getElementById("changeflash");
cflash.removeChild(document.getElementsByTagName("object").item(0));
object=document.createElement("object");
param=document.createElement("param");
embed=document.createElement("embed");
object.setAttribute("classid","clsid:D27CDB6E-AE6D-11cf-96B8-444553540000");
object.setAttribute("codebase","http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0");
object.setAttribute("style","width:589px;height:231px");
param.setAttribute("name","src");
param.setAttribute("value",flashlist[num]);
embed.setAttribute("src",flashlist[num]);
embed.setAttribute("type","application/x-shockwave-flash");
embed.setAttribute("pluginspage","http://www.macromedia.com/go/getflashplayer");
embed.setAttribute("style","width:589px;height:231px");
object.appendChild(param);
object.appendChild(embed);
cflash.appendChild(object);
}
}
}

*XHTMLファイル

【前略】
<img src="button1.gif" alt="ボタン1" title="FLASH1" onmouseover="changeflash(0)" />
<img src="button2.gif" alt="ボタン2" title="FLASH2" onmouseover="changeflash(1)" />
<img src="button3.gif" alt="ボタン3" title="FLASH3" onmouseover="changeflash(2)" />
<script type="text/javascript" src="./flash.js"></script>
【後略】

お礼

ありがとうございます、上手く動きました！
再三のご指導ありがとうございます。感謝に耐えません。

回答No.6

LLLuna

FirefoxとOperaでは上手くいくのですが……IEでは未知の実行時エラーと。

object要素も書き換えるようにするとIEでのエラーはなくなりましたが、永久に「読み込み中……」との表示があります。

embed要素だけにすると何故か上手くいきました。
ただ、embed要素はHTMLの仕様にはない独自実装……。
もう少し練り直してみます。

お礼

ありがとうございます。よろしくお願いいたします。

回答No.5

LLLuna

うっかりしてました。（汗
mouseoverではなくonmouseoverでした。

上手くいくはずだったんですが、どうも反映されないようです。

document.getElementById("movie").setAttribute("value",flash);
document.getElementById("movie2").setAttribute("src",flash);

を

document.getElementById("object").innerHTML='<param id="movie" value="' + flash + '" /><embed id="movie2" src="' + flash + ' "pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>';

に変更し、次に

document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" >');

を

document.write('<object id="object" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" >');

に変更してください。
不本意ながらinnerHTMLを使いましたが、これで上手くいくはずです。細かい箇所はこれを応用してください。

お礼

何度もありがとうございます。
重ね重ね本当に心苦しいのですが、ステータスバーにエラーが表示されて、変更されません…

試作品は以下のような形です。

■ HTMLファイル
<html>
<head>
<title></title>
</head>
<body>
<div>
<img src="button1.gif" alt="ボタン1" onmouseover="changeflash(flashlist[0])" />
<img src="button2.gif" alt="ボタン2" onmouseover="changeflash(flashlist[1])" />
<img src="button3.gif" alt="ボタン3" onmouseover="changeflash(flashlist[2])" />
<script type="text/javascript" language="javascript" src="flash.js"></script>
</div>
</body>
</html>

■ JavaScriptファイル
var flashlist = new Array("images/flash/sc_tpointerface_sf.swf","images/flash/sc_tpointerface_scj.swf","images/flash/sc_tpointerface_scb.swf");
var num = Math.floor((Math.random() * 100)) % flashlist.length;

document.write('<object id="object" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="589" height="231">');
document.write('<param name="movie" value="' + flashlist[num] + '" />');
document.write('<embed id="movie2" src="' + flashlist[num] + '" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>');
document.write('</object>');

function changeflash(flash){
if(document.getElementById){
document.getElementById("object").innerHTML='<param id="movie" value="' + flash + '" /><embed id="movie2" src="' + flash + ' "pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>';
}
}

回答No.4

LLLuna

すいません。

<img src="button1.gif" alt="ボタン1" mouseover="changeflash(flashlist(0))" />
<img src="button2.gif" alt="ボタン2" mouseover="changeflash(flashlist(1))" />
<img src="button3.gif" alt="ボタン3" mouseover="changeflash(flashlist(2))" />

ではなく、

<img src="button1.gif" alt="ボタン1" mouseover="changeflash(flashlist[0])" />
<img src="button2.gif" alt="ボタン2" mouseover="changeflash(flashlist[1])" />
<img src="button3.gif" alt="ボタン3" mouseover="changeflash(flashlist[2])" />

でした。

お礼

ありがとうございます。
お返事が遅くなってしまい、申し訳ありません。

ご教示いただいた内容を試してみたのですが、マウスオーバーしても反応がなく…

関数の位置をはじめに持ってきたり最後に持ってきたりしてみたのですが、何かおかしなことをしているんでしょうか。

追伸：
トップページFLASHについては私もまさにその通りだと思うのですけれど、会社の方針なので如何とも（苦笑）

回答No.3

noname#22259

flashlist:
var flashlist = new Array("ｆlash1.swf",....);
........~~~~~~~
<img src="button1.gif" onmouseover="flashlist(0)" />
............................................................................~~~~~~~

お礼

ありがとうございました。今回は上の方のご提案で実現させていただきましたが、また機会がございましたら、よろしくお願いいたします。

回答No.2

LLLuna

document.write()ではページの一部だけを書き換えることは出来ません。DOMを利用してください。

document.write('<embed src="' + flashlist[num] + '"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>')

まずここを、

document.write('<embed id="movie2" src="' + flashlist[num] + '"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>');

と書き換えてください。
次に、新しい関数を作成します。
function changeflash(flash){
if(document.getElementById){
document.getElementById("movie").setAttribute("value",flash);
document.getElementById("movie2").setAttribute("src",flash);
}
}
最後に、

<img src="button1.gif" alt="ボタン1" mouseover="changeflash(flashlist(0))" />
<img src="button2.gif" alt="ボタン2" mouseover="changeflash(flashlist(1))" />
<img src="button3.gif" alt="ボタン3" mouseover="changeflash(flashlist(2))" />
とすれば完了です。

なお、あまり重いFLASHは使わない方が良いでしょう。特にトップページの場合は。この手のスクリプトは、ナローバンドな人には嫌がられがちですので。

回答No.1

noname#22259

<img src="button1.gif" onmouseover="funcName(flashlist[0])" />

お礼

ありがとうございます。
当初はこの方法を試したのですが、HTMLが消え、JavaScriptで書いたオブジェクトだけの表示になってしまうのです。
どうにかならないでしょうか・・・