トリビア・ライフ - 天狼記

世の中の至る所にあるトリビア(主にPC上での物創りトリビア、生活トリビア)を発見する生活日記

カレンダー

ブログ内タグ検索

カウンター

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログの記事は長すぎると読んでもらうのも大変ですよね。

複数枚の画像を見せたい。でも、ブログの記事が長くなってしまう。

そういった方にお勧めなのが

マウスオーバーによる画像切り替え方法です。

ブログ作成(ブログランキング)

#基本的にはFC2で使用する場合を想定していますが、他のブログでも使用可能です。


手順① JAVAスクリプトファイルの読み込み

ブログのテンプレート設定の<title>~</title>の前にに↓の1行を追加してして下さい。

<script type="text/javascript" src="http://trivialife.web.fc2.com/js/blog_lib.js"></script>

※直接JAVAスクリプトファイルをダウンロードして使用する場合は、こちらからダウンロードして下さい。

Download [ blog_lib.js ]


手順② 表示する画像の用意

複数枚のサムネイル付き画像をファイルアップロードする。


手順③ ブログの記事を書く

赤文字の部分に用意した画像にあった内容を入れて下さい。

<!-- 画像表示切替[ここから] -->
<img src="最初に表示する画像のURL" alt="最初に表示する画像の名前" width="最初に表示する画像の横サイズ" height="最初に表示する画像の縦サイズ" name="war">

<a href="JavaScript:" onmouseover="look('1枚目の画像のURL');"><img src="1枚目の画像のサムネイルURL" alt="" border="0" width="1枚目の画像のサムネイルの横サイズ" height="1枚目の画像のサムネイルの縦サイズ" /></a>
<a href="JavaScript:" onmouseover="look('2枚目の画像のURL');"><img src="2枚目の画像のサムネイルURL" alt="" border="0" width="2枚目の画像のサムネイルの横サイズ" height="2枚目の画像のサムネイルの縦サイズ" /></a>
<a href="JavaScript:" onmouseover="look('3枚目の画像のURL');"><img src="3枚目の画像のサムネイルURL" alt="" border="0" width="3枚目の画像のサムネイルの横サイズ" height="3枚目の画像のサムネイルの縦サイズ" /></a>
<!-- 画像表示切替[ここまで] -->

サムネイルの表示位置、表示枚数はお好きなようにカスタマイズして下さい。
サムネイルは横に並べるて画像サイズをぴったりに合わせるとサンプルのように表示されます。

コメント

コメントの投稿

   管理者にだけ表示を許可する
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。