NetCommons Test and Study Site


  Product By K.Nagai
 
 

画像1・文字リストやサムネイルから画像表示

リストの花の名前をクリックして画像を表示する。
  • ゆり

  • チューリップ

  • ばら

  • コスモス

  • あじさい

ここに花の画像


サムネイル画像へのマウスオーバーで画像を表示する。


ゆりチューリップばらコスモスあじさい

1.画像の準備:この事例では、5個の画像を拡大サイズでアップロードし、サムネイル画像表示でstyle指定で縮小表示している。
2.初期画面(蝶)をアップし、HTML編集で、「id="image01"」(任意)を入れる。
3.花の名前の部分のHTMLは、
  <p onclick="photochange('xxx')">ゆり</p>
  ('xxx')」のxxx部分(パラメータ)は、アップロードした画像の「id=」以降の数値。
4.JavaScript関数部分は、 → (HTML5対応に修正 2012/4/24)
function photochange(bango){
document.getElementById("image01").src="./?action=common_download_main&upload_id=" + bango;
}
* 関数名、変数名は任意の文字列(注:先頭英字で英数小文字で)
 
Copyright(c) 2010 K.Nagai All Rights Reserved.