パソコンまめ知識（JavaScript講座）：PC上手

サイトマップ

PC上手トップ > パソコンまめ知識（2005年11月）

このページでは、パソコンに関するマメ知識や気になるモノ等を日記形式でご紹介していきます。

[index]

JavaScript講座第3回　～プルダウンメニューでURL変更～

JavaScript講座第2回　～画像を切り替える～

JavaScript講座第1回　～ポップアップWindowを開く～

<< 前月のまめ知識へ

＜2005年11月のまめ知識＞

次月のまめ知識へ >>

2005年11月20日（日）

■JavaScript講座第3回　～プルダウンメニューでURL変更～

自分で公開しているホームページに、ちょっとした動きを付けてみてはいかがでしょうか。前回は「画像を切り替える」の紹介をしましたが、今回は「プルダウンメニューでURL変更」のためのJavaScriptを紹介します。JavaScriptを使うと例えばこんなことができます。

・現在の日時を表示する
　
　 ※お使いのブラウザによっては動作しないことがあります。

それでは、以下にJavaScriptの記述方法を紹介していきます。JavaScriptの記述はHTMLと同じようにテキストエディタで行います。まずは実用的なものから紹介していきたいと思います。

内容	プルダウンメニューでURL変更
記述	onchange=""

【解説】
HTMLのフォームタグでプルダウンを作成し、リンクさせたいページやサイト内を表示させます。そしてプルダウンメニューで選択された項目に応じてJavaScriptで移動先を変更しています。

【例】
プルダウンメニューで選択したサイト（URL）に移動します。

 <html> <head> <title>Myホームページ</title> </head> <body bgcolor="#ffffff"> function urlChange(OBJ){ if(OBJ.urlList.selectedIndex == 1){ location.href = "http://www.yahoo.co.jp/"; }else if(OBJ.urlList.selectedIndex == 2){ location.href = "http://www.google.co.jp/"; }else if(OBJ.urlList.selectedIndex == 3){ location.href = "http://www.msn.co.jp/"; } } //urlChange end <form> <select name="urlList" onchange="urlChange(this.form)"> <option>選択</option> <option>Yahoo!</option> <option>Google</option> <option>msn</option> </select> </form> </body> </html>

2005年11月12日（土）

■JavaScript講座第2回　～画像を切り替える～

自分で公開しているホームページに、ちょっとした動きを付けてみてはいかがでしょうか。前回は「ポップアップWindowを開く」の紹介をしましたが、今回は「画像を切り替える」ためのJavaScriptを紹介します。JavaScriptを使うと例えばこんなことができます。

・ブラウザを移動する
　【←】　【↑】　【↓】　【→】
　 ※お使いのブラウザによっては動作しないことがあります。

内容	画像を切り替える
記述	document.オブジェクト名.src = URL

※「オブジェクト名」は、切り替える画像に「name」で指定した名前が入ります。
※「URL」には切り替え後の画像のURLを入れます。

【解説】
画像を切り替えるJavaScriptを使うことで、例えば小さなサムネール画像をクリックすることで大きい画像を表示するように出来ます。これの応用でメニューボタンなどのロールオーバー（ボタンを光らせたりする）なども出来るようになります。（PC上手の上にあるメニューのような効果）

【例】
左側にあるサムネール（3枚の小さな写真）をクリックすると、右側にそれぞれの大きな写真が表示されます。（ブラウザの設定によっては正常に動作しないことがあります）

<html> <head> <title>Myホームページ</title> </head> <body bgcolor="#ffffff"> <table border="0" width="470" cellpadding="0" cellspacing="0"> <tr> <td width="120"> <a href="javascript:document.ph01.src = 'mame/img/chg01.jpg'; void(0);"> <img src="mame/img/chg01.jpg" width="100" height="70" alt="写真1" border="0"></a><br> <a href="javascript:document.ph01.src = 'mame/img/chg02.jpg'; void(0);"> <img src="mame/img/chg02.jpg" width="100" height="70" alt="写真2" border="0" vspace="10"></a><br> <a href="javascript:document.ph01.src = 'mame/img/chg03.jpg'; void(0);"> <img src="mame/img/chg03.jpg" width="100" height="70" alt="写真3" border="0"></a><br></td> <td width="350" align="right"><img src="mame/img/chg01.jpg" width="329" height="230" alt="拡大写真" name="ph01"></td> </tr> </table> </body> </html>

2005年11月6日（日）

■JavaScript講座第1回　～ポップアップWindowを開く～

自分で公開しているホームページに、ちょっとした動きを付けてみてはいかがでしょうか。ホームページの作成については以前に紹介しましたが、今回は動きを付けるためのJavaScriptを紹介します。JavaScriptを使うと例えばこんなことができます。

・【画面を揺らす】
・右の画像を変更する
　【縮小する】　【元のサイズに戻す】　【拡大する】
　 ※お使いのブラウザによっては動作しないことがあります。

内容	ポップアップWindowを開く
記述	window.open('URL','ウィンドウ名','属性')

※「URL」には開かせたWindowに表示するページのURLを記述します。
※「ウィンドウ名」には開かせたWindowに名前を付けることで、Windowを制御します。
※「属性」には開かせたWindowのスクロールバーの有無などの指定をします。

【解説】
window.openで新規にウィンドウを開くことで、ウィンドウの縦と横のサイズを指定できたり、スクロールバーやメニューバーなどの有無、ウィンドウのリサイズ（大きさの変更）が可能かどうかなど、HTMLだけでは出来なかった細かい指定が可能になります。属性の一覧は下のようになります。

■属性一覧

width	横幅の長さ。pixcelで。
height	縦幅の長さ。pixcelで。
scrollbars	スクロールバーの有無。yesかnoで。
status	ステータスバーの有無。yesかnoで。
toolbar	ツールバーの有無。yesかnoで。
location	ロケーションボックスの有無。yesかnoで。
resizable	リサイズが可能かどうか。yesかnoで。
status	ステータスバーの有無。yesかnoで。
menubar	メニューバーの有無。yesかnoで。
directories	ディレクトリボタンの有無。yesかnoで。

【例】
・ Windowを開く（Yahoo!のサイトが表示されます）
・属性は省略も出来ます。

 <html> <head> <title>Myホームページ</title> </head> <body bgcolor="#ffffff"> <a href="javascript:void(0);" onclick="window.open('http://www.yahoo.co.jp/', 'yahooWin','width=800,height=600,scrollbars=yes,status=no,toolbar=no,location=no, menubar=no,resizable=yes')">Windowを開く（Yahoo!のサイトが表示されます）</a> <a href="javascript:void(0);" onclick="window.open('http://www.yahoo.co.jp/', 'yahooWin','width=800,height=600,')">属性は省略も出来ます。</a> </body> </html>

<< 前月のまめ知識へ

＜2005年11月のまめ知識＞

次月のまめ知識へ >>