【特典】1)登録すると無料で質問できます。 2）アクセスアップＳＥＯ裏技質問ＯＫ！ 3）メルマガ発行虎の巻格安でお求め出来ます。（その他メルマガ総発行部数６５００部） ------人事の片腕 通販部からのお知らせ------------------------------- ●レディース館オープン（キャンペーン中送料無料） ウレックス→ http://e-career.hp.infoseek.co.jp/urex.html ●モテ浴衣福袋 8点セット（高級変り織 京都の呉服屋さんセレクト） （特典・着付け説明書もれなく進呈します） 河原です。開封ありがとうございます。 い┃き┃な┃り┃Ｈ┃Ｔ┃Ｍ┃Ｌ 【e-career-pro-co Information Mail】 ━┛━┛━┛━┛━┛━┛━┛━━━━━━━━━━━━━━ ◆今週の小技 ┃Ｉ┃Ｎ┃Ｄ┃Ｅ┃Ｘ┃2007.07.13 ◇ ┗ プルダウンメニューを利用してリンク集を作成する方法 Easy Web Design3 価格：￥ 3,424(定価：￥ 5,040) http://www.amazon.co.jp/dp/B000O2LABM/ref=nosim/?tag=ecareerproduc-22 ──────────────────────────── ■ プルダウンメニューを利用してリンク集を作成する方法 --------------------------------------------------------- ●今回は、プルダウンメニューを利用してリンク集を作成する方法を解説します。 たぶん、みなさんもどこかのホームページで似たようなテクニックに遭遇している のではないでしょうか？ そんなに難しくはないので試してみてください。 ●まずは、FORMを利用してプルダウンメニューを作成します。 この際に注意すべき点は、最初の項目に「▼リンク先を選択」などと表示し、 リンク機能として使わないことです。というのも、この項目は初めから選択され ている項目になるため、リンク用のJavaScriptを作動できないからです。 また、FORMタグとSELECTタグに名前（name属性）を付けておきます。 今回は、FORMタグに"form1"、SELECTタグに"link"という名前を付けました。 <FORM name="form1"> <SELECT name="link"> <OPTION>▼リンク先を選択</OPTION> <OPTION> トップページ</OPTION> <OPTION>メンタルサプリ</OPTION> <OPTION>ウレックス</OPTION> <OPTION>ウレックス「レディース館」</OPTION> </SELECT> </FORM> ●<OPTION>・・・・</OPTION>でいくつでの増やせます。 ●続いて、SELECTタグにonChangeイベントを追加し、選択項目を変更した際に 「OpenLink()」というJavaScript関数が実行されるようにします。 また、各OPTIONタグ（1番目を除く）にvalue属性を追加し、その値にリンク先のURL を指定します。 <FORM name="form1"> <SELECT name="link" onChange="OpenLink()"> <OPTION>▼リンク先を選択</OPTION> <OPTION value="http://e-career.hp.infoseek.co.jp/sample1.html"> トップページ</OPTION> <OPTION value="http://e-career.hp.infoseek.co.jp/mentarusapuri.html"> メンタルサプリ</OPTION> <OPTION value="http://e-career.hp.infoseek.co.jp/urex.html"> ウレックス</OPTION> <OPTION value="http://www.misetsuku.jp/e-career/shop_index.php"> ウレックス「レディース館」</OPTION> </SELECT> </FORM> ●あとは「OpenLink()」のJavaScript関数を自作するだけでテクニックが完成します。 この関数では、プルダウンメニューの何番目が選択されているか（selectedIndex） を変数「n」に代入します。selectedIndexは0から数えていくため、n=0の場合は 「▼リンク先を選択」の項目が選択されていることになります。 よって、「n=0でない場合」を条件に処理を分岐し、location.hrefを選択項目の value属性の値に変更します。これでlocation.hrefがリンク先のURLに置き換わり すなわちリンク先へ移動することができます。 <SCRIPT language="JavaScript"> <!-- function OpenLink(){ var n = document.form1.link.selectedIndex; if (n != 0){ location.href = document.form1.link.options[n].value; } } //--> </SCRIPT> -------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" <HTML> <HEAD> <TITLE>自分のＨＰタイトル</TITLE> </HEAD> <BODY> ●--以下がまとめたものです【コピペでリンク先名＆ＵＲＬ挿入】-------------- <FORM name="form1"> <SELECT name="link" onChange="OpenLink()"> <OPTION>▼リンク先を選択</OPTION> <OPTION value="http://e-career.hp.infoseek.co.jp/sample1.html"> トップページ</OPTION> <OPTION value="http://e-career.hp.infoseek.co.jp/mentarusapuri.html"> メンタルサプリ</OPTION> <OPTION value="http://e-career.hp.infoseek.co.jp/urex.html"> ウレックス</OPTION> <OPTION value="http://www.misetsuku.jp/e-career/shop_index.php"> ウレックス「レディース館」</OPTION> </SELECT> </FORM> <SCRIPT language="JavaScript"> <!-- function OpenLink(){ var n = document.form1.link.selectedIndex; if (n != 0){ location.href = document.form1.link.options[n].value; } } //--> </SCRIPT> ●-----ココまでコピペ-------------------------------------------- </BODY> </HTML> ------------------------------------------------------------- ●確認は コチラ⇒ http://e-career.hp.infoseek.co.jp/sample1.html ------------------------------------------------------------- 発信元： 【ＳＩＫ企画 ｅ-キャリアプロデュース】 運営サイト ■転職プロデュース「人事の片腕」 http://e-career.hp.infoseek.co.jp/ ■職場のメンタルヘルス 「メンタルサプリ」 http://e-career.hp.infoseek.co.jp/mentarusapuri.html ■通販部門 「【Ｕｒｅｘ】ウレックス」 http://e-career.hp.infoseek.co.jp/urex.html ●口コミはあなたから始まります。ご質問はコチラ ⇒ http://ecareer.dreamblog.jp/6/8/ 社内・友人など転送はご自由です。どんどん転送してください。 口コミはあなたから始まります。作りだしてください！ ------------------------------------------------------------------ Copyright (c) 2001-2006e-career pro All rights reserved. ※掲載記事の無断使用・転載を禁じます。 友人転送は大歓迎です。 ---------------------------------------------------------------------------- レディース館 キャンペーン中（送料無料）
