もっと見る⇔折りたたむ
当サイトのトップページで使っている小技です。
 下の「もっと見る」画像をクリックすると隠れていた部分が見え、「折りたたむ」画像をクリックするとその部分がまた隠されます。


 以下のソースをコピペして、htmlファイルとして保存してください。

 また、下の2つの画像をhtmlファイルと同じフォルダに保存してください。

もっと見る画像 show.gif 折りたたむ画像 hide.gif

 画像をhtmlファイルとは違うパスに置きたい場合は、htmlファイル中の画像のパスを書き換えてください。

ソース解読のためのヒント
ポイント1 : 「もっと見る」画像をdivタグで囲む
   初期状態は「もっと見る」画像です。この画像は通常通りimgタグで記述しますが、このimgタグをdivタグで囲みます。そしてdivタグのonclickイベントにJavaScriptの関数を指定します。
ポイント2 : 見えたり隠れたりする部分をdivタグで囲む
   見えたり隠れたりする部分もdivタグで囲みます。初期状態では非表示とするため、divタグでstyle="display:none"と指定しておきます。
ポイント3 : JavaScriptの関数で開閉および画像切り替え
   「もっと見る」画像が押されたときは、画像を「折りたたむ」に切り替え、ポイント2のdivタグ部分を表示します。
「折りたたむ」画像が押されたときは、画像を「もっと見る」に切り替え、ポイント2のdivタグ部分を非表示にします。


Yahoo!ブックマークに登録 Googleブックマークに登録 はてなブックマークに登録 livedoorブックマークに登録 deliciousブックマークに登録 Buzzurlブックマークに登録


トップ | このサイトについて | 管理者へメール | サイトマップ
Google www una.soragoto.net  
Copyright(c) 2009 - 2012 una All Rights Reserved.