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

超簡易版の画像を入れ替えるJavaScript。画像を入れ替えるだけの本当に簡単なものです。


JavaScript

function change( pict ){
	document.mainImg.src = pict;
}

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.png" width="48" height="48" onclick="change(this.src);" /></li>
	<li><img id="google" src="google.png" width="48" height="48" onclick="change(this.src);" /></li>
	<li><img id="flickr" src="flickr.png" width="48" height="48" onclick="change(this.src);" /></li>
	<li><img id="facebook" src="facebook.png" width="48" height="48" onclick="change(this.src);" /></li>
</ul>

CSS

#main_view{
	width: 230px;
	border: 1px solid #999;
	margin: 10px 10px;
	padding-left: 30px;
}
#item_list li{
	float: left;
	list-style: none;
	border: 1px solid #999;
	margin: 0 10px 0;
}

仕組みとしてはli要素にonclickイベントで大きく表示されている画像のsrc属性を変更する というもので、引数にthis.srcとすることでli要素に設定されている画像のsrc属性を取得しています。なので、li要素に設定されているのと同じ画像が大きな画像として表示される形になっています。この方法はサムネイル画像を用意しなくてもいいという利点がありますが、表示させたい画像が大きければ大きいほどサムネイルの画像容量が大きくなるという欠点があるので実用には向かないかと… あくまで習作のものですね。
※注意 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ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。