[TOP] [戻る]
<マウス操作>  *  マウスオーバーでフォント・テキストを変える * 

  • マウスオーバーで文字色が変わる
  • マウスオーバーで文字が変わる
  • マウスオーバーで文字の大きさが変わる
  • マウスオーバーで文字が斜体になる
  • マウスオーバーで太文字になる
  • マウスオーバーで下線等が表示される
  • マウスオーバーで文字に背景色がが表示される
  • マウスオーバーで文字を消す


  • onmouseover="〜" (カーソルが要素の上に乗った状態)
    onmouseout="〜" (カーソルが要素の上から離れた状態)






    色文字 : 変更する所
    ■マウスオーバーで文字色が変わる
    <font color="#008080" onmouseover="this.color='#ff00ff'" onmouseout="this.color='#ff0000'">
    マウスオーバーで文字色が変わる</font>


    ■マウスオーバーで文字が変わる
    <font color="#008080" onmouseover="this.color='#ff00ff'" onmouseout="this.color='#daa520'"> <span onmouseover="this.innerText='変わりましたか???'" onmouseout="this.innerText='★マウスオーバーで文字が変わる'"> ■マウスオーバーで文字が変わる</span></font>


    ■マウスオーバーで文字の大きさが変わる
    <font color="#008080" style="font-size:15px" onmouseover="this.style.fontSize='22px';" onmouseout="this.style.fontSize='10'">マウスオーバーで文字の大きさが変わる</font>


    ■マウスオーバーで文字が斜体になる
    <font color="#008080" onmouseover="this.style.fontStyle='italic'" onmouseout="this.style.fontStyle='normal'">マウスオーバーで文字が斜体になる</font>


    ■マウスオーバーで太文字になる
    <font color="#008080" onmouseover="this.style.fontWeight='bolder'" onmouseout="this.style.fontWeight='normal'">マウスオーバーで太文字になる</font>


    ■マウスオーバーで下線等が表示される
    <font color="#008080" onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='overline'">マウスオーバーで下線等が表示される</font>


    ■マウスオーバーで文字に背景色がが表示される
    <font color="#008080" onmouseover="this.style.background='#000080'" onmouseout="this.style.background='#ffff80'">マウスオーバーで文字に背景色がが表示される</font>


    ■マウスオーバーで文字を消す
    <font color="#008080" onmouseover="this.style.visibility='hidden'" onmouseout="this.style.visibility='visible'">マウスオーバーで文字を消す</font>
    Visibility : 表示・非表示の指示
    Visibility Hidden : 非表示
    Visibility Visible : 表示


    ■設定をまとめてみました

    <font color="#008080" 
    	onmouseover="this.color='#ff00ff';
    		this.style.fontSize='30';
    		this.style.fontStyle='italic';
    		this.style.fontWeight='bolder';
    		this.style.textDecoration='underline';
    		this.style.background='#90ee90'" 
    	onmouseout="this.color='#ffffff'">
    <span onmouseover="this.innerText='どうでしょうか???'"
    	onmouseout="this.innerText=' 色々と試してみてください '"> 
    		設定をまとめてみました 
    </span></font>



    [TOP] [戻る]

    Copyright (C) 2006, Etuko Matida all rights reserved.