ＪａｖａＳｃｒｉｐｔ　Ｆｏｒ　Ｂｅｇｉｎｎｅｒ
▲ＴＯＰ
Ｔｉｐｓ

※注：
下記 JavaScript は、動作環境：ＩＥ５／ＩＥ６／ＮＮ４．７にて確認していますが、その他では確認しておりません

▼　ＭＥＮＵ　背景色
文字にマウスポインタを合わせると背景色を変更
文字にマウスポインタを合わせると背景色を変更（文字列）
文字にマウスポインタを合わせると背景色を変更（テーブル内・テーブルセル内）
ボタンクリックで背景色を変更
ボタンクリックで背景色を変更（文字列 or 指定行）
ボタンクリックで背景色を変更（テーブル内・テーブルセル内）
テーブル・セルにマウスポインタを合わせるとテーブル・セルの背景色を変更
▼　ＭＥＮＵ　画像・背景画像
文字にマウスポインタを合わせると背景画像を表示
文字にマウスポインタを合わせると背景画像を表示（テーブル内・テーブルセル内）
ボタンクリックで背景画像を表示
ボタンクリックで背景画像を表示（テーブル内・テーブルセル内）
画像にマウスポインタを合わせると画像変更
▼　ＭＥＮＵ　スライドショー
ボタンクリックでスライドショー（指定枚数を繰り返し）
ボタンクリックでスライドショー（折り返し・ボタン１つ）
ボタンクリックでスライドショー（折り返し・ボタン２つ）
ボタンクリックでスライドショー（時間経過ごとに変更）
ボタンクリックでスライドショー（ランダムに変更）
ボタンクリックでスライドショー（時間経過ごとにランダムに変更）



Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6,NN4.7
文字にマウスポインタを合わせると背景色を変更
また onMouseOut を使用し、文字からマウスポインタを離すと元の背景色に戻る様に指定
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
function change_bgc(bg_color){
document.bgColor = bg_color;
}
//-->
</script>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<a href="javascript: void(0);" onMouseOver="change_bgc('#000000')"
onMouseOut="change_bgc('#ffffff')">
ここにマウスポインタを合わせて
</a>
結果
ここにマウスポインタを合わせて

onMouseOver と onMouseOut の　change_bgc('背景色') の 背景色の部分を変更する事により、別の背景色に変える事が出来ます。
色指定は、こちら→色見本へ
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6,NN4.7
文字にマウスポインタを合わせると背景色を変更（文字列）
また onMouseOut を使用し、文字からマウスポインタを離すと元の背景色に戻る様に指定
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
function change_bgc(id,bg_color){
if (document.all){
document.all[id].style.background = bg_color;
}else if(document.layers){
document.layers[id].bgColor = bg_color;
}
}
//-->
</script>

<!-- 下記 <style> 〜 </style> を <head> 〜 </head> 間に記述 -->
<style type="text/css">
<!--
#bgc02{
position : relative;
top : 0px;
left : 0px;
}
-->
</style>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<a href="javascript: void(0);" onMouseOver="change_bgc('bgc02','#000000')"
onMouseOut="change_bgc('bgc02','#ffffff')" id="bgc02">
ここにマウスポインタを合わせて
</a>
結果
ここにマウスポインタを合わせて

onMouseOver と onMouseOut の　change_bgc('id名','背景色') の 背景色の部分を変更する事により、別の背景色に変える事が出来ます。
色指定は、こちら→色見本へ
IE5 では、リンクを貼らない場合 a タグを span タグでも可能。また div タグに変更する事で、行全体の背景色の変更になります。
NN4.7 では、確認できませんでした。
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6,NN4.7
文字にマウスポインタを合わせると背景色を変更（テーブル内・テーブルセル内）
また onMouseOut を使用し、文字からマウスポインタを離すと元の背景色に戻る様に指定
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
function change_bgc(id,bg_color){
if (document.all){
document.all[id].style.background = bg_color;
}else if (document.layers){
document.layers[id].bgColor = bg_color;
}
}
//-->
</script>

<!-- 下記 <style> 〜 </style> を <head> 〜 </head> 間に記述 -->
<style type="text/css">
<!--
#bgc031{
position: relative;
}
-->
</style>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<span onMouseOver="change_bgc('bgc030','#000000')"
onMouseOut="change_bgc('bgc030','#ffffff')">
ここにマウスポインタを合わせて、テーブル全体背景色が変わります
</span><br />
<span onMouseOver="change_bgc('bgc031','#000000')"
onMouseOut="change_bgc('bgc031','#ffffff')">
ここにマウスポインタを合わせて、センターのセル一部だけ背景色が変わります
</span>
<a href="javascript: void(0);" onMouseOver="change_bgc('bgc031','#000000')"
onMouseOut="change_bgc('bgc031','#ffffff')">
〃     （IE5/NN4.7：確認済）
</a>
<table border="1" id="bgc030">
<tr><td>sample</td><td>sample</td><td>sample</td></tr>
<tr><td>sample</td><td id="bgc031">sample</td><td>sample</td></tr>
<tr><td>sample</td><td>sample</td><td>sample</td></tr>
</table>
結果
ここにマウスポインタを合わせて、テーブル全体背景色が変わります（IE5：確認済）
ここにマウスポインタを合わせて、センターのセル一部だけ背景色が変わります（IE5：確認済）
〃     （IE5/NN4.7：確認済）
samplesamplesample
samplesamplesample
samplesamplesample

onMouseOver と onMouseOut の　change_bgc('id名','背景色') の 背景色の部分を変更する事により、別の背景色に変える事が出来ます。
色指定は、こちら→色見本へ
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6,NN4.7
ボタンクリックで背景色を変更
onMouseOut を使用し、ボタンからマウスポインタを離すと元の背景色に戻る様に指定
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
function change_bgc(bg_color){
if (document.all){
document.all[id].style.background = bg_color;
}else if (document.layers){
document.layers[id].bgColor = bg_color;
}
}
//-->
</script>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<form>
<input type="button" value="push" onClick="change_bgc('#000000')"
onMouseOut="change_bgc('#ffffff')">
←背景が黒に変わります
<input type="button" value="push" onClick="change_bgc('#ffffff')">
←ブラウザによって背景が黒のままの場合、白に変わります
</form>
結果
←背景が黒に変わります
←ブラウザによって背景が黒のままの場合、白に変わります

onClick onMouseOut の　change_bgc('背景色') の 背景色の部分を変更する事により、別の背景色に変える事が出来ます。
色指定は、こちら→色見本へ
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6,NN4.7
ボタンクリックで背景色を変更（文字列 or 指定行）
onMouseOut を使用し、文字からマウスポインタを離すと元の背景色に戻る様に指定
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
function change_bgc(id,bg_color){
if (document.all){
document.all[id].style.background = bg_color;
}else if (document.layers){
document.layers[id].bgColor = bg_color;
}
}
//-->
</script>

<!-- 下記 <style> 〜 </style> を <head> 〜 </head> 間に記述 -->
<style type="text/css">
<!--
#bgc050,#bgc051{
position : relative;
}
-->
</style>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<form>
<input type="button" value="push" onClick="change_bgc('bgc050','#000000')"
onMouseOut="change_bgc('bgc050','#ffffff')">
<span id="bgc050">左記ボタンクリックでこの部分の背景が変更</span>
<input type="button" value="push" onClick="change_bgc('bgc050','#ffffff')">
←ブラウザによって背景色が黒のままの場合、左記ボタンを押すと白に変わります
<input type="button" value="push" onClick="change_bgc('bgc051','#000000')"
onMouseOut="change_bgc('bgc051','#ffffff')">
<div id="bgc051">
上記ボタンクリックでこの部分の行全体の背景が変更（NN4.7は、上記と略変わらず）
</div>
<input type="button" value="push" onClick="change_bgc('bgc051','#ffffff')">
←ブラウザによって背景色が黒のままの場合、左記ボタンを押すと白に変わります
</form>
結果
文字列のみ背景色変更
左記ボタンクリックでこの部分の背景色が変更

←ブラウザによって背景が黒のままの場合、左記ボタンを押すと白に変わります

行全体背景色変更
上記ボタンクリックでこの部分の行全体の背景色が変更（NN4.7は、上記と略変わらず）

←ブラウザによって背景が黒のままの場合、左記ボタンを押すと白に変わります

onClick と onMouseOut の　change_bgc('id名','背景色') の 背景色の部分を変更する事により、別の背景色に変える事が出来ます。
色指定は、こちら→色見本へ
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6,NN4.7
ボタンクリックで背景色を変更（テーブル内・テーブルセル内）
onMouseOut を使用し、文字からマウスポインタを離すと元の背景色に戻る様に指定
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
function change_bgc(id,bg_color){
if (document.all){
document.all[id].style.background = bg_color;
}else if(document.layers){
if (id != 'bgc060'){
document.layers[id].bgColor = bg_color;
}
}
}
//-->
</script>

<!-- 下記 <style> 〜 </style> を <head> 〜 </head> 間に記述 -->
<style type="text/css">
<!--
#bgc061{
position : relative;
}
-->
</style>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<form>
<input type="button" value="push" onClick="change_bgc('bgc060','#000000')"
onMouseOut="change_bgc('bgc060','#ffffff')">
左記ボタンをクリックで、テーブル全体背景色が変わります
<input type="button" value="push" onClick="change_bgc('bgc061','#000000')"
onMouseOut="change_bgc('bgc061','#ffffff')">
左記ボタンをクリックで、センターのセル一部だけ背景色が変わります
<input type="button" value="push" onClick="change_bgc('bgc061','#ffffff')">
ブラウザによって背景色が黒のままの場合、左記ボタンをクリックで白に変わります
</form>
<table border="1" id="bgc060">
<tr><td>sample</td><td>sample</td><td>sample</td></tr>
<tr><td>sample</td><td id="bgc061">sample</td><td>sample</td></tr>
<tr><td>sample</td><td>sample</td><td>sample</td></tr>
</table>
結果
左記ボタンをクリックで、テーブル全体背景色が変わります（IE5/IE6：確認済）
左記ボタンをクリックで、センターのセル一部だけ背景色が変わります（IE5/IE6/NN4.7：確認済）
ブラウザによって背景色が黒のままの場合、左記ボタンをクリックで白に変わります
samplesamplesample
samplesamplesample
samplesamplesample

onClick と onMouseOut の　change_bgc('id名','背景色') の 背景色の部分を変更する事により、別の背景色に変える事が出来ます。
色指定は、こちら→色見本へ
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6
テーブル・セルにマウスポインタを合わせるとテーブル・セルの背景色を変更
onMouseOut を使用し、テーブルからマウスポインタを離すと元の背景色に戻る様に指定
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
function change_bgc(id,bg_color){
document.all[id].style.background = bg_color;
}
//-->
</script>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<table border="1" id="bgc070" onMouseOver="change_bgc('bgc070','#000000')">
onMouseOut="change_bgc('bgc070','none')">
<tr>
<td id="bgc071" onMouseOver="change_bgc('bgc071','#ffffff')"
onMouseOut="change_bgc('bgc071','none')">
sample
</td>
<td id="bgc072" onMouseOver="change_bgc('bgc072','#ffffff')"
onMouseOut="change_bgc('bgc072','none')">
sample
</td>
<td id="bgc073" onMouseOver="change_bgc('bgc073','#ffffff')"
onMouseOut="change_bgc('bgc073','none')">
sample
</td>
</tr>
<tr>
<td id="bgc074" onMouseOver="change_bgc('bgc074','#ffffff')"
onMouseOut="change_bgc('bgc074','none')">
sample
</td>
<td id="bgc075" onMouseOver="change_bgc('bgc075','#ffffff')"
onMouseOut="change_bgc('bgc075','none')">
sample
</td>
<td id="bgc076" onMouseOver="change_bgc('bgc076','#ffffff')"
onMouseOut="change_bgc('bgc076','none')">
sample
</td>
</tr>
<tr>
<td id="bgc077" onMouseOver="change_bgc('bgc077','#ffffff')"
onMouseOut="change_bgc('bgc077','none')">
sample
</td>
<td id="bgc078" onMouseOver="change_bgc('bgc078','#ffffff')"
onMouseOut="change_bgc('bgc078','none')">
sample
</td>
<td id="bgc079" onMouseOver="change_bgc('bgc079','#ffffff')"
onMouseOut="change_bgc('bgc079','none')">
sample
</td>
</tr>
</table>
結果　※テーブル・個々のセルにマウスポインタを合わせると背景色が変更
sample sample sample
sample sample sample
sample sample sample

onMouseOver と onMouseOut の　change_bgc('id名','背景色') の 背景色の部分を変更する事により、別の背景色に変える事が出来ます。
色指定は、こちら→色見本へ
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6
文字にマウスポインタを合わせると背景画像を表示
また onMouseOut を使用し、文字からマウスポインタを離すと元の背景画像を消す様に指定
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
function change_bgi(id,img_src){
document.all[id].style.backgroundImage = "url(" + img_src + ")"
// 下記でも可能
// document.body.background = img_src;
}
//-->
</script>

<!-- id="body" を body タグ内に追加 -->
<body id="body">

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<span onMouseOver="change_bgi('body','../../image/sample.png')"
onMouseOut="change_bgi('body','')">
ここにマウスポインタを合わせて
</span>
結果
ここにマウスポインタを合わせて

onMouseOver の　change_bgi('id名','背景画像パス') の 背景画像パスを使用したい画像のパスに変更して下さい
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6
文字にマウスポインタを合わせると背景画像を表示（テーブル内・テーブルセル内）
また onMouseOut を使用し、文字からマウスポインタを離すと元の背景画像を消す様に指定
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
function change_bgi(id,img_src){
document.all[id].style.backgroundImage = "url(" + img_src + ")"
}
//-->
</script>

<!-- id="body" を body タグ内に追加 -->
<body id="body">

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<span onMouseOver="change_bgi('bgi020','../../image/sample.png')"
onMouseOut="change_bgi('bgi020','')">
ここにマウスポインタを合わせて、テーブル内背景画表示されます
</span><br />
<span onMouseOver="change_bgi('bgi021','../../image/sample.png')"
onMouseOut="change_bgi('bgi021','')">
ここにマウスポインタを合わせて、テーブルセル中央に背景画表示されます
</span>
<table border="1" id="bgi020">
<tr><td>sample</td><td>sample</td><td>sample</td></tr>
<tr><td>sample</td><td id="bgi021">sample</td><td>sample</td></tr>
<tr><td>sample</td><td>sample</td><td>sample</td></tr>
</table>
結果
ここにマウスポインタを合わせて、テーブル内背景画表示されます
ここにマウスポインタを合わせて、テーブルセル中央に背景画表示されます
samplesamplesample
samplesamplesample
samplesamplesample

onMouseOver の　change_bgi('id名','背景画像パス') の 背景画像パスを使用したい画像のパスに変更して下さい
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6
ボタンクリックで背景画像を表示
onMouseOut を使用し、文字からマウスポインタを離すと元の背景画像を消す様に指定
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
function change_bgi(id,img_src){
document.all[id].backgroundImage = "url(" + img_src + ")"
}
//-->
</script>

<!-- id="body" を body タグ内に追加 -->
<body id="body">

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<form>
<input type="button" onClick="change_bgi('body','../../image/sample.png')"
onMouseOut="change_bgi('body','')" value="push">
</form>
結果

onClick の　change_bgi('id名','背景画像パス') の 背景画像パスを使用したい画像のパスに変更して下さい
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6
ボタンクリックで背景画像を表示（テーブル内・テーブルセル内）
onMouseOut を使用し、文字からマウスポインタを離すと元の背景画像を消す様に指定
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
function change_bgi(id,img_src){
document.all[id].style.backgroundImage = "url(" + img_src + ")"
}
//-->
</script>

<!-- id="body" を body タグ内に追加 -->
<body id="body">

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<form>
<input type="button" onClick="change_bgi('bgi040','../../image/sample.png')"
onMouseOut="change_bgi('bgi040','')" value="push">
左記ボタンをクリックで、テーブル内背景画表示されます
<input type="button" onClick="change_bgi('bgi041','../../image/sample.png')"
onMouseOut="change_bgi('bgi041','')" value="push">
左記ボタンをクリックで、テーブルセル中央に背景画表示されます
</form>
<table border="1" id="bgi040">
<tr><td>sample</td><td>sample</td><td>sample</td></tr>
<tr><td>sample</td><td id="bgi041">sample</td><td>sample</td></tr>
<tr><td>sample</td><td>sample</td><td>sample</td></tr>
</table>
結果
左記ボタンをクリックで、テーブル内背景画表示されます
左記ボタンをクリックで、テーブルセル中央に背景画表示されます
samplesamplesample
samplesamplesample
samplesamplesample

onClick の　change_bgi('id名','背景画像パス') の 背景画像パスを使用したい画像のパスに変更して下さい
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6,NN4.7
画像にマウスポインタを合わせると画像変更
onMouseOut を使用し、画像からマウスポインタを離すと元の背景画像に指定
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
function change_img(id,img_src){
document.images[id].src = img_src;
}
//-->
</script>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<a href="javascript:void(0);"
onMouseOver="change_img('bgi05','../../image/sample12.png')"
onMouseOut="change_img('bgi05','../../image/sample11.png')">
<img id="bgi05" name="bgi05" src="../../image/sample11.png"
width="40" height="40" alt="サンプル" border="0" />
</a>
結果
サンプル

onMouseOver の　change_img('id名','背景画像パス') の 背景画像パスを使用したい画像のパスに変更して下さい
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6,NN4.7
ボタンクリックでスライドショー（指定枚数を繰り返し）
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
slide00_cnt = 0;
slideImg = new Array();
slideImg[0] = "../../image/sample11.png";
slideImg[1] = "../../image/sample12.png";
slideImg[2] = "../../image/sample13.png";
slideImg[3] = "../../image/sample14.png";
slideImg[4] = "../../image/sample15.png";

function slide00(id){
if (slide00_cnt == slideImg.length -1){
slide00_cnt = 0;
}else{
slide00_cnt++;
}
document.images[id].src = slideImg[slide00_cnt];
}
//-->
</script>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<form>
<input type="button" value="push" onClick="slide00('slide_id00')" />
</form>
<img id="slide_id00" name="slide_id00" src="../../image/sample11.png"
width="40" height="40" alt="サンプル画像" />
結果
サンプル画像

    下記３点を変更すれば、応用出来ます
  • slideImg[数値] = "画像パス"　で、スライドショーさせたい表示枚数分指定
  • img タグ内の src="画像パス" に初期設定画像パス
  • img タグ内の width="幅" height="高さ" を表示させたい画像幅・高さに指定
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6,NN4.7
ボタンクリックでスライドショー（折り返し・ボタン１つ）
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
slide01_cnt = 0;
slideImg = new Array();
slideImg[0] = "../../image/sample11.png";
slideImg[1] = "../../image/sample12.png";
slideImg[2] = "../../image/sample13.png";
slideImg[3] = "../../image/sample14.png";
slideImg[4] = "../../image/sample15.png";

function slide01(id){
if (slide01_cnt == 0){
up_down_flag = "up";
}else if(slide01_cnt == slideImg.length - 1){
up_down_flag = "down";
}

if (up_down_flag == "up"){
slide01_cnt++;
}else{
slide01_cnt--;
}
document.images[id].src = slideImg[slide01_cnt];
}
//-->
</script>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<form>
<input type="button" value="push" onClick="slide01('slide_id01')" />
</form>
<img id="slide_id01" name="slide_id01" src="../../image/sample11.png"
width="40" height="40" alt="サンプル画像" />
結果
サンプル画像

    下記３点を変更すれば、応用出来ます
  • slideImg[数値] = "画像パス"　で、スライドショーさせたい表示枚数分指定
  • img タグ内の src="画像パス" に初期設定画像パス
  • img タグ内の width="幅" height="高さ" を表示させたい画像幅・高さに指定
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,I6,NN4.7
ボタンクリックでスライドショー（折り返し・ボタン２つ）
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
slide02_cnt = 0;
slideImg = new Array();
slideImg[0] = "../../image/sample11.png";
slideImg[1] = "../../image/sample12.png";
slideImg[2] = "../../image/sample13.png";
slideImg[3] = "../../image/sample14.png";
slideImg[4] = "../../image/sample15.png";

function slide02(id,chk){
if (chk == "start"){
if (slide02_cnt < slideImg.length - 1){
slide02_cnt++;
}
}else{
if (slide02_cnt > 0){
slide02_cnt--;
}
}
document.images[id].src = slideImg[slide02_cnt];
}
//-->
</script>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<form>
<input type="button" value="＜＜" onClick="slide02('slide_id02','end')" />
<input type="button" value="＞＞" onClick="slide02('slide_id02','start')" />
</form>
<img id="slide_id02" name="slide_id02" src="../../image/sample11.png"
width="40" height="40" alt="サンプル画像" />
結果
サンプル画像

    下記３点を変更すれば、応用出来ます
  • slideImg[数値] = "画像パス"　で、スライドショーさせたい表示枚数分指定
  • img タグ内の src="画像パス" に初期設定画像パス
  • img タグ内の width="幅" height="高さ" を表示させたい画像幅・高さに指定
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6,NN4.7
ボタンクリックでスライドショー（時間経過ごとに変更）
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
obj_id03 = new Object();
slide03_cnt = 0;
time_id03 = "";
one_click_flg = 0;
slideImg = new Array();
slideImg[0] = "../../image/sample11.png";
slideImg[1] = "../../image/sample12.png";
slideImg[2] = "../../image/sample13.png";
slideImg[3] = "../../image/sample14.png";
slideImg[4] = "../../image/sample15.png";

function slide03(id){
if (one_click_flg == 0){
one_click_flg = 1;
obj_id03 = id;
time_id03 = setInterval("slide03_start(obj_id03)", 2000);
}
}

function slide03_start(id){
if (slide03_cnt == slideImg.length - 1){
slide03_cnt = 0;
}else{
slide03_cnt++;
}
document.images[id].src = slideImg[slide03_cnt];
}

function time_id03_clear(){
clearInterval(time_id03);
one_click_chk = 0;
}
//-->
</script>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<form>
<input type="button" value="push" onClick="slide03('slide_id03')"
onMouseOut="time_id03_clear()" />
</form>
<a href="javascript:void(0);" onMouseOver="slide_id03_clear()">
<img id="slide_id03" name="slide_id03" src="../../image/sample11.png"
width="40" height="40" alt="サンプル画像" border="0" />
</a>
結果　※ボタンからマウスを外すと止まる様に指定してあります。
（ブラウザによって止まらない場合は、画像にマウスを合わせて下さい）
サンプル画像

    下記４点を変更すれば、応用出来ます
  • slideImg[数値] = "画像パス"　で、スライドショーさせたい表示枚数分指定
  • setInterval("〜",2000) の 2000 の部分の秒間隔を変更（１秒＝１０００）
  • img タグ内の src="画像パス" に初期設定画像パス
  • img タグ内の width="幅" height="高さ" を表示させたい画像幅・高さに指定
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6,NN4.7
ボタンクリックでスライドショー（ランダムに変更）
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
old_kazu04 = 0;
keta04 = 0;
slideImg = new Array();
slideImg[0] = "../../image/sample11.png";
slideImg[1] = "../../image/sample12.png";
slideImg[2] = "../../image/sample13.png";
slideImg[3] = "../../image/sample14.png";
slideImg[4] = "../../image/sample15.png";

function slide04(id){
keta04 = keta04_get();
do {
random = Math.random() * keta04;
kazu04 = Math.floor(random);
}while (kazu04 >= slideImg.length || kazu04 == old_kazu04)
document.images[id].src = slideImg[kazu04];
old_kazu04 = kazu04;
}

function keta04_get(){
if (slideImg.length < 10){
keta04 = 10;
}else if( slideImg.length < 100){
keta04 = 100;
}
return keta04;
}
//-->
</script>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<form>
<input type="button" value="push" onClick="slide04('slide_id04')" />
</form>
<img id="slide_id04" name="slide_id04" src="../../image/sample11.png"
width="40" height="40" alt="サンプル画像" />
結果

サンプル画像

    下記３点を変更すれば、応用出来ます
  • slideImg[数値] = "画像パス"　で、スライドショーさせたい表示枚数分（９９枚まで）指定
  • img タグ内の src="画像パス" に初期設定画像パス
  • img タグ内の width="幅" height="高さ" を表示させたい画像幅・高さに指定
▲Ｂａｃｋ

Ｓａｍｐｌｅ
動作環境確認済：IE5,IE6,NN4.7
ボタンクリックでスライドショー（時間経過ごとにランダムに変更）
例．
<!-- 下記 <script> 〜 </script> を <head> 〜 </head> 間に記述 -->
<script type="text/javascript">
<!--
obj_id05 = new Object();
old_kazu05 = 0;
keta05 = 0;
one_click_flg = 0;
slideImg = new Array();
slideImg[0] = "../../image/sample11.png";
slideImg[1] = "../../image/sample12.png";
slideImg[2] = "../../image/sample13.png";
slideImg[3] = "../../image/sample14.png";
slideImg[4] = "../../image/sample15.png";

function slide05(id){
if (one_click_flg == 0){
one_click_flg = 1;
obj_id05 = id;
time_id05 = setInterval("slide05_start(obj_id05)",2000);
}
}

function time_id05_clear(){
clearInterval(time_id05);
one_click_chk = 0;
}

function slide05_start(id){
keta05 = keta05_get();
do {
random = Math.random() * keta05;
kazu05 = Math.floor(random);
}while (kazu05 >= slideImg.length || kazu05 == old_kazu05)
document.images[id].src = slideImg[kazu05];
old_kazu05 = kazu05;
}

function keta05_get(){
if (slideImg.length < 10){
keta05 = 10;
}else if( slideImg.length < 100){
keta05 = 100;
}
return keta05;
}
//-->
</script>

<!-- 下記の構文を<body> 〜 </body> 間に記述 -->
<form>
<input type="button" value="push" onClick="slide05('slide_id05')"
onMouseOut="time_id05_clear()" />
</form>
<a href="javascript: void(0);" onMouseOver="time_id05_clear()">
<img id="slide_id05" name="slide_id05" src="../../image/sample11.png"
width="40" height="40" alt="サンプル画像" border="0&quto; />
</a>
結果　※ボタンからマウスポインタを外すと止まる様に指定してあります
（ブラウザによって止まらない場合は、画像にマウスを合わせて下さい）
サンプル画像

    下記４点を変更すれば、応用出来ます
  • slideImg[数値] = "画像パス"　で、スライドショーさせたい表示枚数分（９９枚まで）指定
  • setInterval("〜",2000) の 2000 の部分の秒間隔を変更（１秒＝１０００）
  • img タグ内の src="画像パス" に初期設定画像パス
  • img タグ内の width="幅" height="高さ" を表示させたい画像幅・高さに指定
▲Ｂａｃｋ