tdごと色が変わる

今日はインターネットのプログラミングのことだけを書きます。

私のホームページの自分のページ内での「アトピー」とか、「パワーストーン」、「自作ミュージック」などのリンクを、マウスが触れたときに、tdごと色を変化させるという方法をJavascriptを使って実現していました。以下、簡略化したソースです。


以下、簡略化したHTML、CSSのソース
<td class="menu"><a href=･･････ onmouseover="ontd(this)" onmouseout="outtd(this)" onkeypress="" onClick="jmp2()">????</a></td>

.menu {color: #B9F6F6;
　　　　padding: 4px 2px 4px 6px;
　　　　border: solid #4E6964;
　　　　border-width: 1px 0px;
　　　　cursor:pointer;
}　
//tdに入っただけで、カーソルの形状が変わってほしかったからcorsor:pointerを入れました。


以下、javascriptのソース
function jmp2(){
location.href = "???.html"; //このfuntion jmp()は、文字に触れていない状態で、
　　　　　　　　　　　　　　そのtd内をクリックした場合でも、リンク先に
　　　　　　　　　　　　　　飛べるようにするためです。
}

function ontd(obj){
obj.style.backgroundColor='#07341e';　//onmouseover(マウスが触れているとき)に対応。
obj.style.color='#C8F3F3';
}

function outtd(obj){
obj.style.backgroundColor='#11372c';　//onmouseout(マウスが離れるとき)に対応。
obj.style.color='#ddd37c';
}

このソースコードだと、リンクに触れていても、URLがブラウザに表示されなかったり、td内部にカーソルがいるにも関わらず、文字の色が変化しない(文字に触れていないためです。)など、不都合な点がいくつかありました。(私はtdに少しでもマウスが入ると、文字の色も変化してほしかったわけです。)
私の1曲1曲のページや、１つ１つの作曲法のページへのリンクはすでに、スタイルシートで書き直しているので、以上のような不都合はもう起こりません。しかし「アトピー」、「パワーストーン」などのリンクは昨日までずっとJavascriptで対処していました。
今日はそれをスタイルシートに直しました。

上に書いたソースが、いろいろな場所に点在しているので、完全にきれいなソースにするまでが苦労しましたが、どうにか終わりました。ついでに、マウスが触れたとき、表面がへこんだような画像が入るようにしました。だいぶ前から、スタイルシートに直すべきだ。と思っていたけれど、今までなかなか時間がとれなかったので、今、とてもすっきりした気分です。

上に書いたソースの中で、function ontd()と、function outtd()は、
もしもaタグを使う必要がなく、ただ単に、 "マウスが乗ったとき" ・ "離れたとき" に、その文字色、背景色を変えたいという場合には、役に立つのではないか。と考えています。
私はまだ、javascriptの文法的な法則は理解していないので、C言語を勉強しつつも、少しずつ触れてみようと思っています。

癒しの音楽だけでなく、一般的なインストゥルメンタルも公開しています。

にほんブログ村 音楽ブログ ヒーリングミュージックへ
にほんブログ村
人気ブログランキングへ
ランキングに参加しています。
応援クリックよろしくお願いします。