前に書いたサムネイルにマウスオーバーしたら画像を切り替える を、
mootools1.2使ってフェードインとかつけたサンプル。
注意※ソースはmootools1.2用なので1.1では多分動きません。
<div id="change_image"> <div id="view"> <p id="myImg"><img src="img1.jpg" alt="Sample Image" width="400" height="320"/></p> <p class="comment" style="display:block">イメージ1コメント</p> <p class="comment" style="display:none">イメージ2コメント</p> <p class="comment" style="display:none">イメージ3コメント</p> <p class="comment" style="display:none">イメージ4コメント</p> </div> <ul id="thumbs"> <li><img src="img1_thumb.jpg" alt="Sample Image01" width="100" height="80" /></li> <li><img src="img2_thumb.jpg" alt="Sample Image02" width="100" height="80" /></li> <li><img src="img3_thumb.jpg" alt="Sample Image03" width="100" height="80" /></li> <li><img src="img4_thumb.jpg" alt="Sample Image04" width="100" height="80" /></li> </ul> <p class="cl">右の画像をクリックすると大きな画像が表示されます。</p> </div>
コメントはサムネイルと同じ順番で全部ソースの中に書いて、styleでdisplay:noneにしておく。
サムネイルとコメントはソース上のを勝手に拾う。
jsソースは書き散らして長いので設定以外割愛。ファイル見てください。
var viewarea =$('myImg'); // メイン画像のある要素のID var thumb = $("thumbs").getElements("img"); // サムネイル画像のあるID(前者) var comment =$$('p.comment'); // コメントの要素とクラス var mag = 4; //サムネイル縮小率 var regrep = "_thumb"; //サムネ画像の名前から取る文字列
new Elementで画像作るときにサムネイルの縦横サイズを取得して、
指定した倍率をかけて元の画像サイズに設定してます。
同じ比率で縮小してないとサイズが狂うので注意。
サムネイルクリック時のborderが必要なければ、addevent function内にある
thumb.each(function()
のくだりを削除する。
“Image change script02” をダウンロード
WTN-imgChange02.zip – 2321 回のダウンロード – 227.10 KB