rolloverを多用したsampleは
ここをclickしてください
まずは上で動いているシンプルなrolloverを正確に再現できるかどうかの練習です。少しばかり難しい内容ですが、基本形を理解すればバリエーションが広がりダイナミックな演出が可能です。
(1)イメージを用意する。
上図と同じrolloverを作成する場合は以下イメージを「images」のフォルダの中にCOPYします。自分で作成する場合は分かりやすいnameで保存のこと。
onmouse.gif onmouse_on.gif
1.gif 2.gif
photo.gif maru.gif 3.gif
(2)JavaScriptの記述内容を全て<head>内に貼り付けます。
 
(3)上で貼り付けた内容の下方の部分(赤い文字の部分)を自分が作った定義に修正します。ここではrolloverしたときに現れるイメージだけを定義します。onMouseで変化するイメージが全部で5個あれば5個を定義することになります。
photo = newImage("images/photo.gif");
onmouse_on = newImage("images/onmouse_on.gif");
(4)tableを以下のように作成しイメージを挿入します。
(5)rolloverする「onmouse.gif」と「maru.gif」の画像属性に以下nameを記入します。
  • onmouse.gif ⇒ onmouse
  • maru.gif ⇒ maru
(6)<body>に「onload="preloadImages();"」を挿入します。
sample:
<BODY bgcolor="#FFFFFF" onload="preloadImages();" link="#0080ff" vlink="#0000cc" alink="#ff0080">
(7)rolloverさせるtableにこれをを挿入します。
この場合に注意しなければならないのは以下( )の部分です。'maru'と'onmouse'は(5)で記入したnameを指定しています。
・・・('maru', 'images/photo.gif', 'onmouse', 'images/onmouse_on.gif')・・・
('maru', 'images/maru.gif', 'onmouse', 'images/onmouse.gif')・・・
(8)これでrolloverは完成ですが、うまくいきましたか。成功した人は、onclickも付け加えてみましょう。以下に簡単ですが付け加えます。
sample:
onclick="window.open ('s_windows/001.html','','width=156,height=186,resizable=1,scrollbars=no')"
「onclick」を使ってこの場合は、小さいサイズ(上記記入サイズ)のwindowを開かせています。また、「onmouse」同様にrolloverさせてもOKですのでtryしてみてください。
| Back |