ＨＴＭＬ

リンクhoverで指定するような効果をJavaScriptで実現

■打ち消し線■
onMouseover="this.style.textDecoration='line-through'"
onMouseout="this.style.textDecoration='none'"

■枠線■
onMouseover="this.style.border='4px dashed #ff0000'"
onMouseout="this.style.border='0px solid #ffffff'"

■背景色■
onMouseover="this.style.backgroundColor='#ff0000'"
onMouseout="this.style.backgroundColor='#ffffff'"

■移動■
onMouseover="this.style.top=1;this.style.left=1;"
onMouseout="this.style.top=0;this.style.left=0;"
STYLE="position:relative;"

コメントを表示した居場所に下のように書き込みます

カーソルを合わせてコメントを表示させたい所のタグ内に

onMouseOver="Min(0);return true;" OnMouseOut="Mout();"

数字はmsg[0]などのコメントの番号です
例）↓リンクと画像にカーソル合わせて下さい
リンク　　<A href="xxx.htm" onMouseOver="Min(0);return true;" OnMouseOut="Mout();">リンク</A>

タグにマウスが重なった時の処理を書き込みます。

赤字のNAMEを同じにすることに注意してください。

⇒遠隔操作もできます

<IMG NAME="image2" SRC="元の画像の場所" >
<A HREF="#" onMouseOver="if(document.images)document.image2.src='変わる画像';"
OnMouseOut="if(document.images)document.image2.src='元の画像';">
遠隔操作もできます</A>

違う大きさの画像の場合は、画像のWIDTHとHEIGHTは指定しません
画像がテーブル内にあるときには操作元も同じテーブルに入れないと上手く動かないことがあります。
テーブルの外にあっても問題なく動くこともあるのでそこらへんは謎です・・・

ここでは画像の大きさの変化でページのスタイルが変化するのを防ぐため
<SPAN style="height:大きい画像のheight+2px"></SPAN>で囲ってあります。

カーソルを乗せた画像をグレーにします。（IEのみ）

onMouseover="this.style.filter='Gray()'"
onMouseout="this.style.filter=''"

逆バージョンでグレー→カラー

style="filter:Gray();"
onMouseover="this.style.filter=''"
onMouseout="this.style.filter='Gray()'"

それぞれを画像などのタグ内に書き込んでいます
例）
<IMG SRC="画像名" style="filter:Gray();" onMouseover="this.style.filter=''" onMouseout="this.style.filter='Gray()'">

グレーと同様に画像タグなどに書き込んで、カーソルを乗せたものの透明度を変えます。

style="filter:alpha(opacity=50);opacity:0.5;"
onMouseover="this.style.filter='alpha(opacity=100)';this.style.opacity='1.0';"
onMouseout="this.style.filter='alpha(opacity=50)';this.style.opacity='0.5';"

this.style.filterがIE用設定
透明度は100で不透明→0で完全に透明
this.style.opacityはFireFox用設定
1.0が不透明→0で完全に透明
上では50%が初期値、カーソルを乗せたときが完全に不透明になっています

IEならグレーと透明度を組み合わせて使用も可能
初期値が透明度50のグレーでカーソルを乗せると不透明のカラーなら下のようになります。

style="filter:alpha(opacity=50) Gray();"
onMouseover="this.style.filter='alpha(opacity=100)'"
onMouseout="this.style.filter='alpha(opacity=50) Gray()'"

通常右クリックすると出現するコンテキストメニューを禁止します。
個人的にはあまり好きではありませんが…

右クリックを禁止したい範囲のタグに下記を書き込みます。
ページ全体に対してなら<BODY>、部分的になら<DIV>など

oncontextmenu="return false;"

サンプル
この上で右クリックするとメニューは出ません

コンテキストメニューを禁止して、右クリックに別の動作をつけることも出来ます

oncontextmenu="alert('アラート表示');return false;"

サンプル
この上で右クリックするとメニューの代わりにアラートが出ます
アラート以外でもいろいろなことが可能です

- Labo TOP -