OKANOWEB WEB PARTS SAMPLE

マウスイベント

表示に関するイベント例です。
色や大きさやスタイルを変えたり、画像を変えたりできます。

this.style.colorで前景色を変えることができます。

<p onmouseover="this.style.color='#0066ff'" onmouseout="this.style.color='#000000'">

On Mouse Over Color 文字色を変える

this.style.backgroundrで背景色を変えることができます。

<p onmouseover=
"this.style.background='#e0e0ff'"
onmouseout="this.style.background='#ffffff'">

On Mouse Over Background Color背景色を変える

this.style.fontFamilyで書体を変えます

  <p onmouseover="this.style.fontFamily='Times New Roman'" onmouseout="this.style.fontFamily='Arial'">

On Mouse Over Font Family Times書体を変える

this.style.fontStyleでフォントのスタイルを変えます。

<p onmouseover="this.style.fontStyle='italic'" onmouseout="this.style.fontStyle='normal'">

On Mouse Over Font Style Italic斜体に変える

this.style.fontWeightでフォントの太さを変えます。

<p onmouseover="this.style.fontWeight='bold'" onmouseout="this.style.fontWeight='normal'">

On Mouse Over Font Weight Bold 文字の濃さを変える

this.style.leftで要素の右からの位置を変えることができます。

<p onclick="this.style.left='200px'" onmouseout="this.style.left='0'" style="position: relative;">

On Click Left Move 200px表示位置を変える

this.srcで要素の画像を変えることができます。

<p><img onmouseover="this.src='../images/art01.png'"
        onmouseout="this.src='../images/art07.png'" src="../images/art01.png" width="256" height="256">
      </p>

サンプル