HTMLとJavascriptだけで、それも10年くらい前の知識を使って、他人のHPを管理していることをたびたび書いている。その続き。
今回はページの追加を依頼された。この際に、グローバルナビゲーションもどきのメニューを、これまでのホームページビルダーのロールオーバー機能を使うやり方から、Javascriptによる実装に変更してしまおうと思った。ロールオーバー機能のスカタンさについては、１ヶ月前に書いた。あと、ロールオーバーのボタンを増やすと画像データも大量に増えてしまうので、それを一掃できたらいいなとも思ったのだ（先に書くと、この企ては成功した）。
境界線なしの表を作成して、セルにリンクを貼る。マウスオーバーでセルの背景色を変えれば、ボタンっぽく見える。あと下に行を追加して、背景色だけ設定してheightに小さい値を入れると、ボタンの影みたいになって立体的に見える。見えないか？
だいたい1日分くらいの作業量だなと見積もった。果たしてその通りだった。日曜日の朝8時から始めて夜中の2時までかかったけど。
以下、メモです。
マウスオーバーしたときにマウスポインタの形状を指の形に変えるJavascriptは、
function yubi(){
document.body.style.cursor = "hand";
}
だと以前に「はてダ」にメモっていた（うわもう6年も前のエントリーだ！）。
それが今度は動作してくれなかった。検索して、結局"hand"を"pointer"に変えればいいことがわかった。
function yubi(){
document.body.style.cursor = "pointer";
}
Javascriptは気がついたらこの手の細かい変更がところどころに施されている。なんでだ？ ぶつぶつ。
背景色の変更の方は、関数化するとなぜか動いてくれなかった。thisを使うからかな？ Javascrptによるリンク「rocation.href」とともに、tdタグに埋め込んだ。
＜td width="幅" onclick="location.href='ジャンプ先'"
onmouseover="this.style.backgroundColor='背景色'"
onmouseout="this.style.backgroundColor=''"＞
私のJavascriptの知識は全然体系的じゃなくて、何か不足があるとネットで検索してアラカルト的にやっつけてるだけだが、それでも要求される素人芸レベルのことなら、とりあえず何とかなってしまうから進歩がないんだよな。依頼主の社長さんは（大多数の一般人と同様）web技術のことはわからない人だから、それで満足してくれているみたいだし。
まあ早くCSSに移行しとけっていう、毎回通りの結論。
追記：
"hand"がダメな理由は、検索すると"hand"が「IE4以上の独自拡張」だからといういことのようだ。つまり6年前に検索して調べた段階で適切でなかったつか、最初から"pointer"を使っていればよかったということらしい。知識が体系的でないと、こういう落とし穴がある。
スポンサーリンク
