PC上手

パソコンまめ知識リンク集ご利用にあたってお問い合わせ
サイトマップ

Homeデスクトップノートブック周辺機器用語集カスタマイズ


パソコンまめ知識

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

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


<< 前月のまめ知識へ <2005年11月のまめ知識> 次月のまめ知識へ >>

2005年11月20日(日)

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

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

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

それでは、以下に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を使うと例えばこんなことができます。

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

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

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

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

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

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

写真1
写真2
写真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を使うと例えばこんなことができます。

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

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

内容 ポップアップ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月のまめ知識> 次月のまめ知識へ >>

サイト内検索



検索方法ヘルプ


文字の大きさ



まめ知識INDEX

パソコンまめ知識カテゴリ別一覧

2012年1月〜12月

情報ウィンドウを角丸に New
〜Google Maps API v3〜

ファイルの復元ソフト「Recuva」
〜フリーソフトなのに優秀〜

パソコン用メガネ
〜ブルーライトから目を守る〜

気軽に購入出来るAndroid端末
〜格安のAndroid端末のご紹介〜

かざぐるマウス
〜マウスをパワーアップ〜

2011年1月〜12月

Glary Utilities
〜パソコンメンテナンスツール〜

おすすめアプリ紹介
〜スマートフォンを活用〜

コンピュータグラス
〜目の疲れを軽減する〜

2010年4月〜12月

Windows7の高速化 vol.1
〜不要な効果をなくす〜

みんなで買ってお得に利用
〜クーポン共同購入〜

複数のメールを一箇所で管理
〜Gmailの活用〜

拡張子を表示する
〜ファイルの種類を確認する〜

2010年1月〜3月

Windows 7 機能一覧
〜知ってると便利な機能〜

ワンセグを閲覧する
〜パソコンで気軽にテレビを視聴〜

2009年10月〜12月

郵便年賀.jp
〜オンラインで年賀状作成〜

Office Live Workspace
〜オンラインでOffice〜

2009年7月〜9月

Security Essentials
〜無償ウイルス対策ソフト〜

Windows 7
〜Windowsの次世代OS〜

2009年4月〜6月

FLVファイルの再生
〜FLVP〜

YouTube等の動画のダウンロード・保存
〜Craving Explorer〜

Internet Explorer 8
〜高速化された最新版〜

2009年1月〜3月

IEの過去のバージョンで検証
〜Multiple IE〜

リアルタイムにHTML検証ツール
〜Firebug〜

ブログを設置する
〜システムの紹介〜

オンラインでウィルスチェック
〜VirusChief〜

2008年10月〜12月

パソコンを開けずにメモリを確認
〜メモリの増設等に重宝〜

パソコンのデータを完全消去
〜個人情報の保護〜

ケイサンワンコ
〜計算ゲームの紹介〜

2008年7月〜9月

IE6とIE7を共存させる
〜IE7 Standalone〜

WindowsでMacの圧縮形式を解凍
〜Aladdin Expander〜

悪意のあるソフトウェアの削除ツール
〜特定のウィルスを削除〜

2008年4月〜6月

逆順印刷、部単位で印刷
〜プリンターの印刷方法〜

単語登録、辞書ツールの活用
〜入力の手間を省く〜

読み方の分からない漢字を表示
〜言語バーの活用〜

2008年1月〜3月

ロリポップ
〜月額263円のレンタルサーバー〜

Windows Live スペース
〜無料のオンラインストレージサービス〜

Windows Live メッセンジャー
〜無料のコミュニケーションツール〜

タイピングピヨチ
〜タイピングゲームの紹介〜


それ以前のまめ知識
(パソコンまめ知識カテゴリ別一覧)

PC上手トップ  |  デスクトップ  |  ノートブック  |  周辺機器  |  用語集  |  カスタマイズ  |  パソコンまめ知識  |  パソコン購入ガイド


ページのTOPへ戻る

Copyright (C) 2004-2018 PC-JOZU. All Rights Reserved.