上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

先日の超簡易版の画像を入れ替えるJavaScriptにちょっとだけテコ入れしました。


JavaScript

var imgURL = "http://blog-imgs-32.fc2.com/s/o/m/soma1080/";
var mainImgs = ["twitter.png","google.png","flickr.png","facebook.png"];
function change( pictNo ){
document.mainImg.src = imgURL + mainImgs[ pictNo ];
}

HTML

<div id="main_view">
	<img name="mainImg" src="twitter.png" width="200" height="200" />
</div>
<ul id="item_list">
	<li><img id="twitter" src="twitter-thumb.png" width="48" height="48" onclick="change(0);" /></li>
	<li><img id="google" src="google-thumb.png" width="48" height="48" onclick="change(1);" /></li>
	<li><img id="flickr" src="flickr-thumb.png" width="48" height="48" onclick="change(2);" /></li>
	<li><img id="facebook" src="facebook-thumb.png" width="48" height="48" onclick="change(3);" /></li>
</ul>

※CSSは変更していないので割愛


見た目の動作自体はまったく同じですが、JavaScriptの中身が変わっています。それに伴ってHTMLもちょっとだけ変更。


何が変わったかと言いますと

  • ・サムネイルはサムネイル用に小さい画像を用意
  • ・画像変更用のアドレスを配列で準備
  • ・引数は番号だけを渡す this.src → 数字(今回は0~3)


前回よりはちょっとクラスアップした感じでしょうか。
※前回同様li要素に設定されているsrc属性は実際のものとは異なります。

Comment
Trackback













管理者にだけ表示を許可する

Comment form

openclose

カテゴリ一覧

そま宗助

  • Author:そま宗助
  • タイ生まれのちょっと変な?日本人。
    農学博士の父とブラジル日系1世の母の間に生まれたため、普通の日本人とはちょっと違う視点で世界を見つめる男。

    最近、勉強会やカンファレンスにちょいちょい顔出ししてます。

    読書週間継続中?

    ストレングスファインダー
    1.収集心
    2.学習欲
    3.共感性
    4.指令性
    5.運命思考
プロフィール

※注意書き※
当ブログに掲載されているJavaScriptの動作確認はFirefoxでのみ行っております。他ブラウザでの動作に関しては保障できませんのでご注意ください。






1キロバイトの素材屋さん
フリーエリア
FC2カウンター

名前:
メール:
件名:
本文:

メールフォーム

Page Top

Powered by FC2 Blog |

FC2Ad

| Template Design by スタンダード・デザインラボ

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