IMGセレクターver0.04
N4.0b3対応版
ボタンに触ると画像が切り替わり、クリックすると指定したリンクを読み込みます(リンク先のページは省略しました(^^;;)。このサンプルは結構重いですが改造時にはなるべく軽い画像を作ることをお薦めします。
IMGセレクターへのリンクを書いてある前ページへ先行読み込みスクリプトを記述すると、IMGセレクターのページでのレスポンスが格段に向上します。ただし、記述する場所はBODYタグの一番最後にしてください。普段通りHEAD内に記述したりすると、前のページの表示が遅くなってしまいます^^;;。BODYタグの最後ならページは普通に表示された上で本文を読んでいる間に次のページ(IMGセレクター)の先行読み込みをやってくれるかたちになります(^^)。
このスクリプトは商用非商用問わず著作権フリーです。使用している画像を含めてコピー改造再配布等になんの制限も設けません。まったく自由に使っていただいて結構です(^^)。
----------------------------------------------------------------------
4/13/1997 ver0.04 (平均4800バイトのボタン画像を平均300バイトへ軽量化・
前ページでの先行読み込みスクリプト追加)
4/11/1997 ver0.03 (IMG構築をHTMLに変更--N4対策)
4/ 9/1997 ver0.02 (ボタンの桁数を可変にしました)
4/ 8/1997 ver0.01
----------------------------------------------------------------------
質問があったので(^^).....Sample画像は牛久大仏の浄土庭園などで高橋が撮影したものです。牛久大仏への行き方などについての質問は直接0298-89-1194(牛久大仏広報課)かまたは、浄土庭園0298-89-2931の方へお願いいたします(_ _)。そろそろ数百万本のお花畑が満開です(^^)。
Sample
Source
ソース
(コピーしてお使いください)
<![CDATA[
<HTML>
<HEAD>
<TITLE></TITLE>
]]><![CDATA[
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
/***************************************************
JavaScript IMGセレクターver0.04(Netscape3.0以上必須/N4b3対応版)
4/8/1997
高橋登史朗(tato@fureai.or.jp)
http://www.fureai.or.jp/~tato/Emenu.htm
-----------------------------------------------------------
商用非商用問わず著作権フリーです。使用している画像を含めて
コピー改造再配布等になんの制限も設けません。まったく自由です。
****************************************************/
//画像処理ここから--------------------------------------------
//ページ内にはここで使うphoto画像やボタンの前に画像が何枚ありますか?
var imgoffset=0;//ボタン画像
/*
photo画像の事前読み込み
ここの画像ファイルを取り替えるとオリジナルになります。
*/
if(navigator.appVersion.charAt(0)>=3)
{
movimg=new Array()
movimg[0] = new Image();movimg[0].src='HATUHI.GIF';
movimg[1] = new Image();movimg[1].src='HAKEN.GIF';
movimg[2] = new Image();movimg[2].src='BOTAN.GIF';
movimg[3] = new Image();movimg[3].src='ISHI.GIF';
movimg[4] = new Image();movimg[4].src='HOKUSAI.GIF';
movimg[5] = new Image();movimg[5].src='HONB.GIF';
movimg[6] = new Image();movimg[6].src='HOZAKI.GIF';
movimg[7] = new Image();movimg[7].src='KAWARA.GIF';
movimg[8] = new Image();movimg[8].src='CHOZU.GIF';
movimg[9] = new Image();movimg[9].src='TEIEN.GIF';
};
/*
ボタンイメージの事前読み込みだよん
このボタンイメージを取り替えればオリジナルボタンになります
ここではB0ON.GIF,B1ON.GIF,B2ON.GIF.....
という風に連番のファイル名を付けて使っています。
*/
if(navigator.appVersion.charAt(0)>=3)
{
//まずonボタンイメージを10枚
Bonimg = new Array();
for(i=0;i<10;i++)
{
Bonimg[i] = new Image();
Bonimg[i].src = "B"+i+"ON.GIF";
};
//次にoffボタンイメージを10枚
Boffimg = new Array();
for(j=0;j<10;j++)
{
Boffimg[j] = new Image();
Boffimg[j].src = "B"+j+"OF.GIF";
};
};
//ボタン画像のon/offとサンプル写真の書き換え
function Bon(Bno)
{
if(navigator.appVersion.charAt(0)>=3)
{
document.images[imgoffset+Bno].src=Boffimg[Bno].src;
document.dai.src=movimg[Bno].src;
};
};
function Boff(Bno)
{
if(navigator.appVersion.charAt(0)>=3)
{
document.images[imgoffset+Bno].src=Bonimg[Bno].src;
};
};
//画像処理ここまで--------------------------------------
//リンク処理ここから------------------------------------
//リンク先のBASE HREFがあれば設定(HTMLと同じなら"")
var LinkHref1="" ;
/*
リンク先の設定
*/
LinkURL=new Array()
LinkURL[0]=LinkHref1+"LINKP0.HTM"
LinkURL[1]=LinkHref1+"LINKP1.HTM"
LinkURL[2]=LinkHref1+"LINKP2.HTM"
LinkURL[3]=LinkHref1+"LINKP3.HTM"
LinkURL[4]=LinkHref1+"LINKP4.HTM"
LinkURL[5]=LinkHref1+"LINKP5.HTM"
LinkURL[6]=LinkHref1+"LINKP6.HTM"
LinkURL[7]=LinkHref1+"LINKP7.HTM"
LinkURL[8]=LinkHref1+"LINKP8.HTM"
LinkURL[9]=LinkHref1+"LINKP9.HTM"
function meirei(Bno)
{
if(navigator.appVersion.charAt(0)>=3)
{
window.location.href=LinkURL[Bno]
};
};
//リンク処理ここまで------------------------------------
<!---->
</SCRIPT>
]]><![CDATA[
</HEAD>
<BODY>
<CENTER>
<!--画像の構築-->
<A
HREF="javascript:meirei(0)"
onMouseOver="Bon(0)" onMouseOut="Boff(0)"
><IMG
BORDER=0 NAME="B0"
SRC="B0ON.GIF"
WIDTH="12" HEIGTH="24"
></A><A
HREF="javascript:meirei(1)"
onMouseOver="Bon(1)" onMouseOut="Boff(1)"
><IMG
BORDER=0 NAME="B1"
SRC="B1ON.GIF"
WIDTH="12" HEIGTH="24"
></A><A
HREF="javascript:meirei(2)"
onMouseOver="Bon(2)" onMouseOut="Boff(2)"
><IMG
BORDER=0 NAME="B2"
SRC="B2ON.GIF"
WIDTH="12" HEIGTH="24"
></A><A
HREF="javascript:meirei(3)"
onMouseOver="Bon(3)" onMouseOut="Boff(3)"
><IMG
BORDER=0 NAME="B3"
SRC="B3ON.GIF"
WIDTH="12" HEIGTH="24"
></A><A
HREF="javascript:meirei(4)"
onMouseOver="Bon(4)" onMouseOut="Boff(4)"
><IMG
BORDER=0 NAME="B4"
SRC="B4ON.GIF"
WIDTH="12" HEIGTH="24"
></A><A
HREF="javascript:meirei(5)"
onMouseOver="Bon(5)" onMouseOut="Boff(5)"
><IMG
BORDER=0 NAME="B5"
SRC="B5ON.GIF"
WIDTH="12" HEIGTH="24"
></A><A
HREF="javascript:meirei(6)"
onMouseOver="Bon(6)" onMouseOut="Boff(6)"
><IMG
BORDER=0 NAME="B6"
SRC="B6ON.GIF"
WIDTH="12" HEIGTH="24"
></A><A
HREF="javascript:meirei(7)"
onMouseOver="Bon(7)" onMouseOut="Boff(7)"
><IMG
BORDER=0 NAME="B7"
SRC="B7ON.GIF"
WIDTH="12" HEIGTH="24"
></A><A
HREF="javascript:meirei(8)"
onMouseOver="Bon(8)" onMouseOut="Boff(8)"
><IMG
BORDER=0 NAME="B8"
SRC="B8ON.GIF"
WIDTH="12" HEIGTH="24"
></A><A
HREF="javascript:meirei(9)"
onMouseOver="Bon(9)" onMouseOut="Boff(9)"
><IMG
BORDER=0 NAME="B9"
SRC="B9ON.GIF"
WIDTH="12" HEIGTH="24"
></A><BR>
<IMG
BORDER=0 NAME="dai"
SRC="KAWARA.GIF"
WIDTH="120" HEIGTH="80"><BR>
</CENTER>
</BODY>
</HTML>
]]>
IMGセレクターを置く前のページの
BODYの一番最後に以下のスクリプトを置いてください
<![CDATA[
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
/*
IMGセレクター用画像先行読み込み
*/
//IMGセレクターの画像を置いてあるディレクトリ(HTMLと同じなら"")
var phHref="" ; //photo画像
var ImgHref="" ; //ボタン画像
if(navigator.appVersion.charAt(0)>=3)
{
movimg=new Array()
movimg[0] = new Image();movimg[0].src=phHref+'HATUHI.GIF';
movimg[1] = new Image();movimg[1].src=phHref+'HAKEN.GIF';
movimg[2] = new Image();movimg[2].src=phHref+'BOTAN.GIF';
movimg[3] = new Image();movimg[3].src=phHref+'ISHI.GIF';
movimg[4] = new Image();movimg[4].src=phHref+'HOKUSAI.GIF';
movimg[5] = new Image();movimg[5].src=phHref+'HONB.GIF';
movimg[6] = new Image();movimg[6].src=phHref+'HOZAKI.GIF';
movimg[7] = new Image();movimg[7].src=phHref+'KAWARA.GIF';
movimg[8] = new Image();movimg[8].src=phHref+'CHOZU.GIF';
movimg[9] = new Image();movimg[9].src=phHref+'TEIEN.GIF';
};
if(navigator.appVersion.charAt(0)>=3)
{
//まずonボタンイメージを10枚
Bonimg = new Array();
for(i=0;i<10;i++)
{
Bonimg[i] = new Image();
Bonimg[i].src = ImgHref+"B"+i+"ON.GIF";
};
//次にoffボタンイメージを10枚
Boffimg = new Array();
for(j=0;j<10;j++)
{
Boffimg[j] = new Image();
Boffimg[j].src = ImgHref+"B"+j+"OF.GIF";
};
};
<!---->
</SCRIPT>
]]>
使用している画像:
B0ON.GIF B1ON.GIF B2ON.GIF B3ON.GIF B4ON.GIF
B5ON.GIF B6ON.GIF B7ON.GIF B8ON.GIF B9ON.GIF
B0OF.GIF 
B1OF.GIF 
B2OF.GIF 
B3OF.GIF 
B4OF.GIF
B5OF.GIF 
B6OF.GIF 
B7OF.GIF 
B8OF.GIF 
B9OF.GIF
HATUHI.GIF 
HAKEN.GIF 
BOTAN.GIF
ISHI.GIF 
HOKUSAI.GIF 
HONB.GIF
HOZAKI.GIF KAWARA.GIF 
CHOZU.GIF 
TEIEN.GIF
ご意見、ご要望、バグ、文句、苦情、陳情は下記まで。
Maintained by
tato@fureai.or.jp works1997 Toshirou Takahashi