HTML小技について
  1. ホーム
  2. プロフィール
  3. By-JH4AGB/7
HTML小技サンプルについて。

私のHPで使用しているHTMLの小技やJabascliptについて紹介します。(H20-1-15記述開始)
■これらはすべてインターネットの諸先輩諸氏のHPからの導入です。細かく説明やサンプルを記述するのが難しい為と言うか技術力不足ですから具体的に使用している個所を示していますので、前後のソースや動きで理解して頂いて、説明に変えます。
(説明不足や、意味不明もあるかも、また小技のサンプルも順不動でまとまりがありませんがご勘弁を、文中の茶色部分はソースです。)

小 技 一 覧 表 (項目名をクリックすると見出しのトップに行きます)
番号 項　目 名 番号 項　目　名
1 マーキー(文字が左に流れる) 21 特定ページの特定位置に一発で移動する
2 あなたのパソコン環境 22 縦型マーキー
3 かくしリンク 23 タイトル等の角を丸くする
4 プルダウンメニューに色を付ける(背景) 24 文字や画像に影をつける
5 プルダウンメニューに色を付ける(文字) 25 画像を自由に拡大縮小する
6 ボタンに色を付ける(外側) 26 マウスカーソルに追従する小画像
7 画面出画時の特殊効果について 27 訪問する度に変わる背景色
8 タイトルバーにメッセージ 28 時間で変わる画像
9 ナビゲーションバーの色指定 29 画像のスクロール
10 指定の位置に指定の大きさの別ウインドーを開く 30 ある範囲の乱数を得てリンクを決める
11 画像を半透明にする 31 オンマウスでコメントを表示
12 画像マップ上にリンクを張る 32 二分割した画像が中央でドッキング
13 一定時間後に画面を消す 33 HTMLにPDFファイルを埋め込み表示する
14 戻る 34 imgタグで指定した画像の下の僅かな隙間対策
15 特殊文字 35 文章を縦書きにする
16 お気に入り登録ボタン 36 パンくずリスト
17 最終更新日の表示 37 常に右下にロゴ表示する
18 曜日により画像を入れ替えて表示 38 オンマウスで画像の色を透明にする(逆も可)
19 開くたび又は更新するたびに違う画像を表示する 39 書きだし文字大型化
20 どうしても大きな画像を表示したい 40 サイト内検索
小 技 一 覧 表 (項目名をクリックすると見出しのトップに行きます)
番号 項　目 名 番号 項　目　名
41 動画再生 ' '
42 文字の背景色を設定する ' '
43 ページ送り ' '
44 Google マップ(V3)を使う ' '

■コメント
具体例のソースの見方は、ブラウザのメニューバーに「表示(v)」がありますからこれを クリックし出てくるプルダウンメニューの、「ソースの表示(c)」をクリックしてください。Htmlのソースが表示されます。
事例をコピーするには、必要な部分を左クリックしてハイライトにして右クリックでプルダウンしてから出てくるメニューで「コピー」を選んでから、 メモ帖等を起動させて貼り付けします。そして必要な名前を付けて保存します。
このページを見ながら、別の参照ページを見る事になるので、2窓開くか、現在のページを印刷して参照ページを確認する事を推奨します。

1.マーキー(文字が左に流れる)。
 ・トップページの右上の「HPの紹介」で使用しています。上から100行目あたりに<!--■Welcome マーキー--> とありますが具体的な中身は「open-msg.html」ファイルにあります。 ここではマーキーを表示する場所をアイフレームで確保しているだけで、本体は「open-msg.html」に記述しています。open-msg.htm を見るには、 ブラウザのアドレスに　http://s-hikichi.ddo.jp/ の次にopen-msg.htmを追記してエンターを押します。
すると、上に一行マーキーが表示されます。内容は上記コメントの方法で確認してください。

2.あなたのパソコン環境。
・あなたのパソコン環境を表示します。具体例は、「トップ」→「プロフィール」→文章中の「自鯖って?」をクリックして 進むとそこにあります。 画面の下部分にあなたのパソコン環境が出てきます。ソースはほぼ中央の<!-- ■あなたのパソコン環境は-->以降です。

3.かくしリンク。
・これは管理者や特定の人だけが入り込む事が出来る秘密のリンクです。具体例は、「トップ」→「プロフィール」→最下段のフッターに 「**左上の画像は20世紀梨の花です**」が ありますがこの「**」部分に仕掛けてあります。通常のリンクでは、マウスがリンクされている場所に乗ると一指し指等に変化しますが、 ここでは変化しませんから一般の人にはリンクが 張られている事は分かりません。 下から7行目あたりに注目してください、< a onClick=location.href='kspass/kspass.cgi'> < font color="white">**</font> </a> 左上の画像は20世紀梨の花です< a onClick=location.href='kspass2/kspass.cgi'>**< /a>
と「kspass/kspass.cgi」「kspass2/kspass.cgi」の2個所に かくしリンクを張っています、これをhtmlファイルにリンクすればよいことになります、ここでは、パスワード(これも小技) を求めるcgiファイルにリンクしていますからパスワードが分からないと入り込めません。

4.プルダウンメニューに色を付ける(背景)。
・プルダウンメニューやインプットセレクトの背景に色を付けて少し賑やかにするものです。「トップ」→「アンケート他」→【Q04】年齢にあります。 < option style="background-color: #00ffff";option value=〜20才代>〜20才代 の style="background-color: #00ffff"が色指定です。 色を変えるときは#00ffffを変更します。

5.プルダウンメニューに色を付ける(文字)。
・4の例と違い文字に色を付けます。「トップ」→「バーチャル観光」→■県内へん■県外へん■海外へんで使用しています。 <select name="linklist"onchange="location=this.value"STYLE="color:Royalblue">ここでは色に 「Royalblue」としていますが「#00ffff」のようにしても同様に指定できます。

6.ボタンに色を付ける(外側)。
・クリックやインプットボタンの外側に色をつけます。「トップ」→「おまけコーナー」→「PacunStart」ボタン　ソースリストのほぼ中央付近 <!--■パックンボタン--><input type="button" value="PakunStart" style="border-color: #00ff00; border-width: 3;"onClick="Start()"> ←まずこのボタンを押してください に注目value="PakunStart"の"PakunStart"はボタンに表示する文字です、 style="border-color: #00ff00; border-width: 3;" 色(#00ff00)とボーダーの幅(3)で指定しています。 (注)通常の場合"onClick="Start()"は必要ありません、ここではパックンを動かすスクリプトに起動をかけているためです。 　　　　 　　　

7.画面出画時の特殊効果について
 　・新たな画面を開いたときに色々な開き方をします。「トップ」→「おまけコーナー」→「春の七草」リスト上部の <meta http-equiv="Page-Enter"content="revealTrans(Duration=1.4,Transition=23)"> で実現しています。Duration=1.4の1.4は出画し終わるまでの時間、Transition=23の数字は0〜22までの効果があってその中で効果をランダムに表現するのが23です、 数値を変更して効果を確かめてみてください。"Page-Enter"は出画をどの時点で実施するかを選びます。 この場合はよその画面から移動してきたときに効果が出ます。"Page-Exit"とするとこのページから出て行く時に実施されます。

8.タイトルバーにメッセージ
 　・ブラウザの最下段のタイトルバーへメツセージを出します。「トップ」→「おまけコーナー」→「春の七草」のソースリストの <!--defaultStatus="この画面は開くときに色々な効果で開くように設定してあります。詳しくはソースを見てください。 ";//--> ここの例のように「" "」内にメッセージを書きます。

9.ナビゲーションバーの色指定
 　・ナビゲーションバーの色指定方法です。「トップ」→「おまけコーナー」→「春の七草」のソースリスト上部の <STYLE> <!-- body {scrollbar-face-color:#53964e; 　　　　scrollbar-highlight-color:#aed3ab; 　　　　scrollbar-shadow-color:#356132; 　　　　scrollbar-3dlight-color:#aed3ab; 　　　　scrollbar-arrow-color:#356132; 　　　　scrollbar-track-color:#aed3ab; 　　　　scrollbar-darkshadow-color:#356132;} --> </STYLE> 普通はCSSファイルに記述しますが、htmlのヘッドに記載しています。7項目のバーの色を指定していますが、 各自試して見てください。「#******」の部分を変更します。(IE5.5以降で表示)

10.指定の位置に指定の大きさの別ウインドーを開く
 　・指定の位置に指定の大きさの別ウインドーを開く方法です。「トップ」→「おまけコーナー」→「春の七草」のソースリスト上部の <script language="JavaScript"> <!-- function openWindow() {window.open ("","win001",'width=260,height=150,left=350px,top=350px'); } //--> "win001"は何でも良いです、width=260,height=150　で画面の大きさを指定、left=350px,top=350pxで画面左上からの位置を指定します。

チョット一息↑ページ先頭へ


11.画像を半透明にする
 　・画像を半透明にする方法ですが、あまり意味がないかも知れません。「トップ」→「プロフィール」→「■By-AGB/4」 リスト下から7行目付近 <IMG SRC="image/s-ddobn5.gif" STYLE="Filter:Alpha(Opacity=40,FinishOpacity=50,Style=0)"> 開始透明度を0（透明）〜100（不透明）の範囲で指定します。 透明グラデーションのスタイル（0=指定なし、1=線形、2=円形、3=方形）を指定します

12.画像マップ上にリンクを張る。
 　・画像の任意の場所にリンクを張る小技です。「トップ」→「おまけコーナー」→「春の七草」のソースリストの中央よりした <IMG SRC="nanakusa-01.jpg" WIDTH="600"Height="500" border="0"usemap="#nanakusa-01.jpg" WIDTH="600"Height="500" border="0"> <map name="nanakusa-01.jpg"> <area shape="circle" coords=" 50,298,20" href="nana1.html" onClick=openWindow() target="win001" talget="_blank" alt ="1"> 画像の"nanakusa-01.jpg"にusemapとnameを指定します、そして画像の左上からのポジションここでは(1)番をx軸50、y軸298円の半径20をピクセル単位で指定します。 指定範囲は四角でも指定できます、area shape="circle" の"circle"　を"rect"に変更して指定範囲の四角の左上のボジション1と右下のボジション2を"x1,y1,x2,y2"で指定します。
talget="_blank"の"_blank"は別画面を開いてリンクします、
"_self"はリンク元と同じフレームにリンクします、
"_parent"はひとつ上の親フレームにリンクします、
"_top"フレームをすべて解除してリンクします。
「トップ」の天気予報では四角で範囲を指定しています。上記で分かり難いときはこちらを見てください。

13.一定時間後に画面を消す。
 　・画面を一定時間後に消す小技です。「トップ」→「おまけコーナー」→「春の七草」のソースリストですが、 このテクニックのリストは画面の1〜7までの番号をクリックした時に出てくる別窓を4秒以内に右クリックしてリストを表示させます。 <Meta http-equiv="refresh" content="4;url=javascript:window.close();"> <BODY BGCOLOR="#bfffbf"> <IMG SRC="nanakusa-31.jpg"> <BR> <center> <A Href="javascript:window.close();">■画面を閉じる</A>
リストの<Meta http-equiv="refresh" content="4;url=javascript:window.close();">はheadの中に記述します。 content="4"の4は秒数でこの時間で自動消去させています。最後の(<A Href="javascript:window.close();">)では時間に関係なく リンクでリフレッシュスプリクトを呼び出して画面を消します。

14.戻る。
 　・通常このページから元のページに戻るときは、元のページへリンクしますが、HTMLを記述する時元のページを意識しなくて良い方法です。 画像クイズ(「トップ」→「おまけコーナー」→「その他色々」→■画像クイズ)や、このページのソースで最後の方に <a href="JavaScript:history.go(-1)">■戻る</a>この記述で元に戻れます。 具体例はありませんがこの他に
<a href="JavaScript:history.go(1)">■進む</a> や
<a href="JavaScript:history.go(0)">■更新</a>等があります。

15.特殊文字。
 　・タグの始まりや終了は "<"、">"ですが、これを画面に表示させるのがこの特殊文字です。これはこのページのこげ茶色部分の "<"や">"に使用しています。
"&#160"は空白ですが、文字間隔の体裁を整えるのに便利だと思います。
------- 重要特殊文字一覧 -------
注1）文字表記は必ず小文字で記述。
No. 文字表記 10進表記 16進表記 文字 コメント 
001 &quot; &#34; &x22;""" クォーテーション 
002 &amp; &#38; &x26;"&" アンパサンド 
003 &lt; &#60; &x3C;"<" 小なり  
004 &gt; &#62; &x3E;">" 大なり  
005 &nbsp; &#160;&xA0;" "空白  
006 &copy; &#169;&xA9;"©"コピーライト 
007 &cent; &#162;&xA2;"¢"セント cent sign
008 &pound; &#163;&xA3;"£"ポンド pound sign
009 &curren;&#164;&xA4;"¤"  currency sign
010 &yen; &#165;&xA5;"¥"円 yen sign = yuan sign
252 &euro; &#8364;&#x20AC;"€" ユーロeuro sign
019 &reg; &#174;&xAE;"®"登録商標registered sign = registered trade mark sign
022 &plusmn;&#177;&xB1;"±"  plus-minus sign = plus-or-minus sign
023 &sup2; &#178;&xB2;"²"平方 superscript two = superscript digit two = squared
024 &sup3; &#179;&xB3;"³"立法 superscript three = superscript digit three = cubed
025 &acute; &#180;&xB4;"´"  acute accent = spacing acute
026 &micro; &#181;&xB5;"µ"マイクロ micro sign
033 &frac14;&#188;&xBC;"¼"1/4 分数
034 &frac12;&#189;&xBD;"½"1/2 分数 one half
035 &frac34;&#190;&xBE;"¾"3/4 分数 three quarters
'    (注)表でデーターのないセルはボーダーが表示されないので、 " "空白記号を入れてボーダーを表示させています(これも小技)

16.お気に入り登録ボタン。
 　・閲覧者に自分のHPをワンクリックで、お気に入りに登録するボタンです。見ていただく所は2個所あります、一つは「トップページ」のヘッドに <!--span.koshinbi { font: bold 0.7em Verdana; color: blue; } -->そして、 もう一つはbodyソースの始め頃に<!■お気に入りdiv id="block1"> <p> <input type="button" value=" このHPをお気に入りに追加する" onclick="addFav();"> </p>があります。あなたもどうぞ。

17.最終更新日の表示。
 　・トップページである、index.htmlファイルを更新すると自動的に更新日を書き換えます。見ていただく所は2個所あります、一つはトップページのヘッドに <!--span.koshinbi { font: bold 0.7em Verdana; color: blue; } --> そしてもう一つはbodyソースの始め頃に <script type="text/javascript"> <!--document.write("最終更新日：<span class='koshinbi'>" + document.lastModified + "<\/span>"); //--> </script> があります、ぜひご利用を!。

18.曜日により画像を入れ替えて表示。
 　・これは「プロフィール」と「鳥取PR」の画面で使用しています。音楽も同時に切り替えてMIDIを鳴らしているのですが、上手く作動しない場合があります。 準備として、曜日に割り当てる画像を7枚(MIDIも7個)用意します。そして各画像の名前は曜日の3文字を付けます(San.jpg Mon.jpg Tus.jpg...等)。 後はheadに「プロフィール」ソースの7、8行目あたりからのスクリプト<script language="JavaScript" type="text/JavaScript"> 〜80行目あたりのdocument.write(csStr)// --> </script>まで(途中省略)をheadに貼りつけます。 そして< SCRIPT LANGUAGE="Javascript"><!-- dayImage() ;muImage() // --></SCRIPT> を 表示したいところに貼り付けます。画像のdayImage()と音楽のmuImage()は同じ構造ですが画像と音楽は別々のファイルを呼び出すようにします。 ですから音楽関係muImage()は省略できます。

19.開くたび又は更新するたびに違う画像を表示する。
　・これは「プロフィール」の下の中央に2枚出るようにしていますが、2枚にする必要はありません。画像はランダムに表示する枚数 (ここでは7枚)必要です、ソースは<!--■ランダム画像--> <script language="JavaScript"> var imglist = new Array( "randam/s-1.jpg", "randam/s-2.jpg", "randam/s-3.jpg", "randam/s-4.jpg", "randam/s-5.jpg", "randam/s-6.jpg", "randam/s-7.jpg"); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script>です。randam/s-*.jpgは画像の枚数分書き加えます。

20.どうしても大きな画像を表示したい。
　・時には大きな画像で見てもらいたい時があるそんなときのテクニックです。画像分割ソフトで画像を分割し、表組で表示します。 一般に大きな画像を表示しようとすると全体を伝送し終わらないと表示しないため、過去ではインターレス方式で画像を表示して見る側に対してある程度のスピードアップを図っていた。 これは画像の伝送操作を飛び飛びに間引きしながら伝送し全体像をなんとなく分かるようにし、後で間引きした分を伝送するやり方です。私のHPでの具体例は、 「トップ」→「鳥取PR」→■久松山麓マップ、や■姫鳥線の計画、で実施している。 ソースを見てもらうと小さな画像を表組みで組み立てているのが分かる、こうすることで、左上から次々に細切れの画像が表示され、 見る人にとって少しはイライラ感がなくなる。この手法は、大きな画像表示に限らず比較的小さな画像でもなるべく早く見せる為に使用されるサイトは多い。 なお、画像分割結合ソフトは「トップ」→「おまけコーナー」→「その他色々」→■簡単画像処理ソフトにあります。

チョット一息 ↑ページ先頭へ


21.特定ページの特定位置に一発で移動する。
　・リンクの一種ですが、説明の為とか参考に見たい場合にこの小技を使います。
<a href="***.html> でのリンクではページの移動で必ずトップに行ってしまいます。 これをある特定の場所にリンクするのが、<a name="***">でこれはリンクされる側で <a href="#***">???</a >はリンクする側です。***は適当な名前でよいですが、リンクする側とリンクされる側は同じ名前でないといけません。
では具体的に使用している処を見てみましょう。この小技21番のソースを見るとこの前に<a name="mak21">がありこれがリンクされる側です。 ページ始めの小技一覧表の21番の表組みの中に<font color="#800000"><td bgcolor="#efefef"><a href="#mak21">特定のページに 一発で移動する</a></td><a href="#mark21">の行があります、この<a href="#mark21">がリンク元です。21番に限らず各項目すべてにリンクがかけてあります。 別のページの場合は、<a href="???.html#***">と???.html(リリンクするファイル名)を付け加えます。

22.縦型マーキー。
　・この小技集の1番では、左に文字が流れますがここでは、縦に下から上に文字が流れます。「おまけコーナー」の下の方で使っています。ソースを見ると、
<!--■縦型マーキー--> <TABLE BGCOLOR="#000000" cellspacing=1 HEIGHT=50 WIDTH=250> <TR BGCOLOR="#FFF0F0"><TD COLSPAN=2 ALIGN=center><FONT COLOR="#ff0000">★☆★　ご 紹 介　★☆★</FONT></TD></TR>・・・以下途中省略・・・ </MARQUEE> </TD></TR> </table> <!--■縦型マーキー終わり-->となっています。この中で<MARQUEE direction=up height=70 scrollAmount=2>のdirection=upは上向きに文字が流れます(実用的ではないがdownだと下向きに流れます、 またright,leftも可能)。 scrollAmount=2の数値はスピート゛と理解しても良いでしょう、数値を上げると文字の流れが速くなります。後はテーブルの表組ですから説明は省略します。 表示する文字の長さや改行は適宜調整してください。

23.タイトル等の角を丸くする。
　・タイトル等の背景の角は通常角ですがここを丸くする小技です。円の4分の1の扇がたを作りこれを4隅に張りつけることで実現します。 4分の1扇がたを作るのが面倒ですが、まず一枚作成してそれを回転や角度換え、裏返し等で4隅分作ります。具体例は色々ありますが、 「トップ」→「鳥取PR」→ソースの中より下の方で <!--■このページを紹介タイトル--角を丸くする--> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD><IMG src="img-maruwaku/upleft.gif" width="10" height="10" border="0"></TD>・・・途中省略・・・ </TR> </TBODY> </TABLE> <!--■このページを紹介タイトル--角を丸くする終わり-->とありますが<IMG src="img-maruwaku/upright.gif" width="10" height="10" border="0"> のイメージ画像(ここでは上の右→)を真中の背景色(bgcolor="#66cc33")と同じ色にします。
中央のタイトル文字の色と大きさを<FONT color="#ffffff"><font size="3">鳥取のことなら(タイトル文章)・・・で指定します。 画像の配置はテーブルの表組ですから説明は省略します。角の大きさはwidth="10" height="10"で指定しますが全体のバランスを見て決めます。

24.文字や画像に影をつける。
　・文字や画像に装飾の為に陰を付ける小技です。具体例は、「トップ」→「バーチャル観光」→「今月の県内」の20枚の小型見出し画像に影を付けています。 ソースは、中ほどより下に在る。 <!--■文字や画像に影をつける--><div style=" position:absolute; filter:Shadow( color=#ADADAD,direction=135;font-size:30px;)">・・ 途中省略・・<!--■文字や画像に影をつける、 終わり--> です。ここでは画像だけが対象になっていますが、<div・・>・・・</div>のこの中に文字を書くと、 30pxの大きさで表示されます。 ここでは文字の大きさは30pxですがこの数値を変えると文字の大きさが変わります、direction=135は影の角度、color=#ADADADは影の色です。

25.画像を自由に拡大縮小する。
　・画像を自由に拡大縮小します、具体例は、「トップ」→「バーチャル観光」→「今月の海外ヘン」のバナー画像(ライオン)をクリックすると、 Part-3(私設ギャラリー)に行きます。そこの風景をクリックすると800*600Pxの画像に切り替わります、そこで自由に拡大、縮小ができます。 ソースは、全部で30行ほどで<SCRIPT language=javascript>、以降をそのまま利用するしかありません。 私には、残念ながらjavascriptを説明する能力が無いからです。最後の方で画像を呼び出しています。画像の大きさは800*600Pxより少し小さめが良いかも知れません。 この小技はPart-38でも使用しています。

26.マウスカーソルに追従する小画像。
　・小画像がマウスカーソルの動きに追従します、具体例は、私設ギャラリーのパート39で使用しています。 「バーチャル観光」の左したのお寺の画像をクリックすると私設ギャラリーパート39(上高地)に行きます。 ソースの下から13行目から最後の一つ手前までがこの動きを可能にしているスクリプトです。 <SCRIPT language="JavaScript"> <!--・・・・</SCRIPT>までです。 この中で、<img src="z-sat.gif">とありますがz-sat.gifと言う画像を同じファイルの中に作っておく必要があります。 この画像の名前は何でも良いですがスクリプトと同じにする必要があります。 (h20-4-2)

27.訪問する度に変わる背景色。
　・HPへの訪問の度や更新の度に背景色を変えます。具体例は、トップページのフレーム内にある「今月のニュース」の背景です。
ソースは<SCRIPT LANGUAGE="JavaScript"> <!-- var c=new Array("#FFEEEE","#EEFFEE","#EEEEFF"); document.bgColor=c[Math.floor(Math.random()*c.length)]; // --> です。この中で色を3色指定していますが、理屈的には何色でも可能ですが、本来の文章が読みずらい色はあまりお勧め出来ません。 最後に/SCRIPT>を付け加えるのを忘れなく。ここではもう一つのスクリプトを記述していますのでスプリクトの終了が飛んで後になっています。

28.時間で変わる画像。
　・実例はプロフィールにあります。プロフィールの左上の画像がそれです。毎正時にその時間に指定された画像に切り替わり表示します。 ソースは最始めの方です。<!--■24時間画像--> < script type="text/javascript">　 <!-- var myimg = new Array(); myimg[0] = '<img src="fultime/01.jpg" alt="0時" width="240" height="120">';・・ 途中省略・・ myimg[23] = '<img src="fultime/24.jpg" alt="23時" width="240" height="120">'; var mynow = new Date(); var myhour = mynow.getHours(); document.write("<center><img 'src="+myimg[myhour]+"'></center>"); // --> </script> <!--■24時間画像終り-->です。スクリプトは長いですが24回、同じことの繰り返しです。画像は24枚必要です。 Edt(h20-4-12)

29.画像のスクロール。
　・実例は鳥取PRの下の方でインベーダー?が右左に移動しています。ソースは<MARQUEE vspace=3 behavior=alternate loop=INFINITE ALIGN="MIDDLE"> <IMG src="image/imvada.jpg" width="30" height="25" border="0"> </MARQUEE>です。src="image/imvada.jpg"は、動く画像です。

30.ある範囲の乱数を得てリンクを決める。
　・実例はHPのトップに在ります。カレンダーの隣です。<!--■今日のギャラリーリンク--><font size="2">私の私設ギャラリーの紹介</font><BR> <SCRIPT language="JavaScript"> <!-- var rand=Math.ceil(Math.random()*41); var ran=""+rand var today=new Date().getDate(); var to=""+today; to=to.substr(to.length-2,2); document.write("今日、"+to+"日のお勧めリンクは "); switch(ran){ case "1":document.write('<a href="part1/part-1.html">Part-1</A>');break;・・ 途中省略・・case "41":document.write('<a href="part41/part-41.html">Part-41</A>');break; default:document.write('??'); } document.write(" です。"); //--> </SCRIPT><font size="2"><b>上のPart-**をクリック</b></font>
 var rand=Math.ceil(Math.random()*41);のMath.ceilは数値の切り上げ(Math.floorだと切り下げ) *41 は1〜41までの数値を得ます。こうして得た数値をcase "1":document.writeiに当てはめています。 そしてvar today=new Date().getDate();　var to=""+today; to=to.substr(to.length-2,2);で今日の日数(2桁)を得て日付けを表示しています。
・さてどなたか良い解決方法をご教授願ます。ここではリンク先の"41"ケースを、 だらだらと全部記載していますが、もっと簡潔に格好良くならないものでしょうか。**追伸**。別のJS化してファイルに収めてしまいました。ですからこの説明文でご理解を!。 Edt(h21-1-13)

チョット一息 ↑ページ先頭へ


31.オンマウスでコメントを表示。
・<head> 内の記述
<style>
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:200px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
</style>
 <body>内の記述
<a href="#" class="tooltip">これは表示部分<span>ここはオンマウス表示部分。</span></a>
ヘッド内の記述でmargin-left:8px; width:200pxはオンマウスでコメントを表示部分の大きさですから適当に変更して見て下さい。
また、background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;は表示部分の背景色と枠の太さと色そして文字色です。
この実際例を示したかったのですが、表示出来ない処に有るので表示できません。この小技は他に、<A>タグをCSS等で使用していると 競合して旨く表示出来ない場合があります。

32.二分割した画像が中央でドッキング。
  ・実例はプロフィールの下の方に猫の免許証が有りますがこれをクリックすると、猫の免許証のドッキングが見えます。 ソースは
<CENTER>
<MARQUEE BEHAVIOR="slide" DIRECTION="right" SCROLLAMOUNT="20" WIDTH="400">
<IMG SRC="cat-a.jpg"></MARQUEE>
<MARQUEE BEHAVIOR="slide" DIRECTION="left" SCROLLAMOUNT="20" WIDTH="400">
<IMG SRC="cat-b.jpg"></MARQUEE>
</CENTER>
ですが、画像を二枚に分割して左から右に動く画像を(cat-a)、左に動く画像を(cat-b)とします。
SCROLLAMOUNT="20"は移動速度です、WIDTH="400"は画像の幅により調整して下さい。

33.HTMLにPDFファイルを埋め込み表示する。
  ・実例はプロフィールのBy-JH4AGB/11にあります。ソースは
<embed src="agb/EPM6.pdf" width="900" height="600"></embed>です、"EPM6.pdf"は埋め込むファイル名です、 width="900" height="600"は、このファイルの大きさに合わせて幅や高さを設定します。 これにより、フレームの中にPDFファイルが表示されます。
Edt(h23-7-2)

34.imgタグで指定した画像の下の僅かな隙間対策
  ・実例はパート33やパート43の施設ギャラリーのように枠内に画像を表示する時に画像がテキストのベースラインに揃えて表示されるからです。
この対策として、css に　img { vertical-align:bottom　} を付け加える事で解決しています。
実例は head内の <STYLE type="text/css"><!--img { vertical-align:bottom} ........--></STYLE> です。

35.文章を縦書きにする。
  ・実例はプロフィールの趣味の記述に有りますが、タグは次の通りです。 <Div Style="writing-mode:tb-rl; height:80;">これが縦書き文章です height:80;は文章の高さです。この例を下に示します。</div>   ・注 ここでは、縦書き文章は右から記述される為、テーブルで囲み左部分に表示する様にしています。
これが縦書き文章です height:80;は文章の高さです。この例を下に示します。

36.パンくずリスト。
  ・実例は各ページのメニューが済んだ左上に「ホーム>プロフィール>By-JH4AGB/7」のように今のページの階層が表示されています。
これにより今のページの位置が分かると同時に一気にその階層までジャンプできると言う便利なものです。
これを実現するためには、CSS又はHEAD部分に記述する部分と各ページの初めに書く部分とが必要になります。
最初はCSS又はHEAD部分に記述する部分です、どちらか一つを書けばよいです。
<!--■　CSSに記載する部分-->
/* パンくずリスト */
ol#topicpath{
     width: 930px ;
     margin: 0 0 10px 0 ;
     text-align: left ;
}
ol#topicpath li{
    display: inline ;
    list-style-type: none ;
    font-size: 82% ;
    line-height: 1.0 ;
}
ol#topicpath li a{
    padding: 0 10px 0 0 ;
    background-image: url("topicpath.gif");  //--ページの区分に表示する画像
    background-repeat: no-repeat ;
    background-position: right center ;
}
<!--■　CSSに記載する部分 終了-->
 CSSでなく<head>に記載する場合。 

<!--■ CSSでなく<head > に記載する場合-->
<head>
<STYLE type="text/css">
<!--
/* パンくずリスト */
ol#topicpath{
     width: 930px ;
     margin: 0 0 10px 0 ;
     text-align: left ;
}
ol#topicpath li{
    display: inline ;
    list-style-type: none ;
    font-size: 82% ;
    line-height: 1.0 ;
}
ol#topicpath li a{
    padding: 0 10px 0 0 ;
    background-image: url("topicpath.gif");  //--ページの区分に表示する画像
    background-repeat: no-repeat ;
    background-position: right center ;
}
-->
</STYLE>
</head>
<!--■　CSSでなく head に記載する場合 終了 -->
 各ページの一行目に表示される部分に記載する部分
<!--■各ページの一行目に記載する部分-->
<ol id="topicpath">
<li><a href="index.html">ホーム<a href="profile.html">プロフィール</a></li>      <!--一番目の階層-->
                                                      <!--階層の深みに応じて記載する-->
<li>By-JH4AGB/1</li>                                  <!--現在の階層-->
</ol>
<!--■各ページの一行目に記載する部分　終了-->
ページ(階層)の区分に表示する画像です
「」←(topicpath.gif) この階層の区切り画像を取り込んで各ページの.htmlのあるフォルダーに置いてください。

37.常に右下にロゴ表示する。
 ・実例はこのページにあります。常に右下に表示する「一覧表に戻ります」のロゴがそれです。
ただ表示するだけでなくこのページの「小技の一覧表」にジャンプする様に一ひねりしました。(小技の21番)
ソースは <head> 内の<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">以降の <div id="logo" style="position:absolute;left:0;top:0">から</script>までの19行までで、コメントで示してあります。
リスト内の数値「500」は画面スクロールにより表示位置がずれた時の修正タイミングです。

38.オンマウスで画像の色を透明にする(逆も可)。
 ・実例は、Top画面から猫が出てくるバナーをクリックすると次の画面にも猫のバナーがあります。 ここに仕掛けがしてありります。例では常時半透明で、マウスが乗った時透明になります。通常の 画像表示のタグに次のタグを付け加えます。 style="filter:alpha(opacity=50);" onmouseover="this.filters['alpha'].opacity=100" onmouseout="this.filters['alpha'].opacity=50" 画像へオンマウス時と画像からマウスが外れた場合の数値を入れ替えることにより、常時とオンマウス時の透明度と半透明が入れ替えれます。 その数値は透明度(%)を示します。(H23-12-10)

39.書きだし文字大型化。
 ・実例は、鳥取の名産にあります。次のスクリプトを、CSS　又はヘッド内に書きます。
/* ドロップキャップ */
p.outlineLead:first-letter { float: left ; padding: 7px ; font-size: 200% ; line-height: 1.0 ; background-color: #006400 ; color: #ffffff ; }
そして、書き出しの文字の前に次のタグを書けば完成です。このタグは何回でも記述可能です。ですが書き過ぎに注意!。
タグは、<p class="outlineLead">です、スクリブト中の background-color: #006400 ;は 背景色で、color: #ffffff ;は文字色です。

40.サイト内検索。
 ・実例はトップページに有ります。例は、私のドメイン"s-hikichi.ddo.jp"の場合です。
タグは、<form action="http://www.google.co.jp/search" method="get"> <input type="hidden" name="as_epq" value="s-hikichi"> <input type="hidden" name="as_occt" value="any"> <input type="hidden" name="as_sitesearch" value="s-hikichi.ddo.jp"> <input type="hidden" name="num" value="10"> サイト内検索 <input type="text" size="20" name="as_q"> <input type="submit" name="btnG" value="検索"> Powered by <a href="http://www.google.co.jp/">Google</a> </form>
上記の赤文字部分自分のドメインに合わせて書き換えて下さい。
私の場合は「サイト内検索」や「Google」は画像で表示しています、また「Powered by」は省略。
このサイト内検索は、Googlの検索機能を利用して検索しています、この為新規に記事を更新したデーターの検索には少し時間(H24-3の実績で4週間)がかかります。 (H24-2-22)

41.動画再生。
  ・実例は、バーチャル観光の県外編の17番目にあります。
タグは、「風の盆」動画 <BR> <embed width=320 height="266" src="MOV0100.MPG" type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" autostart="0" autosize="0" loop="1" showcontrols="1" showdisplay="0" showstatusbar="1" showtracker="1" videoborder3d="0" videobordercolor="#ffffff" videoborderwidth="1"></embed>
ここからは画像再生のスタートボタンの表示　
<font size="1" face="Verdana, Arial, Helvetica, sans-serif, Arial Black, Impact">Click the <font color="#990000">Play button</font> to preview a trailer for this movie.
埋め込み可能な形式は、MPEG(.mpg)、QuickTime(.mov)、Wave(.wav)など数多くあります。ただし、再生するには、対応したプラグインがインストールされている必要があります。
以下にemedダグの属性を表示しています。もし、プラグインがして無いPCの場合は、pluginspageタグでURLが指定してあればPCにプラグインをする為のページが表示されるものと思います??。
←例 (H24-7-15)

42.文字の背景色を設定する。
  ・実例は、サイトマップのメニュー表示にあります。ここでは直接文字の背景部分に次のタグを追加して実現しています。
タグは <a href="index.html"><span style="background-color:#FFD700;">■ページトップ</span></A><font color="#2F4F4F">
<span style="background-color:#FFD700;">■ページトップ</span>で#FFD700は色指定、spanタグで囲まれた「■ページトップ」は背景色を設定される文字列です。 (H24-8-13)

43.ページ送り。
  ・実例は、過去のトップ画面の挿入画像は沢山あってこれを、各ページに分割表示していますが、このページにリンクするのに使用しています。各ページの最下段です。
数字をクリックするとそのページにリンクします。(←これは画像ですからリンクしません)
CSSの内容
 

/* ページ送り */
ul.blogPageNavi{
        margin: 0 0 0 10px;
        text-align: center;
}
 
ul.blogPageNavi li{
       display: inline;
       list-style-type: none;
       font-size: 82%;
}
 
ul.blogPageNavi li.active{
       padding: 3px 6px;
       border: 1px solid #2f2120;
       background-color: #00ff00;
       clolr: #ffffff;
}
 
ul.blogPageNavi li a{
       text-decoration: none;
       padding: 3px 6px;
       border: 1px solid #2f2120;
}
 
ul.blogPageNavi li a:link    { color : #2f2120;}
ul.blogPageNavi li a:visited { color : #2f2120;}
ul.blogPageNavi li a:hover   { color : #2f2120; background-color:#8e9d18; }
ul.blogPageNavi li a:active  { color : #2f2120; background-color:#8e9d18; }
HTMLの内容

<ul class="blogPageNavi">
<li class="active"> 1</li>
<li> <a href="kakotopimg[2].html"> 2</a></li>

<li> <a href="kakotopimg[3].html"> 3</a></li>

<li> <a href="kakotopimg[4].html"> 4</a></li>

<li> <a href="kakotopimg[5].html"> 5</a></li>

<li> <a href="kakotopimg[6].html"> 6</a></li>

<li> <a href="kakotopimg[7].html"> 7</a></li>

<li> <a href="kakotopimg[8].html"> 8</a></li>

<li> <a href="kakotopimg[9].html"> 9</a></li>

<li> <a href="kakotopimg[10].html"> 10</a></li>

<li> <a href="kakotopimg[11].html"> 11</a></li>

<li> <a href="kakotopimg[12].html">次へ</a></li>

上記のページ数は12ページですが、表記するページ(四角の)数により「Li」の数を増減します。
表示中のページ(ここでは1ページ)は<li class="active"> 1</li>とします。
ページの中間部分では<Li> の始まりは12の様に「次へ」の代わりに「戻る」等を書きます。
マウスが四角に乗ったときの色は hover の　background-color:#8e9d18;を 表記中の色は active background-color:#8e9d18;を 好みの色に変えて下さい。(H24-10-12)

44.Google マップ(V3)を使う。
  ・実例は、バーチャル観光の19回目から使用しています。下に大谷ウォークの例を示します。
 ・LZH形式でdl

Google マッブはV3に改良されて、キーが不必要になりましたが、V2のマップが使えなくなりました。
タグは「UTF-8」形式で書かれていますから、注意が必要です。TeraPad 等で編集をすることを推奨します。
もし文字化けが生じた場合は、「ファイル」→「文字/改行コード指定保存」で「UT-8」で保存して下さい。
自分用への改造は、タグの中にコメントが書いてありますから分かると思います。
タグはフレーム内の「MENU」を右クリックしてソースの表示でタグをコピーするか、「LZH形式で」ダウンロードして下さい。


以下現在工事中

■戻る
インターネットのリンクして貰える方募集中。