○○○ホームページ裏技（スクリプト）○○○

ホームページで使える「簡単スクリプト集」

←topへ　　　　　　　　（HTMLソースをコピー＆ペーストして自由にお使いください）
！重要　これらのスクリプトを実行して何らかの不具合が起こったり、応用しだいでは閲覧者に不快な印象を与える場合もあります。
　　　 　いかなるケースにおいてもプラザあいちは一切責任を負いませんので、あくまでも各自の責任において使用してください。

●画像を自動スクロール

 ソース サンプル

●メッセージを自動スクロールA（スクロールテキストボックス付き）

 ソース サンプル

●メッセージを自動スクロールB（スクロールテキストボックスなし）

 ソース サンプル

●隠しリンク

 ソース サンプル

●ブラウザを一時的に振動させる

 ソース サンプル

●ページを開いたときアラートを表示

 ソース サンプル

●物体(画像)がマウスを追いかける

 ソース サンプル

●時間ごとに画像表示

 ソース サンプル

●新しいウィンドウを開く

 ソース サンプル

●数秒後に指定サイトにジャンプ

 ソース サンプル
●文字をフェードさせて表示 ソース サンプル

●マウスを乗せると説明表示

 ソース サンプル

●スクロールバーの色替え

 ソース サンプル

●リアルタイム時計

 ソース サンプル

●マウスを乗せると色が変わる

 ソース サンプル

●背景色を変更

 ソース サンプル

●お気に入り登録ボタン

 ソース サンプル

●右クリックメニューを表示

 ソース サンプル

ＨＴＭＬソース一覧

！注意　※緑文字は補足説明文です。ペーストの際は削除して下さい　※赤文字は主なHTML記述変更箇所
▼画像を自動スクロールさせる
<script language="JavaScript">
<!--
y=0;
timeID=null;
dy=2;
limity=300;　　　←スクロール移動範囲指定
speed=100;　　　←スクロール速度指定

function scrollUp(){
if(y<limity){
scrollTo(0,y+=dy);
clearTimeout(timeID);
timeID=setTimeout('scrollUp()',speed);
}
}
//-->
</script>

<p><img src="image/road.gif" width="50" height="800">　　　←スクロール画像／サイズ指定
このように縦に画像をスクロールさせます。</p>　　　←メッセージ削除可
</body>
▼メッセージを自動スクロールさせるA（スクロールtex tbox付き）
<SCRIPT language=JavaScript>
<!--
br = unescape("%0A");
if(navigator.userAgent.indexOf("Mac") !=-1){
br = unescape("%0D");
}
if(navigator.userAgent.indexOf("Win") !=-1){
br = unescape("%0D")+br;
}
gyo = 19;　　　←メッセージ行数指定
msg = new Array(gyo);
msg[0]=br;　　　↓メッセージ範囲
msg[1]=br;
msg[2]=br;
msg[3]=br;
msg[4]="　　　　　　　　メッセージ文"+br;
msg[5]="　　　　　　　　メッセージ文"+br;
msg[6]="　　　　　　　　メッセージ文"+br;
msg[7]="　　　　　　　　メッセージ文"+br;
msg[8]="　　　　　　　　メッセージ文"+br;
msg[9]="　　　　　　　　メッセージ文"+br;
msg[10]="　　　　　　　メッセージ文"+br;
msg[11]="　　　　　　　メッセージ文"+br;
msg[12]="　　　　　　　メッセージ文"+br;
msg[13]="　　　　　　　メッセージ文"+br;
msg[14]="　　　　　　　メッセージ文"+br;
msg[15]="　　　　　　　メッセージ文"+br;
msg[16]=br;
msg[17]=br;
msg[18]=br;
msg[19]=br;　　　↑メッセージ範囲
cnt = 0;
warikomi = 10;
function rolldsp()
{
dsp = "";
for (i=0; i<4; i++) dsp += msg[i+cnt];
document.thank.roll.value = dsp;
cnt++;
if (cnt>=gyo-4) cnt=0;
clearTimeout(warikomi);
warikomi = setTimeout('rolldsp()',800);
}
// -->
</SCRIPT>
<BODY bgColor=pink onload=rolldsp(); text=black>　　　↓ここからbody内コピー部分
<P><BR>
<CENTER><B>
<H2>ＸＸＸからのメッセージ</H2></B>　　　←メッセージ変更または削除可能
<P><BR><BR>ＸＸＸＸＸＸＸＸ<BR><BR>　　　←メッセージ変更または削除可能
<HR>
<FORM name=thank><TEXTAREA cols=40 name=roll rows=4 wrap=PHYSICAL></TEXTAREA>
</CENTER></FORM></BODY></HTML>
▼メッセージを自動スクロールさせるB（スクロールtex tboxなし）
<script language="JavaScript">
<!--
y = 0;
timerID = null;
dy = 3;　　　←一度にスクロール量を指定
lt = 1200;
sp = 600;　　　←スクロール速度指定
function scroll(){
if(y < lt){
window.scrollTo(0,y+=dy);
clearTimeout(timerID);
timeID = setTimeout('scroll()',sp);
}
}
//-->
</script>
</head>
<body bgcolor="pink" text="#000000" onLoad="scroll()">　　　↓ここからbody内コピー部分
<div align="center">自動的に文字が縦方向にスクロールする<br>　　　↓メッセージ範囲
<br>
メッセージ文<br>
<br>
メッセージ文<br>
<br>
メッセージ文<br>
<br>
メッセージ文<br>
<br>
メッセージ文<br>
<br>
メッセージ文<br>
<br>
メッセージ文<br>
<br>
・・・・・・・・・・・・・・・・・・・・・・・・<br>
<br>
<br>
<br>
メッセージ文
<br>
<br>
<br>
メッセージ文<br>
メッセージ文<br>
<br>
メッセージ文<br>
<br>
メッセージ文<br>
<br>
メッセージ文<br>
<br>
メッセージ文<br>
<br>
メッセージ文<br>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↑メッセージ範囲
<br>

</div>
</body>
</html>
▼隠しリンク
<a onClick="javascript:location.href='http://www.ＸＸＸＸＸＸＸＸ/'">リンクに見えませんがクリックして下さい</a>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↑リンク先指定　　　　　　　　　　↑メッセージ指定（クリック部分）
▼ブラウザを一時的に振動させる
<script language="JavaScript">
<!--
function quake() {
for (i = 15; i > 0; i--) {　　　←揺れ幅指定
for (j = 5; j > 0; j--) {　　　←揺れ時間指定
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
} }
}
//-->
</script>
<BODY bgColor=#ffffff onload=quake()>お好きなページにどうぞ！ </BODY></HTML>　　　↓ここからbody内コピー部分
▼ページを開いたときアラート（ダイアログ）を表示させる
<body onLoad="alert('ようこそ。');">　　　↓ここからbody内コピー部分
　　　　　　　　　　　　　　　　↑アラートメッセージ指定
▼物体がマウスを追いかける
<SCRIPT language="JavaScript">
<!--
var nameMC1 = "ＸＸＸＸ.gif";　　　←追いかける画像を指定
var heightMC1 = 25;　　　←画像縦サイズ指定
var widthMC1 = 25;　　　←画像横サイズ指定

NS4 = (document.layers) ? 1 : 0;
IE4 = (document.all) ? 1 : 0;
VERSION4 = (NS4|IE4) ? 1 : 0;

var styleMC1 = (NS4) ? "" : ".style";

var objMC1 = new Array();
var numObjMC1 = 10;　　　←画像残像数指定
var ptrMC1 = 5;

function defObjMC1(ID) {
if (NS4) {
this.layer = new Layer (0);
this.layer.visibility = "hidden";
this.layer.document.write('<img src=\"'+nameMC1+'\" height=\"'+heightMC1+'\" width=\"'+widthMC1+'\" border=\"0\">');
this.layer.document.close();
} else {
eval ('this.layer = document.all.MC1'+ID);
}
this.old = 6;
}

function testVisibilityMC1() {
for(var x=0; x < numObjMC1; x++) {
with (objMC1[x]) {
if (old <numObjMC1) {
if (++old == numObjMC1) eval('layer' +styleMC1 + '.visibility = "hidden"');
}
}
}
}

function mouseEventMC1(e) {
ptrMC1 = (++ptrMC1 < numObjMC1) ? ptrMC1 : 0;

objMC1[ptrMC1].old = 0;

if (NS4) {
objMC1[ptrMC1].layer.visibility = "visible";
objMC1[ptrMC1].layer.left = e.pageX ;
objMC1[ptrMC1].layer.top = e.pageY + 5;
} else {
objMC1[ptrMC1].layer.style.visibility = "visible";
objMC1[ptrMC1].layer.style.pixelLeft = event.clientX + document.body.scrollLeft ;
objMC1[ptrMC1].layer.style.pixelTop = event.clientY + document.body.scrollTop + 5;
}
}

function initMC1() {
if (VERSION4) {
for(var x=0; x<numObjMC1; x++) objMC1[x] = new defObjMC1(x) ;

if (NS4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = mouseEventMC1;

setInterval("testVisibilityMC1();",40);
}
}

if (VERSION4 && ! NS4) {
for (var x=0; x<numObjMC1; x++) {
document.write('<div id="MC1'+x+'" style="position: absolute; visibility: hidden;">');
document.write('<img src="'+nameMC1+'" height="'+heightMC1+'" width="'+widthMC1+'" border="0"></div>');
document.write('</div>');
}
}
if (window.onload) {
if (window.RegExp) {
var regstr = '^[^\\{]*\\{((.|\\t|\\n|\\r)*)}[^\\}]*$';
window.onload.toString().match(regstr);
window.onload = new Function (RegExp.$1+"; initMC1 ();");
}
}
else window.onload = initMC1;
// -->
</SCRIPT>
▼時間ごとに画像表示させる
<script language="JavaScript"><!--document.write("<img src='"+"ＸＸＸＸ/"+(new Date()).getHours()+".gif'>");//--></script>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　↑画像のあるディレクトリ名を指定（例：image）
▼新しいウィンドウを開く
<script language="JavaScript">
<!--
function WinOpen(url){
subwin=window.open(url,"newwin01","scrollbars=no,resizable=no,width=240,height=300")　　　←別ウィンドウのサイズを指定
}
function on(){
window.focus();
}
//-->
</script>
</head>
<body onload="on()">　　　↓ここからbody内コピー部分
<a href="javascript:WinOpen('ＸＸＸ/ＸＸＸＸＸＸ.html');">別ウィンドウを開く</a>　　　←別ウィンドウのディレクトリ名/URLを指定
</body>
</html>
▼数秒後に指定先へジャンプさせる
<body onload=setTimeout("location.href='jump2/jump2.html'",1000*5)>　　　←ジャンプするディレクトリ/URL/ジャンプまでの時間を指定
<center>
<br>
5秒後に自動で指定のURLへジャンプします。　　　←ジャンプするメッセージ指定
</center>
</body>
▼文字をフェードさせて表示する
<!--
.Style1{position:absolute;font-size:16pt;font-weight:bold;font-family:"ＭＳ 明朝","ＭＳ ゴシック";}　　　←書体指定

#iL1{top:50;left:200;}
#iL2{top:100;left:200;}
#iL3{top:150;left:200;}
#iL4{top:200;left:200;}
#iL5{top:250;left:200;}
-->
</style>

<script language="javascript" type="text/javascript">
<!--
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var Laymax =5;　　　←メッセージ文行数指定
var actT = 100;

var Comments = new Array();
Comments[1] = "<DIV CLASS='Style1'>第1行目フェード開始</DIV>";　　　←メッセージ文
Comments[2] = "<DIV CLASS='Style1'>第2行目フェード開始</DIV>";　　　←メッセージ文
Comments[3] = "<DIV CLASS='Style1'>第3行目フェード開始</DIV>";　　　←メッセージ文
Comments[4] = "<DIV CLASS='Style1'>第4行目フェード開始</DIV>";　　　←メッセージ文
Comments[5] = "<DIV CLASS='Style1'>第5行目フェード開始</DIV>";　　　←メッセージ文

var lay = new Array();
ColorPLT = "fedcba9876543210";
var Count = 0;
var Com = 1;
var ColorF;

function Init(){
for(i = 1; i <= Laymax; i++){
if(iIE4){
lay[i] = document.all("iL"+i);
lay[i].style.visibility = "visible";
}
if(iNN4){
lay[i] = document.layers["iL"+i];
lay[i].visibility = "show";
}
}
FadeIn();
}

function FadeIn(){
if(Com <= Laymax){
if(Count < ColorPLT.length){
z = ColorPLT.charAt(Count);
ColorF = z+z+z+z+z+z;
SetColor(Com);
Count++;
setTimeout("FadeIn()",actT);
}else{
Com++;
Count = 0;
setTimeout("FadeIn()",actT);
}
}else{
ColorPLT = "0123456789abcdef";
Com = 1;
Count = 0;
FadeOut();
}
}

function FadeOut(){
if(Com <= Laymax){
if(Count < ColorPLT.length){
z = ColorPLT.charAt(Count);
ColorF = z+z+z+z+z+z;
SetColor(Com);
Count++;
setTimeout("FadeIn()",actT);
}else{
Com++;
Count = 0;
setTimeout("FadeIn()",actT);
}
}else{
ColorPLT = "fedcba9876543210";
Com = 1;
Count = 0;
FadeIn();
}
}

function SetColor(kkk){
if(iIE4){
lay[kkk].style.color = ColorF;
lay[kkk].innerHTML = Comments[kkk];
}
if(iNN4){
lay[kkk].document.open();
lay[kkk].document.fgColor = ColorF;
lay[kkk].document.write(Comments[kkk]);
lay[kkk].document.close();
}
}
// -->
</script>

</head>

<body bgcolor="#ffffff" onload="Init()">　　　↓ここからbody内コピー部分

<DIV CLASS="Style1" ID="iL1"></DIV>
<DIV CLASS="Style1" ID="iL2"></DIV>
<DIV CLASS="Style1" ID="iL3"></DIV>
<DIV CLASS="Style1" ID="iL4"></DIV>
<DIV CLASS="Style1" ID="iL5"></DIV>

</body>
</html>
▼マウスを乗せると説明表示
<script language="JavaScript">
<!--
function show(id) {
if (document.all) {
document.all.item(id).style.visibility = "visible";
}
if (document.layers) {
document.layers[id].visibility = "show";
}
}
function hide(id) {
if (document.all) {
document.all.item(id).style.visibility = "hidden";
}
if (document.layers) {
document.layers[id].visibility = "hide";
}
}
// -->
</script>

<p><a href="ＸＸＸＸ.html" onmouseover="show('id1')"　　　←ジャンプ先URL指定　　　↓ここからbody内コピー部分
onmouseout="hide('id1')">私のページ</a> <span id="id1" style="visibility:hidden"> <ilayer name="id1" visibility="hide"> - 訪問待ってます。
</ilayer></span><br>
<a href="ＸＸＸＸ.html" onmouseover="show('id2')"　　　←ジャンプ先URL指定
onmouseout="hide('id2')">おすすめページ</a> <span id="id2" style="visibility:hidden"> <ilayer name="id2" visibility="hide"> - 観に来てください。
</ilayer></span></p>
</body>
</html>
▼スクロールバーの色替え
<STYLE type="text/css"><!--
body{
scrollbar-base-color:#3399FF;　　　←色指定
scrollbar-3dlight-color:white;　　　←色指定
scrollbar-arrow-color:#3399FF;　　　←色指定
scrollbar-darkshadow-color:white;　　　←色指定
scrollbar-face-color:white;　　　←色指定
scrollbar-highlight-color:#3399FF;　　　←色指定
scrollbar-shadow-color:#008000;　　　←色指定
}
TD{
font-family : "Lucida Sans Unicode","ＭＳ ＰＲゴシック";
}
--></STYLE>
▼リアルタイム時計
<script type="text/javascript">
<!--
function jikoku() {
dd = new Date();
document.F1.T1.value = dd.toLocaleString();
window.setTimeout("jikoku()", 1000);
}
// -->
</script>
</head>
<body onload="jikoku()">　　　↓ここからbody内コピー部分
<form name="F1" action="#">
<input type="text" name="T1" size=30>　　　←ウィンドウサイズ指定
▼マウスを乗せると色が変わる
<p><a href="ＸＸＸＸ.html"　　　←ジャンプ先URL指定
onmouseout="this.style.color='black'"
onmouseover="this.style.color='red'"><font size="3">色が変わる</font></a></p>　　　←メッセージ指定
</body>
</html>
▼背景色を変更する
<script
language="JavaScript">

</script> <script
language="JavaScript">
<!--
function DspWhite()
{
document.bgColor = 'white';
}
function DspRed()
{
document.bgColor = 'red';
}
function DspYellow()
{
document.bgColor = 'yellow';
}
function DspBlue()
{
document.bgColor = 'blue';
}
function DspGreen()
{
document.bgColor = 'green';
}
function DspBrown()
{
document.bgColor = 'brown';
}
function DspBlack()
{
document.bgColor = 'black';
}
// -->
</script> </strong></font></p>
</td>
</tr>
<tr>
<td align="center"><p align="center"><input type="button"　　　↓ここからbody内コピー部分
value="キャンセル" onclick="DspWhite()">　<input　　　←プッシュボタンメッセージ指定
type="button" value="赤がイイ" onclick="DspRed()">　<input　　　←プッシュボタンメッセージ指定
type="button" value="黄がスキ" onclick="DspYellow()">　<input　　　←プッシュボタンメッセージ指定
type="button" value="青もヨシ" onclick="DspBlue()">　<input　　　←プッシュボタンメッセージ指定
type="button" value="ヤッパ緑" onclick="DspGreen()">　<input　　　←プッシュボタンメッセージ指定
type="button" value="黒にスル" onclick="DspBlack()">　<input　　　←プッシュボタンメッセージ指定
type="button" value="茶色ダヨ" onclick="DspBrown()"></p></td>　　　←プッシュボタンメッセージ指定
</tr>
<tr>
<td><p align="left"></TBODY></p>
</td>
</tr>
</table>
</center></div><div align="center"><center>

<table border="0" cellpadding="0" cellspacing="3" width="700">
<TBODY></table>
</center></div>
</body>
</html>
▼お気に入り登録ボタン
<table border="0" cellpadding="0" cellspacing="0" width="200">←プッシュボタンサイズ指定
<p align="center"><input type="button"
value="お気に入りに登録する"　　　←プッシュボタンメッセージ指定
onclick="javascript:window.external.addFavorite('http://www.ＸＸＸＸＸＸＸＸ/','ＸＸＸＸＸ')"><br>←プ登録URLとページ名指定
<font size="1">上ボタンをクリックでお気に入りに登録できます</font></p>　　　←メッセージ指定
▼右クリックメニューを表示する
<STYLE type=text/css>#menu {
BORDER-RIGHT: black 1pt solid; PADDING-RIGHT: 4pt; BORDER-TOP: white 1pt solid; PADDING-LEFT: 4pt; VISIBILITY: hidden; PADDING-BOTTOM: 2pt; BORDER-LEFT: white 1pt solid; PADDING-TOP: 2pt; BORDER-BOTTOM: black 1pt solid; POSITION: absolute; BACKGROUND-COLOR: #FFFF00
}
A.mi {

}
A.mi:link {
COLOR: #000000; TEXT-DECORATION: none
}
A.mi:visited {
COLOR: #000000; TEXT-DECORATION: none
}
A.mi:hover {
COLOR: #ffffff; BACKGROUND-COLOR: #000080
}
</STYLE>

<SCRIPT language=JScript>
<!--
document.oncontextmenu = OnRightButton;
document.onclick = OnLeftButton;

function OnRightButton() {
menu.style.top = document.body.scrollTop + event.y;
menu.style.left = document.body.scrollLeft + event.x;
menu.innerHTML =
"<div>ここは内緒のコンテンツです！</a></div>"
+ "<div><a class='mi' href='http://www.ＸＸＸＸＸＸＸＸ.html'>■ＸＸＸＸＸＸ）</a></div>"　　　←リンク先とタイトル名指定
+ "<div><a class='mi' href='http://www.XＸＸＸＸＸＸＸＸ.html'>■ＸＸＸＸＸＸ）</a></div>";　　　←リンク先とタイトル名指定
if (menu.style.width < 220) {
menu.style.width = 220;
}
menu.style.visibility = "visible";
return false;
}

function OnLeftButton() {
menu.style.visibility = "hidden";
return true;
}

</SCRIPT>

<META content="MSHTML 6.00.2800.1106" name=GENERATOR></HEAD>
<BODY>
<DIV class=i>
<DIV class=i><PRE></PRE></DIV>
<DIV class=i>
<DIV id=menu></DIV></DIV></DIV></BODY></HTML>



Copyright(C) webaichi.com2003

トップページへ