|
ちょっと差のつくテクニック
JavaScript で遊ぼう
画像にマウスを重ねるとその画像が変化する
画像にマウスを重ねたときに、その画像が変化します。 ナビゲーション部分のしかけとしてたびたび見られる技術です。
|
サンプル
|
設置方法
以下を <head> 内に貼りつけてください。
|
<script language="javascript">
<!--
var ImageDirectory = "画像を保存しているディレクトリー";
画像の name 属性(1) _over = new Image(画像の横幅,画像の縦幅);
画像の name 属性(1)_over.src = ImageDirectory
+ "画像ファイル名";
画像の name 属性(1)_out = new Image(画像の横幅,画像の縦幅);
画像の name 属性(1)_out.src
= ImageDirectory + "画像のファイル名";
画像の name 属性(2) _over = new Image(画像の横幅,画像の縦幅);
画像の name 属性(2)_over.src = ImageDirectory
+ "画像のファイル名";
画像の name 属性(2)_out = new Image(画像の横幅,画像の縦幅);
画像の name 属性(2)_out.src
= ImageDirectory + "画像のファイル名";
}
function Img_Over(ImgName) { if (document.images) document.images[ImgName].src
= eval(ImgName + "_over.src");}
function Img_Out(ImgName) { if (document.images) document.images[ImgName].src
= eval(ImgName + "_out.src");}
// -->
</script>
|
「画像を保存しているディレクトリー」の指定部分には、この
HTML ファイルから見て、画像ファイルのあるディレクトリーを記述します。 (同じディレクトリー内にあるのなら何も記述しなくて結構です。)
また、 「画像の name 属性(1)」や「画像の
name 属性(2)」などの変化させる画像の name 属性指定部分を記述し、「new Image」後の「（）」内には、画像の横・縦のサイズ数値指定部分
(指定しなくても大丈夫です。)、「画像ファイル名」を記述します。尚、「○○_over」と「○○_out」は、対になっていて、「○○_over」の部分には、マウスを重ねたときに表示する画像ファイル名を記述し、「○○_out」には、マウスが離れたとき
(元に戻すとき) に表示する画像ファイル名を記述します。
これ以上に、変化する画像部分を追加する場合は、「画像の name
属性(2)_out」の記述以下に、対になっている「○○_over」と「○○_out」の記述を追加していきます。
ただし、JavaScript は、数字で始まる変数名 (画像の name 属性) やアンダーバーを含んだ半角英数字以外の変数名を扱うことは出来ないので注意してください。
そして、以下を <body> 以下のマウスを重ねると変化する画像を表示させたいところに貼り付けてください。
適宜、「*.html」、「*.gif」「画像の name 属性(1)」などの値を変更してください。
|
<a href="*.html"
onMouseOver="Img_Over('画像の name 属性(1)')"
onMouseOut="Img_Out('画像の name 属性(1)')">
<img src="*.gif" width="*" height="*" border="0" name="画像の
name 属性(1)" alt="*">
</a>
<a href="*.html"
onMouseOver="Img_Over('画像の name 属性(2)')"
onMouseOut="Img_Out('画像の name 属性(2)')">
<img src="*.gif" width="*" height="*" border="0" name="画像の
name 属性(2)" alt="*">
</a>
|
下 (↓) のテキストボックス」に必要な事項をいれて「サンプルを作成する」ボタンを押してください。
カーソルを重ねたときに画像を変化させる HTML が生成されます。「サンプル HTML」の内容をコピーしてお使いください。
「(1) HEAD 部分」と「(2) BODY 部分」の 2 つの部分からなっていますので、この 2 つを併せて御利用いただくようお願いいたします。
|
|
HTMLタグ一覧
| 
FAQ | 
サイトマップ | 
お問い合わせ
