ホームページビルダー・グレート初心者講座

　オンマウスで表のセルの色を変化させる

マウスがリンクの上に来た時、そのセルの色を変化させる方法を紹介します。

　セルの色の変わるリンク？

マウスをリンクの上に乗せた時、その下のセルの背景を変えるものです。
下にそのサンプルがありますので、マウスを「色の変わるリンク」の上に移動させてみてください。　リンクの上にマウスが乗ったとたん、セルの色が設定した色に変わり、マウスが離れると戻ります。

色の変わるリンク

ホームページビルダーでは背景色を変えるものしかないので、HTMLソースを少しいじりますが、簡単に出来るように説明していきますので、是非やってみてください。　メニューなどにいいと思います。

　作ってみる

表を挿入する
まずは色を変えたいメニューなどを作る場所に表を挿入します。

HTMLソースをコピーする
まずは下の表のソースをコピーしてください。
<TD bgcolor= から 変わるリンク</A></TD> まで全てコピーしてください。

<TD bgcolor="#c4ffc4" id="CEL1" align="center" ><A href="https://homepage3.nifty.com/aimix/search/" onmouseover="document.all['CEL1'].style.background='#9ffdd0'" onmouseout="document.all['CEL1'].style.background='#c4ffc4'">色の変わるリンク</A></TD>

HTMLソースを該当セルに上書きする
次に、色を変えたいセルの中をクリックし、「HTMLソース」タブを押し、ソースを開くと、丁度その表が書いてある場所のソースが表示されます。

その中の ＜TD＞＜／TD＞ となっている所が選択したセルの部分のタグで、下の図のような部分があるので、 ＜TD＞＜／TD＞をドラッグして選択し、そこに先ほどコピーしたソースを貼付けます。

これで選択したセルの色が変わるようになりました。　早速プレビューで表示してみましょう。　

　設定を修正する

文字やリンク先の修正
そのままだと、セル内の文字は「色の変わるリンク」で、セル内の色もそのままですので、好きなようにかえてみます。

文字の太さや色、セルの初期色などは「ページ編集」画面から通常通り編集する事ができるので、好きなように直しましょう。

また、設定したリンクも、リンクしている文字を選択し、「属性の変更」でリンク先のファイル又はURLをリンクしたいものに変更すれば、リンク先も修正できます。

イベント編集画面を表示する
変化する色を修正するには、ページ編集画面で先ほど設定したリンクを選択し、上部メニューの「編集」 → 「リンク」 → 「リンクの設定」を選択し、その中の「イベント」を選択すると、下のようなメニューが出てきます。

また、上記のタグをコピーしたので中に設定されている項目も同じようになっていると思います。

（画像１）

マウスが乗ったときの色を変更してみる
赤丸１で囲われた中の、「OnMouseOver」と書かれている部分を左クリックして下さい｡

OnMouseOver はマウスが上部に来た時にイベントを起こさせる時に使います。

その中の「スクリプト」欄の赤丸３の部分「#9ffdd0」の部分を好きな色に変更します。

色の数字は、セルや文字の色を変える操作を行う時に横に表示されているので、それをコピーなどして入れてもいいですし、「カラーパレット」を表示して、その中の色をクリックする事でも、選択した色に対応した数字を知る事ができます。
※ コンマなど、セルの色以外の設定は触らないで下さい。

（画像２）

マウスが離れた時のセルの色を変更する
（画像１）の赤丸１の 「OnmouseOut」 を左クリックします。
マウスが乗って変えた色を元のセルの色に戻したいので、「文字やリンク先の修正」で変更したセルの色をここに設定します。

設定方法は上記、マウスが乗ったときの色を～で設定したのと同じように設定します。
※ コンマなど、セルの色以外の設定は触らないで下さい。

　セルが多い時

以上の操作でセルの色がオリジナルの色になりましたが、セルがもっと沢山あった時はそのまま同じように次のセルも
設定するとエラーがでます。

２つ目のセルを設定するには
１つ目のセルの設定と同じく、次のセルも、「HTMLソースのコピー」「該当セルに上書」をします。

コピーした内容を見てみると、「CEL1」という文字が３回出てきています。

１つ目のセルはこのままでいいのですが、２つ目のセルは、これを違う文字に直します。１つ目が「CEL1」なら、１つ目は「CEL2」など
とすると分かりやすいでしょう。

これはセルを判別する為の「ID」で、違うセルなのに同じIDが入っているとエラーが出ます。　CEL1、CEL2．．．でなくても、自分が分かりやすい英数字ならOKです。
１つのセル内に設定したIDは３つとも同じようになるようにして下さい。

これを変更したら、あとは先ほどと同じように文字色やリンクなどを変更すれば出来上がりです。

後は同じように
２つ目以降、セルが増えた場合も上記の手順で、セルの「ID」を別のものに変更していってもらえれば、設定できます。

　設定時の注意

設定する時の注意事項ですが、ホームページビルダーでは、エラーが検出された場合、自動的にエラー周辺のソースを直してしまいますので、上記で説明した「ID」を間違えてエラーが出てしまったりした場合、勝手に直されてしまいます。

直してくれるのはいいのですが、自分の考えているものと違った直し方をしてくれるので、エラーが出で修正されてしまったら、メニューから「元に戻す」で修正前の状態に戻し、やり直しましょう。

また、これを防ぐには「ツール」 → 「オプション」 → 「一般」の設定で自動修正されるのをやめさせる事ができます。

また、文字色やセルのIDを変更する時は、間違ってまわりのソースまで削除したり、余分に付け加えてしまったりしないようにしましょう。