Java-Script

　マウスのオン・オフ・ダウンでイメージを移動させる。 　　　　　

Sample　下のイメージで、マウスをオン・オフ・ダウンしてみて下さい。

ソース

<HTML>
<HEAD>

<style>
<!--
.m_off {
border-top:    10px  solid #FFFFFF; 
border-bottom: 10px  solid #FFFFFF; 
border-left:   6px   solid #FFFFFF; 
border-right:  10px  solid #FFFFFF; 
}
.m_on {
border-top:    6px   solid #FFFFFF;
border-bottom: 14px  solid #FFFFFF; 
border-left:   10px  solid #FFFFFF; 
border-right:  6px   solid #FFFFFF;
}
.m_dn {
border-top:    13px  solid #FFFFFF;
border-bottom: 7px   solid #FFFFFF; 
border-left:   10px  solid #FFFFFF; 
border-right:  6px   solid #FFFFFF;
}
.m_up {
border-top:    10px  solid #FFFFFF;
border-bottom: 10px  solid #FFFFFF; 
border-left:   10px  solid #FFFFFF; 
border-right:  6px   solid #FFFFFF;
}
//-->
</style>

</HEAD>
<BODY>
<center>
<img src = ../sougo/lg_java.gif title = "Java-Da!" border = "0"
 class = "m_off" 
onmouseover = "this.className='m_on'"
onmousedown = "this.className='m_dn'"
onmouseup = "this.className='m_up'"
onmouseout = "this.className='m_off'"
>
<br>
<br>
</center>
</BODY>
</HTML>

ワンポイント解説

<img src = ../sougo/lg_java.gif　は、適当なイメージを設定してください。

スタイルシートで設定しているので、スタイルシートの項目に入れた方が良いかも。。。？？