[ 覚書 ] LightBox（OverLay）でFlash内のリンクから画像を表示する方法。
①LightBox.jsを入手する。
http://www.lokeshdhakar.com/projects/lightbox2/のサイトで以下をダウンロード
http://www.lokeshdhakar.com/projects/lightbox2/releases/lightbox2.04.zip
解凍後、lightboxフォルダを作成し、解凍したjsフォルダ、cssフォルダを貼り付ける。
②Flashのボタンアクション(ActionScript)を
通常のScriptだと
on (release) {
getURL("指定URL", "_blank");
}
を以下に変更
on (release) {
getURL('javascript:show(1)', '');
}
//複数のボタンの場合には、show(2) show(3) show(4)と増やしていく。
③HTMLの </head>前に以下を追加する。
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script src="lightbox/js/prototype.js" type="text/javascript"></script>
<script src="lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox/js/lightbox.js" type="text/javascript"></script>
<script type="text/javascript">
function show(image) {
var a = document.getElementById("ancoraggio"+image+"");
var f = new Array()
f[1] = "show(1)で読み出す画像ファイル名";
f[2] = "show(2)で読み出す画像ファイル名";
f[3] = "show(3)で読み出す画像ファイル名";
f[4] = "show(4)で読み出す画像ファイル名";
var url = f[image];
a.setAttribute('href', url);
myLightbox.start(a);
}
</script>
<!-- jsファイル化するも良し -->
④FlashのHTML（object)タグの前に以下を追加する。
<a id="ancoraggio1" href="show(1)で読み出す画像ファイル名" rel="lightbox[roadtrip]" title="タイトル"></a>
<a id="ancoraggio2" href="show(2)で読み出す画像ファイル名" rel="lightbox[roadtrip]" title="タイトル"></a>
<a id="ancoraggio3" href="show(3)で読み出す画像ファイル名" rel="lightbox[roadtrip]" title="タイトル"></a>
<a id="ancoraggio4" href="show(4)で読み出す画像ファイル名" rel="lightbox[roadtrip]" title="タイトル"></a>
<object...........>
<param name="movie" value="Flashファイル名" />
<param name="wmode" value="transparent" /><!-- OverLay時にFlashを透過 -->
<object...........>
