テキスト ラベル 画像 ハイパーリンク ボタン
ポップ メニュー


ホーム へ       サンプルページ  ポップメニュー 8  pop_menu8.htm

テキストラベルや、画像、ハイパーリンク、ボタンから開く、多段ポップアップメニューです。      Java Applet。    フレームや、ポップアップニューWindowへの応用可。    メニュー構造、ハイパーリンクなどのカスタマイズはテキストエディターなどで可。    all対応。  VBScript : ie only    コピー、編集し、簡単にWebで応用できまっ、(^ ^)。

デモは、 [ポップメニュー] などのクリックで。

 

< ご使用方法 >

 ・ ローカル(=PC)への保存は、pop_menu8.htmPopupMenuApplet.classoritatami.gif(任意のアイコン画像例)を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。

 ・ このDHTMLの実装方法は、pop_menu8.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1) を、さらに <body> 〜 </body> の任意の行間に (*2) をペーストします。

 ・ 編集方法は、hogehoge.html を WordPad や SmipleText などのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。   アイコン画像などの変更は、(hogehoge.htmlなどの該当記述を準備した画像ファイル名に変更しても同じ。)    【テキストラベル】や【画像】、【ハイパーリンク】、【ボタン】 から、任意にタイプを選び、それぞれの Java Appletソースの開始 から 終了 までをコピー・ペーストします。 自在な配置は、Java Appletソース を表(テーブル)のセルに嵌めると簡単。     ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 4.x〜 などで開いて。    更新の確認は、ie、Netscapeやサーバーからのキャッシュデーター更新を、目的のページを表示し ieでF5キーを押し最新データ読み込みで行います(≠再アクセス)。   Netscapeは、Ctrl+Rキーで。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*.class なども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号62スタイルシートリファレンスホームページ開設入門が便利!。   Web& Internet SamplesWeb DevelopmentXMLDHTMLとは?ColorTableHTMLの色指定色見本

 

(*1) pop_menu8.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

<style type 〜 </style>は(削除可)

マウスオーバー時のテキスト  背景色 下線非表示

 

非マウスオーバー時の下線表示(逆も可)

 

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ

同じフレーム target="_self"
ページ全体  target="_top"
親フレーム  target="_parent"

お気に入り、タスクバーに表示するページ名(≠ファイル名)

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="faviconj.ico">

<style type="text/css"><!-- A:hover {

COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: none

}

A {

TEXT-DECORATION: underline

}

-->

</style>

<base target="_blank">

<title>サンプルページ  ポップメニュー 8</title> 

 

(*2) pop_menu8.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

※:<body> 部の編集 背景 リンク 表示済みリンクンク アクティブリンクの各色(任意値)

 

サンプル羅列のための表(テーブル)、削除可。

 

 

 

 

 

 

 

 

【テキストラベル】や【画像】、【ハイパーリンク】、【ボタン】 から任意に選び、Java Appletソースの開始から終了までをコピーします。 自在な配置は、表(テーブル)のセルに嵌めると簡単。 

 

テキストラベルサイズ

 

 

 

ラベル文字 

背景 テキスト色

 

フォント サイズ

 

 

太字、細字=normal

メニュー サイト名 URL

target= いろいろ

水平線

※:以下同様。

メニュー、ハイパーリンクの加減は、ブロック・行単位で。

 

 

 

アラート部分は、削除可。

アラート文字 ※:以下同様。

 

 

 

 

  

【画像】

 

 

 

 

画像エリアサイズ(生地 : 白色)

 

 

 

アイコン画像のURL・ファイル名(同階層に配置のケース)

 

 

 

  

 

 

 

 

 

 

 

【ハイパーリンク】

URL サイト名

 

  

 

 

 

 

 

 

 

 

 

 

 

 

サイト名

 

 

 

【ボタン】

 

ボタン文字

 

<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">

<TABLE WIDTH="100%">

<TR ALIGN="CENTER">

<TH>テキスト ラベル</TH>

<TH>画像</TH>

<TH>ハイパーリンク</TH>

<TH>ボタン</TH>

</TR>

<TR ALIGN="CENTER">

<TD WIDTH="25%">

<!-- 【テキストラベル】 ▼ ここから、コピー&ペーストします。 ------------ -->

<APPLET

CODE = "PopupMenuApplet.class"

CODEBASE = "."

NAME = "PopupMenuApplet1"

WIDTH = "100"

HEIGHT = "18"

MAYSCRIPT

>

<PARAM NAME="TITLE" VALUE="ポップ メニュー">

<PARAM NAME="BGCOLOR" VALUE="#34233E">

<PARAM NAME="TEXT" VALUE="#E9D2F4">

<PARAM NAME="SIZE" VALUE="11">

<PARAM NAME="FONT" VALUE="MSP Gothic,MS Gothic">

<PARAM NAME="STYLE" VALUE="BOLD">

<PARAM NAME="DATA" VALUE="

{メニュー 1{メニュー 11{Google-nw*http://www.google.com/intl/ja/*_blank}

  {hr}

{本検索*http://www.books.or.jp/*_blank}

{Playboy Special*http://www.playboy.com/magazine/newsstand/bol_vote99/vote01.html*_blank}

{サイト 114*http://www./……/xxx.html}

{メール−φ(.. )*mailto:xxxxx@xxx.net*_blank}

}

====  この間、説明を省略。  ====

}

{JavaScript Function call demo*script=JavaScriptfunc()}

{VBScript Function call demo*script=VBScriptfunc()}

">

</APPLET>

<!-- 【テキストラベル】 ▲ ここまで、コピー&ペーストします。 ------------ -->

</TD>

<TD WIDTH="25%">

<!-- 【画像】 ▼ ここから、コピー&ペーストします。 ------------ -->

<APPLET

CODE = "PopupMenuApplet.class"

CODEBASE = "."

NAME = "PopupMenuApplet2"

WIDTH = "24"

HEIGHT = "22"

MAYSCRIPT

>

<PARAM NAME="IMG" VALUE="oritatami.gif">

<PARAM NAME="DATA" VALUE="

{メニュー 1{メニュー 11{Google-nw*http://www.google.com/intl/ja/*_blank}

  {hr}

{本検索*http://www.books.or.jp/*_blank}

====  この間、説明を省略。  ====

{JavaScript Function call demo*script=JavaScriptfunc()}

{VBScript Function call demo*script=VBScriptfunc()}

">

</APPLET>

<!-- 【画像】 ▲ ここまで、コピー&ペーストします。 ------------ -->

</TD>

<TD WIDTH="25%">

<!-- 【ハイパーリンク】 ▼ ここから、コピー&ペーストします。 ------------ -->

<A HREF="index2.html" onMouseOver="document.PopupMenuApplet3.popup()">ポップ<APPLET

CODE = "PopupMenuApplet.class"

CODEBASE = "."

NAME = "PopupMenuApplet3"

WIDTH = "0"

HEIGHT = "0"

MAYSCRIPT

>

<PARAM NAME="DATA" VALUE="

{メニュー 1{メニュー 11{Google-nw*http://www.google.com/intl/ja/*_blank}

  {hr}

====  この間、説明を省略。  ====

{JavaScript Function call demo*script=JavaScriptfunc()}

{VBScript Function call demo*script=VBScriptfunc()}

">

</APPLET> メニュー</A>

<!-- 【ハイパーリンク】 ▲ ここまで、コピー&ペーストします。 ------------ -->

</TD>

<TD WIDTH="25%">

<!-- 【ボタン】 ▼ ここから、コピー&ペーストします。 ------------ -->

<FORM>

<INPUT TYPE=BUTTON VALUE="ポップ メニュー" onClick="document.PopupMenuApplet4.popup()">

<APPLET

CODE = "PopupMenuApplet.class"

CODEBASE = "."

NAME = "PopupMenuApplet4"

WIDTH = "0"

HEIGHT = "0"

MAYSCRIPT

>

<PARAM NAME="DATA" VALUE="

====  この間、説明を省略。  ====

{JavaScript Function call demo*script=JavaScriptfunc()}

{VBScript Function call demo*script=VBScriptfunc()}

">

</APPLET>

</FORM>

</TD>

</TR>

</TABLE>

</CENTER>

<!-- 【ボタン】 ▲ ここまで、コピー&ペーストします。 ------------ -->

<SCRIPT LANGUAGE="VBScript">

<!--

Sub VBScriptfunc

msgbox "VBScript!からようこそ、=(^。^)="

====  この間、説明を省略。  ====

}

function JavaScriptfunc() {

</SCRIPT>

<hr size="0">

< 補足 >    適時参照あれ!。

 ・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。