第5章　応用テクニックのマスター

8.簡単PageMillでロールオーバーに挑戦

テキストのロールーバーは、CSSを使ってできました。次は、画像のロールオーバーに挑戦してみます。i@PageMillではJavaScriptを記述することで今までは対応してきましたが、難しいですね。(^^;)

今回は、HTMLを少し修正するだけでロールオーバー機能を実現させてみます。

用意するのは、マウスをその画像に位置づけると表示される画像と、ハズしたときに表示される画像の2つです。

Photoshopなどで、同じ画像サイズで用意します。画像名は日本語ではなく英数字を使います。

画像名：maru.gif

画像名：batsu.gif

まず、上の丸印を、通常と同じようにPageMillでWebページに貼り付けます。(「挿入」メニュー、「オブジェクト」「画像」で選択してもいいです) そして、「表示」メニューから「ソースモード」を選択します。

<img src="maru.gif" width="50" height="50" border="0">

あ！　ダメです。HTMLはわけがわからない・・・って思っちゃ。僕だって、HTMLを見るとジンマシンが出てきます。ここは我慢して見てみましょう。「虎穴にいらずんば虎児を得ず」「HTMLを見なければロールオーバーできない」です。HTMLの穴に一歩入ってみましょう。画像を示す「IMG SRC」ってのがありますよね。「ふむふむ、画像はIMGなのか・・・」これでOKです。

で、画像の幅と高さがwidthとheightで指定されていて、border="0"で画像の境界線はなしってことです。

ロールオーバーされた画像です。

<img src="maru.gif" width="50" height="50" border="0"
onmouseover="xxxx.src='batsu.gif'"
onmouseout="xxxx.src='maru.gif'" name="xxxx">

上の<img src=〜にonmouseoverでマウスを位置づけた画像のファイル名を指定します。
onmouseoutでマウスを画像から外したときの画像のファイル名を指定します。
xxxxは任意の名前で3ヶ所のみ共通にしておきます。

これだけで、PageMillでは難しかったロールーバーができます。