i06

アプリス

フリーソフト
暗号文(暗号化)
  複合化
.htaccessパスワード作成
サンプルコード
  HPテクニック
  WSH

ホームページ作成テクニック

テクニック一覧


ファイルの作成方法

気に入ったテクニックのコードをコピーして、コードを組み込みたいHTMLファイルを開く。
組み込みたい場所へカーソルを移動。
キーボードのCtrlを押しながらVを押す。(貼り付け作業)
HTMLファイルを上書き保存。


1.画像を高速に表示する

このページを開いたときに、
<IMG src="画像ファイル" alt="画像名" width="1" height="1">
により画像ファイルをキャッシュに格納します。
格納したことにより、
<A href="画像ファイル" target="_blank">写真</A>
をクリックしたときに表示される画像は、直接読み込むのではなく、キャッシュから読み込むことになりますので、高速に表示することが可能となります。

写真写真

<A href="画像ファイル" target="_blank">写真</A><IMG src="画像ファイル" alt="写真" width="1" height="1">

up 上へ

2.前のページに戻れないリンクを作成する

Vector

<A href="javascript:onclick = location.replace('http://www.vector.co.jp/')">Vector</A>

up 上へ

3.お気に入りに追加するリンクを作成する

window.external.addfavorite('アドレス', '名前')

i06をお気に入りに追加

<A href="javascript:window.external.addfavorite('http://www.h3.dion.ne.jp/~i06/', 'i06')">i06をお気に入りに追加</A>

up 上へ

4.リストからのリンクを作成する1

リストを選択してリンクするタイプです。
<OPTION value="アドレス">リンク名</OPTION>
<OPTION value="アドレス">リンク名</OPTION>
をコピーすることにより、いくつでも作成できます。

<SELECT onchange="location.href = this.options[this.selectedIndex].value">
<OPTION selected>選択してください。</OPTION>
<OPTION value="http://www.h3.dion.ne.jp/~i06/">i06</OPTION>
<OPTION value="http://www.yahoo.co.jp/">Yahoo!</OPTION>
<OPTION value="http://www.google.co.jp/">Google</OPTION>
</SELECT>

up 上へ

5.リストからのリンクを作成する2

リストを選択し、ボタンをクリックしてリンクするタイプです。
<OPTION value="アドレス">リンク名</OPTION>
<OPTION value="アドレス">リンク名</OPTION>
をコピーすることにより、いくつでも作成できます。

<SELECT name="i06link2">
<OPTION selected>選択してください。</OPTION>
<OPTION value="http://www.h3.dion.ne.jp/~i06/">i06</OPTION>
<OPTION value="http://www.yahoo.co.jp/">Yahoo!</OPTION>
<OPTION value="http://www.google.co.jp/">Google</OPTION>
</SELECT><INPUT type="button" value="開く" onclick="location.href = document.all.i06link2.options[document.all.i06link2.selectedIndex].value">

up 上へ

6.文字をズームする

Wellcome to i06の文字をズームさせたい文字に変えてください。

top : ズーム文字の上位置px
left : ズーム文字の左位置px

ズーム

Wellcome to i06

<SCRIPT type="text/javascript">
<!--
size = 0;
function zoom() {
if (size < 80) {
document.all['i06'].style.fontSize = size;
size += 1;
setTimeout('zoom()', 8);
}
}
//-->
</SCRIPT><A href="javascript:zoom()">ズーム</A>

up 上へ

7.フレームを使わずに画像切り替えをする

数はいくつでも増やすことができます。

img1.style.display = 'none';

if (i == 1) img1.style.display = 'block';

<IMG src="001.gif" alt="イメージ1" name="img1" style="display : none;">

<A href="javascript:image(1)">イメージ7-1</A>
を各位置にコピーして、数字の部分を変更してください。

イメージ1イメージ2イメージ3

イメージ7-1
イメージ7-2
イメージ7-3

<SCRIPT type="text/javascript">
<!--
function image(i) {
img1.style.display = 'none';
img2.style.display = 'none';
img3.style.display = 'none';
if (i == 1) img1.style.display = 'block';
if (i == 2) img2.style.display = 'block';
if (i == 3) img3.style.display = 'block';
}
-->
</SCRIPT>
<P><IMG src="001.gif" alt="イメージ1" name="img1" style="display : none;"><IMG src="002.gif" alt="イメージ2" name="img2" style="display : none;"><IMG src="003.gif" alt="イメージ3" name="img3" style="display : none;"></P>
<P><A href="javascript:image(1)">イメージ7-1</A><BR>
<A href="javascript:image(2)">イメージ7-2</A><BR>
<A href="javascript:image(3)">イメージ7-3</A></P>
<SCRIPT type="text/javascript">image(1)</SCRIPT>

up 上へ

8.インフレームで画像切り替えをする

数はいくつでも増やすことができます。

<A href="001.gif" target="img">イメージ8-1</A>
をコピーして、ファイル名とリンクの文字を変更してください。

イメージ8-1
イメージ8-2
イメージ8-3

<P><IFRAME src="001.gif" width="86" height="49" scrolling="NO" name="img" marginwidth="0" marginheight="0" frameborder="0" title="画像">画像</IFRAME></P>
<P><A href="001.gif" target="img">イメージ8-1</A><BR>
<A href="002.gif" target="img">イメージ8-2</A><BR>
<A href="003.gif" target="img">イメージ8-3</A></P>

up 上へ

9.ツリー型のリンクを作成する

下記のようにAの下にBを配置して、A1やB1などのIDがダブらなければ、いくつでも作成できます。

  • <SPAN onclick="document.all.A1
    <DIV id="A1"
    • <SPAN onclick="document.all.B1
      <DIV id="B1"

<UL>
<LI><SPAN onclick="document.all.A1.style.display = (document.all.A1.style.display == 'none')?'':'none'">ツリーメニュー A1</SPAN>
<DIV id="A1" style="display:none">
<UL>
<LI><SPAN onclick="document.all.B1.style.display = (document.all.B1.style.display == 'none')?'':'none'">ツリーメニュー B1</SPAN>
<DIV id="B1" style="display:none">
<UL>
<LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A>
<LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A>
<LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A>
</UL>
</DIV>
<LI><SPAN onclick="document.all.B2.style.display = (document.all.B2.style.display == 'none')?'':'none'">ツリーメニュー B2</SPAN>
<DIV id="B2" style="display:none">
<UL>
<LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A>
<LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A>
<LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A>
</UL>
</DIV>
<LI><SPAN onclick="document.all.B3.style.display = (document.all.B3.style.display == 'none')?'':'none'">ツリーメニュー B3</SPAN>
<DIV id="B3" style="display:none">
<UL>
<LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A>
<LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A>
<LI><A href="http://www.h3.dion.ne.jp/~i06/" target="_blank">リンク</A>
</UL>
</DIV>
</UL>
</DIV>
<SPAN onclick="document.all.A2.style.display = (document.all.A2.style.display == 'none')?'':'none'"></SPAN>
</UL>

up 上へ

10.メタ以外で自動的にページを移動する(タイマー付)

location.href = 'リンク先のアドレス'
タイマーはミリ秒で入力してください。
タイマーなしの場合、
setTimeout('i06();', 0)
もし、タイマーが5秒の場合、
setTimeout('i06();', 5000)
となります。

<SCRIPT type="text/javascript">
<!--
function i06() { location.href = 'http://www.vector.co.jp/vpack/browse/person/an022773.html'; }
setTimeout('i06();', 30000);
//-->
</SCRIPT>

up 上へ

11.リンクする前に確認を求める

location.href = 'リンクするファイル名'

VBフリーソフト

<SCRIPT type="text/javascript">
<!--
function check() {
if (confirm('フリーソフトのページへ移動します。\n\nよろしいですか?')) location.href = 'http://hp.vector.co.jp/authors/VA022773/';
}
//-->
</SCRIPT><A href="javascript:check()">VBフリーソフト</A>

up 上へ

12.デジタル時計を表示する

setTimeout('clock();', 100)
は、秒が切り替わるタイマーです。
タイマーはミリ秒で入力してください。

<SCRIPT type="text/javascript">
<!--
function clock() {
i = new Date();
document.all.i06clock.value = i.getHours() + ':' + i.getMinutes() + ':' + i.getSeconds();
setTimeout('clock()', 100);
}
-->
</SCRIPT><INPUT size="20" type="text" name="i06clock" value=""><SCRIPT type="text/javascript">clock()</SCRIPT>

up 上へ

13.件名・本文を含めたアンケート用のメールリンクを作成する

メールリンクに件名を含めるには Subject= を記述して、そのあとに件名を入力してください。
本文を含めるには Body= を記述して、そのあとに本文を入力してください。
%0D%0A は改行コードです。

アンケート

<A href="mailto:***@***.**.**?Subject=ホームページについてのアンケート&Body=
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇%0D%0A
ホームページについてのアンケート%0D%0A
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇%0D%0A
%0D%0A
%0D%0A
当てはまる項目以外を削除してください。%0D%0A
( )がある場合は( )内に入力してください。%0D%0A
%0D%0A
■どこでお知りになりましたか?%0D%0A
□検索サイト%0D%0A
□他のサイト%0D%0A
□友人・知人%0D%0A
□その他( )%0D%0A
%0D%0A
■どのくらいの頻度でご覧になりますか?%0D%0A
□初めて%0D%0A
□毎日%0D%0A
□週に2~3回%0D%0A
□週に1回程度%0D%0A
□月に2~3回%0D%0A
□月1回程度%0D%0A
□ほとんど見ない%0D%0A
□その他( )%0D%0A
%0D%0A
■よくご覧になる場所はどこですか?%0D%0A
□自宅%0D%0A
□職場・学校%0D%0A
□ネットカフェ%0D%0A
□その他( )%0D%0A
%0D%0A
■接続回線は何をご利用ですか?%0D%0A
□電話回線%0D%0A
□ISDN%0D%0A
□ADSL%0D%0A
□FTTH [光回線]%0D%0A
□CATV [ケーブル]%0D%0A
□携帯電話%0D%0A
□その他( )%0D%0A
%0D%0A
■ご感想、ご要望などをお聞かせください。%0D%0A
%0D%0A
%0D%0A
">アンケート</A>

up 上へ

14.バナーを固定して表示する

url(バナーのパス)
bottom right
は、表示位置です。

左上 = top left
上 = top center
右上 = top right
左 = center left
中央 = center
右 = center right
左下 = bottom left
下 = bottom center
右下 = bottom right

<INPUT type="button" value="バナーを固定して表示" onclick="document.body.style.cssText = 'background:url(http://www.applis.org/img/banner.gif) no-repeat fixed bottom right';">

up 上へ

15.バナーを固定して表示する ~リンク付き~

10行目の200はバナーの幅、11行目の40はバナーの高さを指定してください。
バナーのタグは、 <A href="リンク先" target="_blank"><IMG src="画像のアドレス" border="0" alt="マウスポイント時のポップアップテキスト"></A> のようにしてください。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>バナーなどを固定して表示する ~リンク付き~</TITLE>
</HEAD>
<BODY onload="move45();"><SCRIPT type="text/javascript">
function move45() {
document.all['i0645'].style.left = document.body.scrollLeft + document.body.clientWidth - 100;
document.all['i0645'].style.top = document.body.scrollTop + document.body.clientHeight - 40;
setTimeout('move45();', 1);
}
</SCRIPT>
<DIV style="position : absolute;" id="i0645"><A href="http://www.applis.org/" target="_blank"><IMG src="http://www.applis.org/banner.gif" alt="i06" width="88" height="31" style="border-style : none;"></A></DIV>
</BODY>
</HTML>

up 上へ

©applis.org