イメージ切り替え今時のHP作り「IMADOKI」HPデザインサイト、

イメージ切り替え

設置例

イメージ01 イメージ02 イメージ03

◎限られたスペースで、大量の画像を表示させたい場合に便利な小技です。

1）、必要なもの　：　画像数枚。

2）、設置の仕方　：　①～②を実行。

メモ帳の場合

～～手順①～～
まず、<head>～</head>　のタグの間に以下のタグ（スクリプト）を記述します。

//以下の　"●"　この丸の個所へ、画像までのパス（URL）を入れる。
　表示させたい枚数分　var img04 = "●";　と言う風にして数字を増やしながら追加していく。

var img01 = "●";
var img02 = "●";
var img03 = "●";

//以下の個所は変更不可

function startimg(I){
　document.image.src=I;
　}
//-->
</script>

～～手順②～～
<body>～<body>　の実際に表示させたい個所へ以下の様に記述します（テーブル有り）テーブルタグは自由に変更できます、初期状態で表示させる画像を通常のタグで表示させて置きます、img　タグのnameとして　imageを指定します（必須）　このネームをつけた所の画像が切り替わります。
次はリンク設定部の設定です、<a href="★">イメージ01</a>　の★個所を javascript:startimg(■)と入力します、そして　■の部分には　<head>の部分で設定したimg01～img03を入力します、javascript:startimg(img01)　こんな感じです。

FrontPageExpressの場合

～～手順①～～
メニューバーの挿入(I)⇒スクリプト(T)を押して、スクリプトを入力するウインドウを出します、そちらへ以下のタグをメモ帳へ一旦ペーストした後再度メモ帳からコピペするか、直接手打ちして下さい。
編集画面に『Ｊ』このようなマークが出て来ますが、これは消せませんので配置の邪魔にならない所へ置いて置いて下さい、後に画像を追加したい時にはこの『J』のマークを選択して右クリックすると、スクリプトの編集ができます。

var img01 = "●";
var img02 = "●";
var img03 = "●";

//以下の個所は変更不可

function startimg(I){
　document.image.src=I;
　}
//-->
</script>

～～手順②～～
以下のタグをコピーしメモ帳へ一旦ペーストした後、再度メモ帳のタグをコピーします、Expressのメニューバーの表示(V)⇒HTML(H)でタグ画面を出しカーソルを<body>の真下へ持っていき、キーボードの『Ctrl』と『V』を一緒に押してペーストします。通常のExpress編集画面でテーブルは自由に変更できます、初期状態で表示させる画像を通常のタグで表示させて置きます、 iimg　タグのnameとして　imageを指定します（必須）　このネームをつけた所の画像が切り替わります。
次はリンク設定部の設定です、<a href="★">イメージ01</a>　の★個所を javascript:startimg(■)と入力します、そして　■の部分には　<head>の部分で設定したimg01～img03を入力します、javascript:startimg(img01)　こんな感じです。

共同コンテンツ：誰でも解る無料ホームページ作成講座
共同コンテンツ：今時のHP作り！