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

3.PageMillでJavaScriptのロールオーバーに挑戦

ロールオーバーは、リンクされた画像にマウスを位置づけると、違う画像を表示させる機能です。PageMillではロールオーバーを実行させるためにはJavaScriptでプログラミング的なテクニックが必要です。

※ロールオーバーを行うのであれば 8.簡単PageMillでロールオーバーに挑戦の方が簡単です。

JavaScriptと聞くと面倒と思う方が多いと思います。確かにJavaScriptとして、Webページ上に公開されているのは、ブラウザーの下にメッセージを表示したり、時刻を表示したりすることばかりです。そうではないJavaScriptについては、あまり記述されていることが少なく、特にPageMillのユーザーを対象にしたJavaScriptの説明はさらに少ないのは残念です。

ここでは、ロールオーバーを実現させるのもそうですが、JavaScriptについて、少しでも身近に感じてもらえるよう記述したつもりです。

(1)Java Scriptの基礎

では、ロールオーバーを使っただけのWebページを見てみましょう!　サンプルはこちらです。ブラウザを使ってソースモードで見てみて下さい。下記に簡単な説明を記述しています。

a)<SCRIPT LANGUAGE=”Javascript”>

JavaScriptを使ったWebページをソースモードで見ると必ず上の<SCRIPT LANGUAGE〜という単語(タグ)があります。このタグがあればブラウザーはJavaScriptが書かれていると判断します。

b) >

で終わる文章は元々はコメントを意味します。JavaScript対応のブラウザではプログラムとして実行します。JavaScriptに対応していないIE3.1より以前のブラウザーなどは単なるコメントとして無視します。

c)画像名について

まず、画像を用意します。通常の状態の画像と、マウスを位置づけた時の画像です。今回のサンプルでは、通常の状態の画像は、aqanwa01.jpg、画像にマウスを位置づけたときに表示される画像をaqanwa01ov.jpgと名付けています。とくに画像名については制限はありませんが、私の場合は判別しやすいようにロールオーバーの略のovをつけるようにしています。では、実際のJavaScriptの解説です。

(2)解説

これが、サンプルのWebページをソースモードにして表示した例です。HTMLタグ等はわかりやすいよう色分けしています。

　<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
　<title>OutDoorMac</title>
　<meta name="GENERATOR" content="Adobe PageMill 3.0J Mac">

<!--

　function MouseOn(imgName) {
　MouseOnImage = eval(imgName + "On.src")
　document [imgName].src = MouseOnImage}
　function MouseOff(imgName) {
　originalImage = eval(imgName + "Off.src")
　document [imgName].src = originalImage }
　ballOn = new Image()
　ballOn.src = "1Index/aqanwa01ov.jpg"
　ballOff = new Image()
　ballOff.src = "1Index/aqanwa01.jpg"

　// -->

　</script>
　</head>
　<body bgcolor="white">

　</body>
　</html>

この上の行は、これからJavascriptを書いています。というのをブラウザ―に明示しています。

　function MouseOn(imgName) {
　MouseOnImage = eval(imgName + “On.src”)
　document [imgName].src = MouseOnImage}

　function MouseOff(imgName) {
　originalImage = eval(imgName + “Off.src”)
　document [imgName].src = originalImage }

この2つの固まりが、JavaScriptそのもので、今回の”命”ともいう部分です。これを見てわかる人は･･･もう以降は読まなくて結構です。(^^;)

1つめの固まりがfunctionという命令でMouseOnという関数をここで定義しています。

2つめの固まりがFunction命令でMouseOffという関数をここで定義しています。

MouseOnとMouseOffという関数をここで作成して、あとで、呼び出して使います。

<SCRIPT LANGUAGE=”Javascript”>から、この2つの固まりまでは汎用性がありますから、そのまま使用できます。

　ballOn = new Image()
　ballOn.src = “1Index/aqanwa01ov.jpg”

　ballOff = new Image()
　ballOff.src = “1Index/aqanwa01.jpg”

この2つの固まりは、ballOnという変数に実際の画像名を代入しています。

ballOnにはマウスを位置づけて表示される画像を、ballOffには通常に表示される画像名を指定しています。

1IndexはOutDoorMacで画像を格納しているフォルダ名です。先のサンプルのWebページでは、ロールオーバーさせる画像は1組だけでしたが、2つめの画像をロールオーバーさせる場合は、この4行を複写します。

そしてballOnとballOffの代わりに例えばtamaOn、tamaOffのような変数名をつけて下さい。そしてこの変数名は何々Onと何々Offのように命名して下さい。

　//-->
　</SCRIPT>

この2行でJavascriptの記述が終了したことを示します。今回のように <SCRIPT LANGUAGE=”Javascript”>から</SCRIPT>までは<HEAD></HEAD>の間に記述するといいと思います。

　<A HREF=”http://www.netwave.or.jp/~eiji-iio/p630.html”

　onmouseover=”MouseOn(‘ball’)”
　onmouseout=”MouseOff(‘ball’)”>
　<IMG SRC=”1Index/aqanwa01.jpg”

<A HREF=から始まるHTMLタグは、PageMillで、画像にリンクをつけた時に記述されるHTMLタグです。試しにリンクされた画像があるWebページをソースモードで見てみて下さい。同じ様な記述があると思います。

ロールオーバーするために追加したのが次の2つの命令です。

　onmouseover="MouseOn('ball')"
　onmouseout="MouseOff('ball')">

onmouseoverという命令は、その画像にマウスが位置づけられたときに実行する命令です。onmouseoutは、画像からマウスが離れた時に実行される命令です。

a)画像にマウスが位置づけられたときに、onmouseoverという命令が実行されます。

b)そしてその右辺に記述された関数 MouseOnを呼び出します。

c)MouseOnは上で定義しています

d)呼び出されたMouseOn関数は('')内に記述されたballという名前を関数にわたします

e)MouseON関数内でballという名前にOn.srcを加えballOn.srcとします。

f)ballOn.srcに"1Index/aqanwa01ov.jpg"が定義されていることを知ります。

g)この"1Index/aqanwa01ov.jpg"を画像名として表示します。

これによってマウスが画像に位置づけられたときに青色の"1Index/aqanwa01ov.jpg"が表示されるということになります。

これでロールオーバーできるJavascriptの説明は終わりです。

(3)実際にあなたのWebサイトで実行するための手順は･･･

a)通常はPageMillでリンクされた画像までを作成する

b) <SCRIPT LANGUAGE="Javascript">〜 </SCRIPT>までを<HEAD></HEAD>の間にコピーします。

c)ballOn〜balloff.srcまでを変更します。

名前はXXXOnとXXXOfのように名付けます。

d)リンクされた画像のHTML文<A HREF〜</A>の間にonmouseoverからonmouseoutまでをコピーします。

onmouseover="MouseOFF('XXX')"、onmouseout="MouseOff('xxx')"のように変更します。

e)画像名1Index/aqanwa01.jpg、1Index/aqanwa01ov.jpgをそれぞれ変更します。

最初はサンプルみたいな簡単なところから始めるといいと思います。難しそうですが、できれば簡単(当たり前?･･･(笑))です。

がんばって挑戦してみて下さい。

| ← | ↑ | → |

Update: Wed, Mar 31, 2004 / 2:01:17 PM

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

3.PageMillでJavaScriptのロールオーバーに挑戦

(1)Java Scriptの基礎

(2)解説

(3)実際にあなたのWebサイトで実行するための手順は･･･

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