
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　

　　　　　◆◇◆タグメモ◆◇◆

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊　



【アクション別定番セットコピペ用】

――――――――――――
◆閉じるボタン（単独）◆
<form action="閉じるページのアドレス.html">
<input type="button" value="とじる" onclick="window.close()" onkeypress="alert('OK')">
</form>

――――――――――――
◆ボタンで小さいページを開く1（単独）◆
<form action="javascript:history.back();">
<input type="button" onclick="window.open ('開くページ.html', 'new','toolbar=yes, location=no, directories=yes, scrollbars=no, resizable=no, status=no,width=ページのサイズ,height=500');" value="ボタンの文字">
</form>

◆ボタンで小さいページを開く2（↓のヘッダ指定も必要）◆
<form>
<input type="button" value="♪色の見本を見る" onclick="open_win()">
</form>

◆画像でで小さいページを開く◆
<a href="開くページ.html" onclick="javascript:new_win1();return false"><img src="画像名/アドレス" width="60" height="24" alt="画像" border="0"></a>

☆ヘッダに記入する構文☆
<meta http-equiv="content-script-type" content="text/javascript"> 
<script type="text/javascript">
<!--
function new_win1(){
window.open("information.html","","width=750,height=550");
}
//-->
</script>
<noscript>
JavaScript対応ブラウザで表示してください。
</noscript>
　↓
表示されるウインドウの状態は
　　menubar=yes,toolbar=yes, 
などのところで設定ができる
それぞれを yes か no で指定し、表示するかしないかなどの細かい設定をする
menubar	メニューバー
toolbar	ツールバー
location　アドレスバー
status	ステータスバー
scrollbars　スクロールバー
resizable　サイズ変更


――――――――――――
◆一行テキストボックスにいくつかのメッセージを順に表示させる◆
<form name="myForm1">
<input type="text" name="mymes" size="70"
 style="text-align:center;
 color:#0099FF;
 font-size:12pt;
 background-color:#F0F8FF;
">
</form>

☆ヘッダに記入する構文☆
<script language="javascript">
<!--
smes=new array(5);
smes[0]="ミー君";
smes[1]="ウンコ太郎";
smes[2]="ああああああ";
smes[3]="いいいいいい";
smes[4]="うううううう";
n=0;
function some_mes(){
document.myform1.mymes.value=smes[n];
n++;
if(n==5){n=0} →5/５列
setTimeout("Some_Mes()",5000);　→5000/５秒　3000/3秒
}
//-->
</script>

☆bodyタグに記入する構文☆
<body onload="some_mes()">

――――――――――――
◆オンマウスで画像入れ替え◆
<!--　画像入れ替えリンクアイコン　-->
<div align="center" style="margin: 0px 0px 20px 0px;">
<a href="リンク先.html" target="blank">
<img src="元画像アドレス" width="400" height="135" border="0" onmouseover="this.src='オンマウスで表示する画像'" onmouseout="this.src='元画像アドレス'" alt="☆☆へリンク">
</a>
</div>
<!--　画像入れ替えリンクアイコン　-->

――――――――――――
◆アクセスする度に画像入替え◆
<script type="text/javascript">
<!--
var imgURL = ["ehagaki/1.jpg", "ehagaki/2.jpg", "ehagaki/3.jpg", "ehagaki/4.jpg",];
var n = Math.floor(Math.random() * imgURL.length);
document.write('<img src="'+imgURL[n]+'">');
// -->
</script>

――――――――――――
◆ツリーメニュー1◆
☆ヘッダに記入する構文☆
<title>ギャラリートップページ</title>
<style type="text/css">
<!--
body {
.tree { line-height: 130%; }
.tree a { text-decoration: none; }
-->
</style>
<script type="text/javascript">
<!--
function init() {
  if (!document.getElementsByTagName) { return; }
  var objs = document.getElementsByTagName("div");
  for (i = 0; i < objs.length; i++) {
    if (objs[i].className == "titem") {
      objs[i].style.display = "none";
    }
  }
}
function func(id) {
  if (!document.getElementsByTagName) { return false; }
  var obj = document.getElementById(id);
  if (obj.style.display == "block") {
    obj.style.display = "none";
  } else {
    obj.style.display = "block";
  }
  return false;
}
// -->
</script>
</head>

☆bodyに記入する構文☆
<!--　ここからツリー　-->
<div class="tree">
<!--　任天堂系のリスト　-->
 <div>　<a href="#" onclick="return func('nin')"><font size="3">任天堂系</font></a></div>
 <div class="titem" id="nin">
   <div style=" letter-spacing : 4px; font-size: 8pt; ">
　<a href="gallery/g_nin1.html" target="g_top">■</a>
<a href="gallery/g_nin2.html" target="g_top">■</a>
<a href="gallery/g_nin3.html" target="g_top">■</a>
<a href="gallery/g_nin4.html" target="g_top">■</a>
<a href="gallery/g_nin5.html" target="g_top">■</a>
<a href="gallery/g_nin6.html" target="g_top">■</a>
<a href="gallery/g_nin7.html" target="g_top">■</a>
<a href="gallery/g_nin8.html" target="g_top">■</a><br>
　<a href="gallery/g_nin9.html" target="g_top">■</a>
<a href="gallery/g_nin10.html" target="g_top">■</a>
<a href="gallery/g_nin11.html" target="g_top">■</a>
<a href="gallery/g_nin12.html" target="g_top">■</a>
<a href="gallery/g_nin13.html" target="g_top">■</a>
<a href="gallery/g_nin14.html" target="g_top">■</a>
<a href="gallery/g_nin15.html" target="g_top">■</a>
<a href="gallery/g_nin16.html" target="g_top">■</a><br>
　<a href="gallery/g_SB_kyara.html" target="g_top">Ｘ</a>
  </div>
</div>
<!--　任天堂系のリスト　-->
</div>
<!--　こまでツリー　-->

◆ツリーメニュー2◆
<script language="javascript">
<!--
function expand(id) {
if (id.style.display == "none") {
id.style.display = "";
}
else {
id.style.display = "none";
}
window.event.cancelBubble = true;
}
// -->
</script>
<span class="list" onclick="expand(a);">最初に表示する文字</span>
<div id="a" style="display:none">クリック時に出る文字</div><br>
↑
ツリーメニューを増やしたい場合は、
　<span class="list" onclick="expand(a);">最初に表示する文字</span>
　<div id="a" style="display:none">クリック時に出る文字</div>
　を増やすだけでいくつでも増やす事ができます。
　その際には、aという所をそれぞれ別の 半角英文字に書き換えて下さい。
　　↓
<span class="list" onclick="expand(a);">テスト１</span>
<div id="a" style="display:none">結果２</div>
<br>
<span class="list" onclick="expand(b);">テスト２</span>
<div id="b" style="display:none">結果２</div>
☆参考→http://sussiweb.com/hp/html/font/22.htm

◆ツリーメニュー3（アクセシビリティ高）◆
☆ヘッダに記入する構文☆
<script type="text/javascript"><!--
if (document.getElementById)
 document.write('<style type="text/css"> .tree { display: none; }<'+'/style>');

function tree(id) {
 if (document.getElementById(id).style.display == "block")
  document.getElementById(id).style.display="none";
 else document.getElementById(id).style.display="block";
}
// --></script>
☆bodyに記入する構文☆
<a href="javascript:tree('click4');" title="クリック！">クリック４</a><br>
<div id="click4" class="tree">
├<a href="未設定" title="作成中です" target="未定">妖しいページ </a><br>
└<a href="未設定" title="教えられません" target="未定">秘密のページ </a><br>
</div>
<span onclick="tree('click5');" title="クリック！" style="cursor:pointer; cursor:hand;">クリック５</span><br>
<div id="click5" class="tree">
├<a href="未設定" title="作成中です" target="未定">妖しいページ </a><br>
└<a href="未設定" title="教えられません" target="未定">秘密のページ </a><br>
</div>
☆参考→http://amenti.usamimi.info/treemenu.html

◆ツリーメニュー4（自動開閉）◆
☆ヘッダに記入する構文☆
<script type="text/javascript"><!--
function tree2(menu_class,menu_id) {
 var div=document.getElementById(menu_id);
 if (div.style.display == "block") div.style.display="none";
 else {
  var sib=div.parentNode.childNodes;
  for (var i=0; i < sib.length; i++)
   if (sib[i].className == menu_class) sib[i].style.display="none";
  div.style.display="block";
 }
}
// --></script>

<style type="text/css"><!--
.tree { display:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
--></style>
☆bodyに記入する構文☆
<a href="javascript:tree2('tree','menu1');" title="クリック！">クリック１</a><br>
<div class="tree" id="menu1">
├<a href="未設定" title="作成中です" target="未定">妖しいページ</a><br>
└<a href="未設定" title="教えられません" target="未定">秘密のページ</a><br>
</div>

<a href="javascript:tree2('tree','menu2');" title="クリック！">クリック２</a><br>
<div class="tree" id="menu2">
├<a href="未設定" title="忘れました" target="未定">アホなページ</a><br>
├<a href="未設定" title="ぶっ飛びました" target="未定">ハイなページ</a><br>
└<a href="未設定" title="公開できません" target="未定">シャイなページ</a><br>
</div>

<a href="javascript:tree2('tree','menu3');" title="クリック！">クリック３</a><br>
<div class="tree" id="menu3">
├<a href="未設定" title="封印されました" target="未定">邪悪なページ</a><br>
└<a href="未設定" title="実在しません" target="未定">幻のページ</a><br>
</div>
☆参考→http://amenti.usamimi.info/treemenu.html

――――――――――――
◆文字をポイントしたときに画像をかえる◆
<script language="javascript">
<!--
function gazou(mysrc){
document.myimg.src=mysrc;
}
//-->
</script>
<div align="center" style="margin: 0px 0px 0px 0px;">
<a href="JavaScript:void(0)" onMouseOver="gazou('images/icons1.gif')">パンダ</a>
<a href="JavaScript:void(0)" onMouseOver="gazou('images/icons2.gif')">ペンギン</a>
<a href="JavaScript:void(0)" onMouseOver="gazou('images/icons3.gif')">ねこ</a>
<a href="JavaScript:void(0)" onMouseOver="gazou('images/icons4.gif')">ねずみ</a>
<a href="JavaScript:void(0)" onMouseOver="gazou('images/icons5.gif')">ライオン</a>
<br><br>
<img name="myimg" src="images/icons1.gif" border="0" width="32" height="32">
</div>
☆参考→http://www.sky.sannet.ne.jp/masapine/java_gazou3.html

――――――――――――
◆リスト・見出しタグ（上下マージン有）◆
<dl><dt>  </dt><dd>  </dd></dl> ←←リスト表示

<dl>
<dt>リスト小見出し（定義）</dt>
<dd>一段下げてリスト内容表示（定義の説明）</dd>
</dl>

<ul><li>リスト</ul>-----黒丸（●）りすと 
<ul>=順序の無いリスト
<ol>=順序付きリスト-----数字リスト（1, 2, 3, ...）

【例】
<ol>
<li>リスト
</ol>
start=2-----2番目から表示

<ol type="a"><li>リスト</ol>---アラビア数字付きリスト（i, ii, iii, ...）
<ul type="#"><li>リスト</ul>-----白丸や黒四角を使用する
（#=disc：黒丸 circle：白丸 square：四角）


――――――――――――
◆レイヤーの例文◆
<layer bgcolor="#99FFFF"
  top=0  left=0  WIDTH=100 height=100>AAA</layer>
<layer bgcolor="#FF99FF"
  top=30 left=30 WIDTH=100 height=100>BBB</layer>
<layer bgcolor="#FFFF99"
  top=60 left=60 WIDTH=100 height=100>CCC</layer>
　　-------三枚の色紙が重なった感じになる

<layer>
above は上になるべきレイヤ
below は下になるべきレイヤ
z-index は重なり順序
⇒z-index:#;
要素同士が重なって表示される場合の、重なりの順序を指定します。#に指定した数値が大きなものほど前面に表示されます。

【例1】
<div style="
 position:absolute;
 width:50px;
 height:50px;
 z-index:2;
 background-color:green;
 top:10px;
 left:10px;"></div>
<div style="
position:absolute;
 width:50px;
 height:50px;
 z-index:3;
 background-color:blue;
 top:40px;
 left:30px;"></div>
<div style="
position:absolute;
 width:50px;
 height:50px;
 z-index:1;
 background-color:red;
 top:20px;
 left:50px;"></div>

【例2】
<div style="
 top :180px;
 position : absolute;
 z-index : -2;
" id="Layer1">
<IMG src="☆.jpg" width="600" height="270" border="0">
</div>
<div style="
 top :180px;
 position : absolute;
 z-index : -1;
 " id="Layer2">
<IMG src="☆.gif" width="600" height="270" border="0">
</div>
<div style="
 top : 500px;
 position : absolute;
 z-index : 1;
" id="Layer3">
<IMG src="☆.jpg" width="600" height="220" border="0">
</div>

【例3】----ＯＫセット
<!--　花ろうそく　-->
<div style="
 background-repeat: no-repeat;
 background-image : url(rou_04.jpg);
 background-attachment: fixed;
 background-position: 50% 100%;
 z-index : 3;
">　　----閉じる「</div>」は無くて平気のよう
<!--　花ろうそく　-->

――――――――――――
◆一定時間で閉じるウィンドウ◆
<html>
<head>
<title>TAG index Webサイト</title>
<script type="text/javascript">
<!--
function subwin(){
window.close(); // サブウィンドウを閉じる
}
// -->
</script>
</head>
<body onLoad="setTimeout('subwin()', 5000)">

<p>5秒後にサブウィンドウが閉じられます。</p>

</body>
</html>

――――――――――――
◆同時にサブウィンドウ（ポップアップ）を開く◆
<html>
<head>
<title>TAG index Webサイト</title>

<script type="text/javascript">
<!--
function disp(url){
window.open(url, "開くページのアドレス", "width=350,height=250,scrollbars=yes");
}
// -->
</script>
</head>
<body onLoad="disp('example_sub1.html')" onUnload="disp('example_sub2.html')">



</body>
</html>

――――――――――――
◆◆
――――――――――――
◆◆
――――――――――――
◆◆
――――――――――――
◆◆
――――――――――――
◆◆






――――――――――――
</plaintext></pre>