Java・JavaScript・DHTML 

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　常駐ｺﾝﾃﾝﾂ 4　　always_on_top4c.htm

ｽｸﾛｰﾙで流されず右上などに定位する小Winｴﾘｱ（DIVｺﾝﾃﾅ）に 、ｴｸｽﾌﾟﾛｰﾗｰ風の展開/折り畳みﾂﾘｰﾒﾆｭｰを表示。　　　DHTML、CSS、DOM。　　　　ﾂﾘｰﾒﾆｭｰ構造、ﾊｲﾊﾟｰﾘﾝｸなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　 小ｴﾘｱや、ﾊｲﾊﾟｰﾘﾝｸ、配置、配色の編集は簡単です。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ。

　

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、always_on_top4c.htm、nav_closed.gif、nav_open1.gif、〔任意 ：color-s.jpg、download.gif、おまけ：akfldopn.gif、akfldclose.gif〕 を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　※: 変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。　　　

　・　このDHTMLの実装方法は、always_on_top4c.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名） の、 <head>　〜　</head> の任意の行間に (*1)を、さらに <body>　〜　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。

　･　編集方法は、hogehoge.html をﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き編集します。　　　　下記の（例） (*1) と、(*2) を参考に太字部分の編集を任意に行います。　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 8.x〜 などで開いて。　　　　更新の確認は [F5]ｷｰ を押し、ｻｰﾊﾞｰやﾌﾞﾗｳｻﾞｰのｷｬｯｼｭｸﾘｱｰ、最新ﾃﾞｰﾀ読み込み（≠再ｱｸｾｽ）で行います。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像、*.jsなども転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

　･　関連情報 ： 色記号6、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。　　　Web Development、Web開発、MSDN IE8 HTMLとCSS、開発ﾂｰﾙでｻｲﾄを修正、ｽｸﾘﾌﾟﾄ ﾃﾞﾊﾞｯｸﾞの概要、HTMLとCSSのｻﾎﾟｰﾄ、CSSの改良点、IE7、IE6、XML、DHTML。

　

(*1) ：　always_on_top4c.htm （例）　　　　　　　　　挿入先の 　<head> 〜 </head>　の、〜 部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　  (*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕  　

ｼﾌﾄJIS使用（削除不可）

ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

<style type= 〜  </style>は（削除可）
(*1)〜(*3)表ﾀｲﾄﾙ背景

body 文字色　背景色　下線
ﾊｲﾊﾟｰﾘﾝｸ 〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
ﾌｫﾝﾄ

　

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent
お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

　

ﾂﾘｰﾒﾆｭｰのJavaScriptｿｰｽ


ﾒﾆｭｰｱｲｺﾝ画像ﾌｧｲﾙ名

　

　

　

　

　

ﾘﾝｸ行に一斉に表示するｱｲｺﾝﾌｧｲﾙ名（none：表示無し）

 　

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

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

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font {
font-size:12px;
line-height:13px;
}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ　　常駐コンテンツ 4c</title>

<script language="javascript">

function showIt(src) {

====  この間､説明を省略｡  ====

LIST-STYLE-IMAGE: url('nav_closed.gif')

}

.toc .open {

LIST-STYLE-IMAGE: url('nav_open1.gif')

}

.toc UL LI {

FONT-SIZE: 10pt; LIST-STYLE-IMAGE: url('none'); LIST-STYLE-TYPE: none

====  この間､説明を省略｡  ====

</style>

　

(*2) ：　always_on_top4c.htm　（例）　　　挿入先の 　<body> 〜 </body>　の、〜 部分にﾍﾟｰｽﾄします。

HTMLの編集方法　 (*2) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先のﾌｧｲﾙにﾍﾟｰｽﾄ、編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

JavaScriptﾀｸﾞ 背景　ﾘﾝｸ　表示済みﾘﾝｸﾝｸ　ｱｸﾃｭﾌﾞﾘﾝｸの各色

※： 色記号、2

常駐ｺﾝﾃﾝﾂJavaScriptｿｰｽ

　

　

　

　

　

小Win右配置 　座標（pixels）

ｺﾝﾃﾝﾂ幅 枠線 ｾﾙ間ｽﾍﾟｰｽ　ｾﾙ内ｽﾍﾟｰｽ 背景色 明罫線　　暗罫線

　

　

小Win背景色  ｾﾙ左寄せ

ﾌｫﾝﾄｻｲｽﾞ

ｺﾝﾃﾝﾂﾊﾞｰ（削除可）

吹き出し

背景　文字色　

ﾀｲﾄﾙ文字

　

初期閉じは open に。

初期閉じは、削除

URL　ﾒﾆｭｰｱｲｺﾝ画像ﾌｧｲﾙ名　画像ｻｲｽﾞ   < …… >は削除可

ﾀｰｹﾞｯﾄﾌﾚｰﾑ： _blank=新しいWin　_self=同じﾌﾚｰﾑ　_parent=親ﾌﾚｰﾑ　_top=ﾍﾟｰｼﾞ全体　main=<frameset>に記述したﾌﾚｰﾑ名 （例）

　

URL　吹き出し　ｻｲﾄ名

　

　

　

ﾒﾆｭｰは、<li class= ……　</li>と、<ul> …… </ul> で1ｾｯﾄ。

ﾘﾝｸの加減は、<li>　……　</li>行の追加・削除で。　連番自体は動作に無関係（不順可）。

以下、同様にﾒﾆｭｰの追加・削除・変更を。

　

 　

<body OnLoad="setVariables();checkLocation()" bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">

<p><script LANGUAGE="JavaScript">

/*

====  この間､説明を省略｡  ====

var child, parent, childNum = 0;

if ("B" == src.tagName) {

setTimeout("checkLocation()",10);

}

</script> </p>

<div id="object1" style="position:absolute; visibility:show; right:2px; top:4px; z-index:5"><div

align="right">

<table width="200" border="0" cellspacing="1" cellpadding="3" bgcolor="#F9F4FF" style="border-collapse: collapse" bordercolorlight="#E2DEE1

" bordercolordark="#CFC7CD">

<tr>

<td bgcolor="#FFFFFF" valign="top" align="left">

<font size="2">

<a href="http://　……　.html" target="_blank"

title="Java・JavaScript・DHTML・CSS・XML実装手順いろいろ">

<p><span style="background-color: #56484A; color: #FFEEF7">Java・JavaScript・DHTML</a></span><br>

<ul class="toc">

<li class="close"><b onmouseover="over(this)" onclick="showIt(this)" onmouseout="out(this)" title="クリック！！">ﾒﾆｭｰ 1</b>

<ul class="expanded">

<li><a target="_top" href="http://　……　.html"><img src="./color-s.jpg" width="11" height="11" alt="奇妙な散文、Jazzｺﾚｸｼｮﾝ、Java実装支援、=(・。.・)=友" border="0"></a><a href="http://　……　.html" target="_top" title="このﾍﾟｰｼﾞを破棄、直行、…*">太陽風ДζΨΠ∀</a></li>

<li><a href="http://www.cnn.com/SHOWBIZ/" title="ｴﾝﾀｰﾃｲﾒﾝﾄ−ｼｮｳﾋﾞｼﾞﾈｽ　＼^o^／">CNN.com - Entertainment</a></li>

====  この間､説明を省略｡  ====

<li><a href="http://　……　.html" target="_blank" title="クリック！！">WebSite 18</a></li>

</ul>

</li>

<li class="close"><b onmouseover="over(this)" onclick="showIt(this)" onmouseout="out(this)" title="クリック！！">ﾒﾆｭｰ 2</b>

<ul>

<li class="close"><b onmouseover="over(this)" onclick="showIt(this)" onmouseout="out(this)" title="クリック！！">ﾒﾆｭｰ 21</b>

<ul>

<li><a href="http://www.xxxx.xx.jp/xxxxx/xxxxx.html"><img src="download.gif" width="9" height="8" alt="ﾒｯｾｰｼﾞ" border="0"></a><a href="http://　……　">WebSite 211</a></li>

<li><a href="http://　……　.html" target="_blank" title="クリック！！">WebSite 213</a></li>

====  この間､説明を省略｡  ====

</ul>

</td>

</tr>

</table>

</div></div></font>