2/2 未記入の入力フォームに案内画像を表示する [ホームページ作成] All About

テキスト入力欄に案内画像を表示するソース

テキスト入力欄の内側に案内を画像で表示させるソースは、下記の通りです。 JavaScript部分は、HTMLファイル内のhead要素内に記述します。 HTML部分は、入力欄を掲載したい箇所に記述します。
※記事「入力フォームが空のときに入力案内を表示」でご紹介したソースと比較すると、分かりやすいかも知れません。

■JavaScript部分

<script type="text/javascript">

function ShowFormGuideImage(obj) {

   // 案内画像を表示

   if( obj.value == '' ) {

      obj.style.backgroundImage='url(searchbg.gif)';

   }

}

function HideFormGuideImage(obj) {

   // 案内画像を消す

   obj.style.backgroundImage = '';

}

</script>

■HTML・スタイルシート部分

<input type="text" size="30" value="" onFocus="HideFormGuideImage(this);" onBlur="ShowFormGuideImage(this);" style="background-image:url(searchbg.gif); background-repeat: no-repeat; background-position: left center; background-color:white; width:150px;">

■説明

上記のソースでは、表示する画像ファイル名は「 searchbg.gif 」になっています。ここには、実際に用意したファイル名を記述して下さい。 JavaScript部分とスタイルシート部分に1回ずつ記述していますので、同じ画像ファイルを記述します。

テキストの表示・非表示を切り替える前回の記事「入力フォームが空のときに入力案内を表示」では、valueプロパティの値を操作して表示内容を切り替え、colorプロパティの値を操作して表示色を切り替えました。今回は、画像（背景画像）の表示・非表示を切り替えるだけなので、backgroundImageプロパティの値に、画像ファイル名を入れたり消したりするだけで実現できます。
※「backgroundImage」プロパティの「Image」の「I」だけは大文字です。

スタイルシート部分では、背景画像を表示させる background-imageプロパティのほか、背景画像の繰り返し方法を指定する background-repeatプロパティと、背景画像の表示位置を指定する background-positionプロパティを指定しています。これは、記事「テキスト入力欄の内側にアイコンを表示する」で解説した通りです。

上記のソースを表示させると、以下のように見えます。
フォーム内部をクリックすると、画像が消えるはずです。（何も入力しないままフォーム外をクリックすれば再表示されます。）

何でも自由に様々な画像を用意して、試してみて下さい。