日本初、成果保証型アフィリエイト通信教育
月10万円稼げなかったら、受講期間を無料で延長できます

ホームページは難しくない  ちょこっとHTML  Lesson6

<img src="元になる画像" width="○" height="○" alt="代換テキスト" border="0"
onmouseover="RollOver(イメージ名, 'カーソルが重なった時の画像');"
onmouseout="RollOver(イメージ名, 'カーソルが離れた時の画像');">

 

リンクボタンの画像にマウスのカーソルをもっていったら画像の色がかわったり
画像をクリックすると ボタンがへこんだようになるものを見かけたことがあると思います。

これは ロールオーバーというJavaScriptの技術を使っています。
例えば こんな感じです。 このボタンにカーソルをあわせると色が変わります。

ロールオーバーのサンプル

 

しくみを簡単に説明すると、2つの画像 A と B があって

● 通常の状態 Aの画像からマウスのカーソルがかさなると
  Bの画像に入れ替わるという命令

● 画像にカーソルがかさなった状態 Bの画像から
  カーソルが離れると Aの画像に戻るという命令

この 2つの命令文が指定されています。

さて これらの命令文をメモ帳などのテキストエディターで入力するとなると
かなりややこしいし 時間も手間もかかってしまいますので、
ここは ホームページビルダーなどの ホームページ作成ソフトを利用すると
いいでしょう。 そのほうがミスもありませんからね。

各種ソフトによるロールオーバーの指定は それぞれのマニュアルや
ソフトの解説をしている本などを参考にしてください。

 

● ソフトウエアを活用しよう!

ホームページ作成ソフトを使ってロールオーバーを指定すると 
html文章の <head> 〜 </head>内に  JavaScriptのスクリプト言語が
だらだらだら〜〜〜っと勝手に設定され なおかつ訪問者が行うアクションに
ついての設定(onMouseOver とか onMouseOutとか)も同時に行われます。

さらにさらに リンクのボタンはひとつではありませんね。
例えば ボタンが5つあったらそれぞれに名前をつけて
それぞれの動きを制御する設定を 自動的にしてくれます。
ホントに便利ですね。

ロールオーバーの設定で発生させるその他の主なイベントには
つぎのようなものがあります。

onMouseOver 通常の画像から カーソルが重なったとき 
onMouseMove カーソルが対象の画像上で動いたとき
onMouseOut カーソルが重なった状態から離れたとき
onMouseClick マウスで画像をクリックしたとき
onMouseDblClick マウスで画像をダブルクリックしたとき
onMouseDown マウスのボタンが押されたとき
onMouseUp マウスのボタンが離れたとき

ホームページビルダーの場合は onMouseOver と onMouseOut の設定ができます。

 

また PhotoShopやFireworksなどの画像処理ソフトにも
ロールオーバーを作る機能がついているものがあります。
画像処理ソフトですので ボタン自体を作ることはもちろん
同時にHTMLファイルまで書き出してくれます。
下の画像は Fireworksで作りました。 カーソルをあわせたり
クリックしてみたり クリックしたあともカーソルを動かしてみてください

 

FLASH を使うと ボタンを制御するイベントに
音を入れることも可能です。 下の画像は クリックすると
音がでるように設定しています。


あなたは どんなリンクボタンを作りたいですか?


● ロールオーバーを指定するときのポイント

ロールオーバーのリンクを指定する場合 気を付けて欲しいことは、
訪問者が何らかのアクションを起こしたとき 明らかに画像が変わったことを
解って貰うような配慮が必要です。 色が変わる とか ボタンがへこむなど
はっきり解るような画像を選ぶようにしましょう。

また 変更前と変更後の画像の大きさは揃えておきましょう。
ソフトウエアで設定した場合 画像の大きさがたとえ違っていても
最初に読み込まれた画像の大きさで表示されるようです。

● ロールオーバーのデメリット

見た目にもインパクトがあって かっこいいロールオーバーですが
もちろんデメリットもあります。

これは JavaScriptを使った技術ですので、閲覧するブラウザが
JavaScriptに対応していないと機能しません。
バージョンが古いとか 対応していない場合もあります。

また 訪問者側で JavaScriptを読み込まない設定にしてあるケースも
あります。 そういったことも配慮しておきましょう。

ホームページは難しくない  ちょこっとHTML  Lesson6

当ホームページは リンクフリーです! 
Copyright (C) 2004. mamoho. All Rights Reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます。