ＨＴＭＬを使ったスライドショー (その３)
６月号から３回にわたり｢ＸＰパワートイズ｣で作成するスライドショーをご紹介してきたのも、いよいよ今回が最後です。前回お知らせしたように、今回はコントロール･ボタンを小さくする方法、および複数のスライドショー間を移動するためのボタンを追加する方法です。もし、｢６月号｣と｢８月号｣をお見逃しになったかたは、そちらからご覧ください。
まず、右図の上がオリジナルのコントロール･ボタンで、左から２番目の｢プレイ･ボタン｣をクリックすると(つまりスライドショーをスタートすると)、このボタンは｢停止ボタン｣へと表示が変わります。したがって、
ボタンの種類は４つでなく左図のような５つが１セットというわけです。もちろん、これら各ボタンのサイズはハイパーテキスト(ＨＴＭＬ)の記述で小さく見せることも可能ですが、それだと歪(いびつ)な表示になりかねません。
せっかくボタンのサイズへこだわるなら、やはり素材はきちんとしたほうがいいでしょう。また、別のスライドショーへ移動するためには、そのためのボタンも追加しなくてはならず、どうせなら先のオリジナル･コントロール･ボタンの下へ表示しておいたような小型版のフルセットを用意することをお薦めします。ここに｢停止ボタン｣が入るので、じっさいは次のような７つのボタンでフルセットとなるわけですが、いざ画像の作成となれば尻込みされるかたも少なからずおられるはずです。
コントロール･ボタン小型フルセット(4KB) したがって、自分ではボタンなどの画像を作成した経験がないとおっしゃるかたのため、とりあえず素材だけは用意しておきました。｢停止ボタン｣を含めた右図の７つボタン･セットが、その下の｢
｣ボタンをクリックすればダウンロードできます。ダウンロードした｢sscbut.zip｣という名前のファイルを解凍すると、中には右図の順で左から｢prevpage.gif｣、｢prev.gif｣、｢play.gif｣、｢pause.gif｣、｢next.gif｣、｢nextpage.gif｣、｢stop.gif｣という名前の画像ファイルが含まれているので、それらを｢ＸＰパワートイズ｣の作成したスライドショー用の画像ディレクトリ(ふつうは｢images｣)へコピーして下さい。
これで素材の準備が整ったので、次はハイパーテキスト(ＨＴＭＬ)の料理に取りかかります。前回同様、いよいよスライドショーをコントロールする｢viewer.htm｣というファイルを料理してゆくわけですが、一つだけお断りしておきたいのでは、ここでご紹介する実例が機能するのはWindows XPかそれ以前のMeなどでインターネット･エクスプローラのバージョンが更新されている場合のみです。
｢viewer.htm｣をメモ帳などで開くと、冒頭は｢ver ･･･｣で始まる行が並んだ３つのセクションから成り、その２番目(最初の空行の次)は以下の式①Ａと同じ内容なのがおわかりいただけるでしょう。そこへ式①Ｂのように赤文字の２行を書き加えて下さい。
式①Ａ
var imagePath = "../"+"images"
var prevPath = imagePath + "/prev.gif"
var nextPath = imagePath + "/next.gif"
var playPath = imagePath + "/play.gif"
var pausePath = imagePath + "/pause.gif"
var stopPath = imagePath + "/stop.gif"
var blankPath = imagePath + "/blank.gif"
式①Ｂ
var imagePath = "../"+"images"
var prevPath = imagePath + "/prev.gif"
var nextPath = imagePath + "/next.gif"
var prevpagePath = imagePath + "/prevpage.gif"
var nextpagePath = imagePath + "/nextpage.gif"
var playPath = imagePath + "/play.gif"
var pausePath = imagePath + "/pause.gif"
var stopPath = imagePath + "/stop.gif"
var blankPath = imagePath + "/blank.gif"
冒頭の３つのセクションに続いては｢function loadedDoc()｣という項目があり、以下の式②Ａは後半の一部です。そこへ式①と同じ要領で式②Ｂのように２行書き加えます。
式②Ａ
welcome.style.display = "none"
forwButton.src=nextPath
runButton.src=playPath
prevButton.src=prevPath
stopButton.src=stopPath
式②Ｂ
welcome.style.display = "none"
forwpageButton.src=nextpagePath
forwButton.src=nextPath
runButton.src=playPath
prevButton.src=prevPath
prevpageButton.src=prevpagePath
stopButton.src=stopPath
続く｢function ShowControls(x)｣を飛ばし、｢function ShowStopButton()｣という項目を見ると、以下の式③と同じセクションがありますので、この｢32｣を｢24｣へ変更して下さい。つまり、ここでは｢停止ボタン｣の横幅だけを元の画像の32ピクセルから小型版の24ピクセルに指定し直すわけです。
式③
stopButton.width = 32;
stopButton.style.cursor = "hand"
stopButton.style.visibility = ""
けっこう細かい変更箇所が多いのは続く｢function ShowButtons(f)｣という項目で、右の式④のとおりほぼ全面的な修正が必要となります。ここでは元の式を省きましたが、変更内容は式①や式②の場合と同じく赤字の行が追加されているだけです。
式④
function ShowButtons(f)
{
ShowStopButton();
forwpageButton.filters[0].Apply();
forwButton.filters[0].Apply();
runButton.filters[0].Apply();
prevButton.filters[0].Apply();
prevpageButton.filters[0].Apply();
stopButton.filters[0].Apply();
if (f)
{
buttonsEnabled = 1
forwpageButton.filters[0].transition = 3;
forwButton.filters[0].transition = 3;
runButton.filters[0].transition = 3;
prevButton.filters[0].transition = 3;
prevpageButton.filters[0].transition = 3;
forwpageButton.src=nextpagePath
forwButton.src=nextPath
runButton.src=playPath
prevButton.src=prevPath
prevpageButton.src=prevpagePath
forwpageButton.style.cursor="hand"
forwButton.style.cursor="hand"
runButton.style.cursor="hand"
prevButton.style.cursor="hand"
prevpageButton.style.cursor="hand"
}
else
{
buttonsEnabled = 0
forwpageButton.filters[0].transition = 2;
forwButton.filters[0].transition = 2;
runButton.filters[0].transition = 2;
prevButton.filters[0].transition = 2;
prevpageButton.filters[0].transition = 2;
prevButton.src=blankPath
prevpageButton.src=blankPath
forwpageButton.src=blankPath
forwButton.src=blankPath
runButton.src=blankPath
forwpageButton.style.cursor=""
forwButton.style.cursor=""
runButton.style.cursor=""
prevButton.style.cursor=""
prevpageButton.style.cursor=""
}
forwpageButton.filters[0].Play();
forwButton.filters[0].Play();
runButton.filters[0].Play();
prevButton.filters[0].Play();
prevpageButton.filters[0].Play();
stopButton.filters[0].Play();
}
この項目ではページ毎のコントロール･ボタンを表示設定します。｢Slide Show(スライドショー)｣ページですべてのボタンが表示されるいっぽう、｢Filmstrip(写真の選択)｣ページと｢Previews(写真の一覧)｣ページではウィンドウを閉じる｢ストップ･ボタン｣しか表示されなかったり、ボタン表示を変更する際のフェードイン、フェードアウト効果も、この項目の管理下です。したがって、視覚面での効果が必要なければ、ここを無視しても機能面での問題は起こりません。
機能面で重要なのが、｢viewer.htm｣のほぼ最後のほうにある以下の式⑤Ａです。
式⑤Ａ
<td width="32%" id=slideshowbuttons>
<p align="center">
<img id=stopButton type=button style="visibility:hidden;
Filter:revealTrans(duration=1)" onclick="exitButton()"
width="0" height="32" align="right">
<img id=forwButton type=button style="cursor: hand;
Filter:revealTrans(duration=1)" value="Forward"
onclick="nextImageButton()" width="32"
height="32" align="right">
<img id=runButton type=button style="cursor: hand;
Filter:revealTrans(duration=1)" value="Play"
onclick="runSlidesButton()" width="32"
height="32" align="right">
<img id=prevButton type=button style="cursor: hand;
Filter:revealTrans(duration=1)" value = "Back"
onclick="prevImageButton()" width="32"
height="32" align="right">
</td>
</table>
もし、コントロール･ボタンのサイズだけを小さくしたいなら、先の式③とこの式⑤の｢32｣をすべて｢24｣へ書き直すだけで構いません。ただし、その場合も小型版のコントロール･ボタン･セットをダウンロードしてご使用いただいたくと表示はよりいっそう美しくなります。逆に画像の繊細さを無視するならば、元の｢32｣から書き直す数値が大きければ大きいほど大きなボタンへ、そして小さければ小さいほど小さなボタンへ表示サイズは変更されるというわけです。
ともあれ、ボタンのサイズが変わっただけでは追加したボタンまで機能してくれないので、それを書き加えると次の式⑤Ｂのようになります。
式⑤Ｂ
<td width="32%" id=slideshowbuttons>
<p align="center">
<img id=stopButton type=button style="visibility:hidden; Filter:revealTrans(duration=1)" onclick="exitButton()" width="0" height="24" align="right">
<img id=forwpageButton type=button style="cursor: hand; Filter:revealTrans(duration=1)" value="Forwardpage" onclick="window.open('../前のスライドショーのディレクトリ名/helper.htm',null,'fullscreen=yes')" width="24" height="24" align="right">
<img id=forwButton type=button style="cursor: hand; Filter:revealTrans(duration=1)" value="Forward" onclick="nextImageButton()" width="24" height="24" align="right">
<img id=runButton type=button style="cursor: hand; Filter:revealTrans(duration=1)" value="Play" onclick="runSlidesButton()" width="24" height="24" align="right">
<img id=prevButton type=button style="cursor: hand; Filter:revealTrans(duration=1)" value = "Back" onclick="prevImageButton()" width="24" height="24" align="right">
<img id=prevpageButton type=button style="cursor: hand; Filter:revealTrans(duration=1)" value = "Backpage" onclick="window.open('../次のスライドショーのディレクトリ名/helper.htm',null,'fullscreen=yes')" width="24" height="24" align="right">
</td>
</table>
ここまでで一通りの改装工事は終わるわけですが、厳密にいうとまだ完璧ではありません。｢Slide Show(スライドショー)｣ページで表示されるボタンが、｢Filmstrip(写真の選択)｣ページと｢Previews(写真の一覧)｣ページで｢ストップ･ボタン｣を除いて隠れることはすでに述べました。他のスライドショーへ移動するために追加した２つのボタンもしかりです。ただ、これら２つのボタンが隠れることは隠れても、そこの部分へマウスを当てて左クリックすれば、表示された状態と同じく前後のページ(スライドショー)に移動してしまいます。
隠れたボタンが機能すること自体、使用上、実質的な問題はありません。したがって、これ以上の説明を省かせていただきますが、その点だけはご了承ください。前回、前々回を含め、もし｢ＸＰパワートイズ｣で作成するスライドショーの改造方法に関して何かご質問があるかたへは、メールをいただき次第、時間の許す限りお応えするつもりです。(完)
|
お断り