オリジナルソースによる表示 JavaScriptによる表示
Your browser doesn't support Java.
サイズは縮小しました

このページはオリジナルソースに示すような JavaApplet の部分を
Javascript で書き換えるのが目的です
1.オリジナルのソース
<APPLET archive="multishow.jar" code="multishow.class" width="500" height="400" VIEWASTEXT id="Applet1">
<PARAM name="id_key" value="6s853137975935159191+6s890667530995822119">
<PARAM name="bgcolor" value="003050">
<PARAM name="background" value="bg.jpg">
<PARAM name="bgalign" value="tile">
<PARAM name="target" value="_blank">
<PARAM name="texttype" value="0">
<PARAM name="framecolor" value="FFFFFF">
<PARAM name="bordercolor" value="FFFFFF">
<PARAM name="textcolor" value="002090">
<PARAM name="diagonal" value="off">
<PARAM name="maxspeed" value="1">
<PARAM name="maxshown" value="5">
<PARAM name="maximages" value="5">
<PARAM name="img1" value="image1.gif">
<PARAM name="img2" value="image2.gif">
<PARAM name="img3" value="image3.gif">
<PARAM name="img4" value="image4.gif">
<PARAM name="img5" value="image5.gif">
<PARAM name="text1" value="Red Rose">
<PARAM name="text2" value="Princess Miyu">
<PARAM name="url2" value="http://www.6sense.com/applets">
<PARAM name="url4" value="http://www.6sense.com/applets">
Your browser doesn't support Java.
</APPLET>

2.JavaScriptによる関数化
ローカル変数 cc にすべての命令文を読み込ませます

<PARAM name="img1" value="image1.gif">
を下記のようにします

cc +="<PARAM name='img1' value='image1.gif'>"
[ " ] を [ ' ]に書き換えます

書き換えた結果は下記の通りです
function multishow(){
      var cc ="" 
      cc +="<APPLET archive='multishow.jar' code='multishow.class' width='500' height='400' VIEWASTEXT id='Applet1'>"
      cc +="<PARAM name='id_key' value='6s853137975935159191+6s890667530995822119'>"
      cc +="<PARAM name='bgcolor' value='003050'>"
      cc +="<PARAM name='background' value='bg.jpg'>"
      cc +="<PARAM name='bgalign' value='tile'>"
      cc +="<PARAM name='target' value='_blank'>"
      cc +="<PARAM name='texttype' value='0'>"
      cc +="<PARAM name='framecolor' value='FFFFFF'>"
      cc +="<PARAM name='bordercolor' value='FFFFFF'>"
      cc +="<PARAM name='textcolor' value='002090'>"
      cc +="<PARAM name='diagonal' value='off'>"

     //-- 画像の表示数設定
      cc +="<PARAM name='maxspeed' value='1'>"
      cc +="<PARAM name='maxshown' value='5'>"
      cc +="<PARAM name='maximages' value='5'>"

     //-- 画像設定
      cc +="<PARAM name='img1' value='image1.gif'>"
      cc +="<PARAM name='img2' value='image2.gif'>"
      cc +="<PARAM name='img3' value='image3.gif'>"
      cc +="<PARAM name='img4' value='image4.gif'>"
      cc +="<PARAM name='img5' value='image5.gif'>"

     //-- 画像の説明部分
      cc +="<PARAM name='text1' value='Red Rose'>"
      cc +="<PARAM name='text2' value='Princess Miyu'>"
 
      //--  画像の中のEnterをクリックしたときのURL
      cc +="<PARAM name='url2' value='http://www.6sense.com/applets'>"
      cc +="<PARAM name='url4' value='http://www.6sense.com/applets'>"
 
      cc +="Your browser doesn't support Java."
      cc +="</APPLET>"

      document.write(cc)
}

3.画像部分の設定
//-- 画像設定
cc +="<PARAM name='img2' value='image2.gif'>"
     
//-- 画像の説明部分
cc +="<PARAM name='text2' value='Princess Miyu'>"
 
//--  画像の中のEnterをクリックしたときのURL
cc +="<PARAM name='url2' value='http://www.6sense.com/applets'>" 
 
この部分をよく観察すると対になっていることが判ります
img2  → image2.gif
text2 → Princess Miyu
url2   → http://www.6sense.com/applets

また、Applet を導入するとき、その都度書き換えなくてはなりません
そこで効率よくページを作成するために次のようにします

4.画像データの作成
基本となるデータを作成します。当然 JavaScript で作成します
ここでは split 関数を使います

"ファイル名<>写真の説明<>クリックしたときのURL<>",

という形でデータを作成します
//-- 掲載写真リスト
f_data = new Array(
     "image1<>写真の説明<><>",
     "image2<>Princess Miyu<><>",
     "image3<>素晴らしい写真でしょうか<><>",
     "image4<>写真の説明<><>",
     "image5<>解説です<><>",
     "<><><>"
)
var scr_w = 400 ; //-- Appletの表示範囲をここで設定します
var scr_h = 300 ; //--

第3項目目のデータにはダミーです。
実際にはクリックしたとき画像を表示するようにしておけばいいので、別な方法で記述します

データの順番は自由に変更が出来ます
順番変更したときに間違わないように、
ダミーとして "<><><>"  を設定しておきます
これを次のようにデータ変換をします
//-- データ変換
var f_name=new Array() ;//-- ファイル名
var f_alt=new Array() ;//-- 写真の説明文
var f_url=new Array() ;//-- リンクするアドレス
var f_dummy=new Array()

var j=0
for(i=0 ; i<f_data.length ; i=i+3){
     f_dummy[i]=f_data[i].split("<>")
     j++
     f_name[j]= f_dummy[0] ;//--第1番目のデータをf_name[j]に入れます
     f_alt[j]  = f_dummy[1] ;//--第2番目のデータをf_alt[j]に入れます 
     f_url[j]  = f_dummy[2] ;//--第3番目のデータをf_url[j]に入れます 
}
var dat_sum = j - 1           ;//--データ総数

5.画像の表示数設定
//-- 画像の表示数設定
      cc +="<PARAM name='maxspeed' value='1'>"
      cc +="<PARAM name='maxshown' value='5'>"
      cc +="<PARAM name='maximages' value='5'>"

データ変換で、表示するデータ数が dat_sum という変数に設定されているので、この変数を利用して次のようにします

      cc +="<PARAM name='maximages' value='" + dat_sum + "'>"

      maxspeed  の値は好みに応じて設定します
   maxshown の値は表示数で、あまり多くない値にします。
           当然 data_sum よりは小さな値にします

6.画像関係のパラメーターの設定
画像関係のパラメーターは次のような設定になっています
当然の事ながら、画像数に応じて、<PARAM ・・・ を追加していきます
これはページを作成するという観点から見ると非常に効率の悪い方法です
//-- 画像設定
cc +="<PARAM name='img1' value='image1.gif'>"
cc +="<PARAM name='img2' value='image2.gif'>"
cc +="<PARAM name='img3' value='image3.gif'>"
cc +="<PARAM name='img4' value='image4.gif'>"
cc +="<PARAM name='img5' value='image5.gif'>"

//-- 画像の説明部分
cc +="<PARAM name='text1' value='Red Rose'>"
cc +="<PARAM name='text2' value='Princess Miyu'>"
 
//--  画像の中のEnterをクリックしたときのURL
cc +="<PARAM name='url2' value='http://www.6sense.com/applets'>"
cc +="<PARAM name='url4' value='http://www.6sense.com/applets'>"

そこで、下記のように書き換えます
//-- 画像設定
for(i=1 ; i < dat_sum + 1 ; i++){
      //-- 画像設定

      cc +="<PARAM name='img" + i + "' value='"+ f_name[i] + ".gif'>"
      //-- 画像の説明
      cc +="<PARAM name='text" + i + "' value='" + f_alt[i] + "'>"
      //-- 
EnterをクリックしたときのURL
      cc +="<PARAM name='url" + i + "' value='" + f_url[i] + "'>"
 }

この行をもう少し詳しく説明します
ここでは http://www.6sense.com/applets にリンクしていますが
実際には画像を表示するように書き換えます
まず、このApplet の画像が置かれているサーバー上のアドレスを

   http://www.xxx.ne.jp/~yyy/zzz/

とします

      cc +="<PARAM name='url" + i + "' value='http://www.xxx.ne.jp/~yyy/zzz/" + f_name[i] + ".gif''>"

このように書き換えればクリックによって画像を表示することが出来ます

7.如何でしょうか
今までは画像数に応じて、<PARAM ・・・ を追加していきましたが
この方法ですと画像数に関係なく表示することが出来ます

表示したい部分に下記の命令文を記述します

<SCRIPT type="text/javascript">
<!--
     multishow()
//-->
</SCRIPT>

以上の考え方は、画像数に応じて *.html ファイルを作っていたのにも
すべて応用が出来ます
JavaScriptによる表示です。詳しくはソースをご覧下さい


2009/03/07 修正