Slideshow、意外に奥が深く、
説明しているうちに記事も5個目になりました。
（全7回で完結する予定です。）
今回はオリジナル画像で写真送りボタンをつけたいと思います。
スクリプトはこちら
[Slideshow]
http://www.electricprism.com/aeron/slideshow/
◆ナビゲーションボタンの表示
＜事前準備＞
ナビゲーション用の画像を準備します。
「戻る」「進む」「現在位置」「指定」用の3種類。
「現在位置」「指定」はnavigation:’arrows+’の場合に必要となります。
画像はCSSに直接指定するので名称は何でもかまいません。
このような画像を準備しました。
[戻る] 
[現在位置] 
[指定] 
[進む] 
こういう画像を探したり、自分の好みに加工するところが
私にとって一番骨の折れるところだったりします。
今回はここのサイトが大活躍。
[mini-image-box]
http://www.web-toolbox.net/abc/index.htm
＜HTMLとScript＞
navigation:’arrows’ ：進むボタンと戻るボタンが表示されます。
navigation:’arrows+’ ：進むボタンと戻るボタン、途中の画像指定ボタンが表示されます。
＜CSS＞
サンプルとして載っていたCSSを解析してみました。
サムネイルと異なり、CSSの背景画像に自分が準備した画像を指定することになります。
div.slideshow_arrows ul {
background: #ffddff;
/* 位置：絶対指定で写真の右下にボタンを配置 */
position: absolute;
bottom: 0;
right: 0;
overflow: hidden;
padding: 4px 1px;
/* 写真より上に表示 */
z-index: 1000;
}
div.slideshow_arrows ul a {
/* ページ指定用ボタン */
background: url('../images/page.gif') no-repeat;
cursor: pointer;
display: block;
float: left;
height: 10px;
width: 10px;
margin: 0px;
overflow: hidden;
}
div.slideshow_arrows ul a.prev {
/* 戻るボタン */
background: url('../images/prev.gif')no-repeat;
}
div.slideshow_arrows ul a.next {
/* 次へボタン */
background: url('../images/next.gif')no-repeat;
}
div.slideshow_arrows ul a.prev:hover,
div.slideshow_arrows ul a.next:hover {
/* 背景画像表示位置を下に10pxずらすことで色の違う矢印を表示 */
background-position:0px -10px;
}
div.slideshow_arrows ul a.active{
/* 現在表示中の写真を示すボタン */
background: url('../images/active.gif') no-repeat;
}
div.slideshow_arrows ul li {
/* ボタンを横並びにする */
float: left;
list-style: none;
}
z-index:で写真より上にボタン領域がくるようにし、
position: absolute;/ bottom: 0;/right: 0;
で、写真の右下に固定しました。
ここをいじれば好きな位置に写真送り領域を配置できます。
a:hover時にbackground-position:0px -10px;を指定することで、
マウスオーバー時は上の画像の下半分（違う色の矢印）
が表示されるようにしています。
前回と同じ猫写真で実装してみました。
◆簡単な解説
前回と今回で紹介しているナビゲーション表示の方法ですが、
簡単に仕組みを解説します。
なぜCSSを指定すればナビゲーションの調節ができるのか、という点です。
（翻訳が間違っているかもしれないので、正確なところは保証できません。）
<div id='navTest' class='slideshow'>
<img src='./images/1.jpg' alt='1'/>
</div>
スライドショーのスクリプトが実行されると、上記HTMLソースが動的に
<div id='navTest' class='slideshow'>
<img src='./images/1.jpg' alt='1'/>
</div>
<ul>
<li><a>[サムネイルやナビゲーション画像]</a></li>
<li><a>[サムネイルやナビゲーション画像]</a></li>
</ul>
このような形になるようです。
<li>内にサムネイル画像やナビゲーションボタンが<a>タグに囲まれて配置されます。
また、ナビゲーション時の「進む」画像の<a>タグにはclass=’next’ 、
ナビゲーション時の「戻る」画像の<a>タグにはclass=’prev’ 、という指定がつくようです。
だから、[.(画像div class名) ul] や [.(画像div class名) ul a(.prev/.next) ]にCSSを指定すると
ナビゲーション部分の調節ができる、という仕組みのようです。
次回はかなり表示がおもしろくなりそうな[transition:]プロパティと
（実は今回のサンプルでも使ってみました。）
captionを表示する方法についてやってみたいと思います。