リンクボタンの背景と文字色を変える
マウスを乗せると リンクボタンの背景が変わり 文字色も変わります
マウスを離すと又 ボタンの背景画像と背景色と文字色が変わります
下のテキストエリアの内部をクリックで テキストエリアの中のソースを一発でコピーします
クリックした後それをそのままメモ帳等に貼り付け 適当な名前のHTMLで保存して下さい
Mac & Windows NetScapeは反転のみなので Ctrl+Cキーでその後コピーして下さい
このページのソース
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ボタンの背景を変える</title> </head> <body> <!--■body内の表示したい部分に以下のボタン用タグを入れて下さい--> <form> <!--■以下一個目のボタン--> <input type="button" value="トップ" style="width:73;height:60;background:url('wan/image2739.gif') #fff0f1;background-repeat:no-repeat;background-position:center; font-size:16px;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ff0000;" onmouseover="this.style.backgroundImage='url('+'wan/image2757.gif'+')'; this.style.height=73; this.style.color='#006400';" onmouseout="this.style.backgroundImage='url('+'wan/image2720.gif'+')'; this.style.height=60; this.style.color='#3434ff';" onclick="location.href='http://myako.net/';"> <!--■以下二個目のボタン--> <input type="button" value="メニュー" style="width:73;height:60;background:url('wan/image2306.gif') #fff0f1;background-repeat:no-repeat;background-position:center;font-size:16px;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ff00ff;" onmouseover="this.style.backgroundImage='url('+'wan/image2756.gif'+')';this.style.height=73;this.style.color='#ffaa11';" onmouseout="this.style.backgroundImage='url('+'wan/image2308.gif'+')';this.style.height=60;this.style.color='#aa0000';" onclick="location.href='http://myako.net/java/info.html';"> </form> <!--■ここまで入れる--> </p><br> <p> このボタンのタグ</p> <font size="4" color="#006400" face="Tahoma"><b><xmp><form> <input type="button" value="トップ" style="width:73;height:60; background:url('wan/image2739.gif') #fff0f1; background-repeat:no-repeat;background-position:center; font-size:16px;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ff0000;" onmouseover="this.style.backgroundImage='url('+'wan/image2757.gif'+')'; this.style.height=73; this.style.color='#006400';" onmouseout="this.style.backgroundImage='url('+'wan/image2720.gif'+')'; this.style.height=60; this.style.color='#3434ff';" onclick="location.href='http://myako.net/';"> </form></xmp></b></font> <p> ※以下 上記タグの説明 </p> <font color="0000ff">value="TOP"</font><br> <font color="ff0000">■↑一個目のボタンのリンク先名称</font><br><hr> <font color="0000ff">style="width:73;height:60;</font><br> <font color="ff0000">■↑一個目のボタンの横と縦の大きさ</font><br><hr> <font color="0000ff">background:url('wan/image2739.gif') #fff0f1;</font><br> <font color="ff0000">■↑一個目のボタンの最初の背景画像のURL・背景色</font><br><hr> <font color="0000ff">font-size:18px;font-family:HG創英角ﾎﾟｯﾌﾟ体;color:#ff0000;"</font><br> <font color="ff0000">■↑一個目のボタンの最初の文字の大きさ・太さ・文字色</font><br><hr> <font color="0000ff">onmouseover="this.style.backgroundImage='url('+'wan/image2757.gif'+')';</font><br> <font color="ff0000">■↑一個目のボタンのマウスが乗ったときの背景画像のURL</font><br><hr> <font color="0000ff">this.style.height=73;</font><br> <font color="ff0000">■↑一個目のボタンのマウスが乗ったときの縦の大きさ</font><br><hr> <font color="0000ff">this.style.color='#006400';"</font><br> <font color="ff0000">■↑一個目のボタンのマウスが乗ったときの文字色</font><br><hr> <font color="0000ff">onmouseout="this.style.backgroundImage='url('+'wan/image2720.gif'+')';</font><br> <font color="ff0000">■↑一個目のボタンのマウスが離れたときの背景画像のURL</font><br><hr> this.style.height=60;</font><br> <font color="ff0000">■↑一個目のボタンのマウスが離れたときの高さ</font><br><hr> <font color="0000ff">this.style.color='#3434ff';"</font><br> <font color="ff0000">■↑一個目のボタンのマウスが離れたときの文字色</font><br><hr> <font color="0000ff">onclick="location.href='http://myako.net/';"></font><br> <font color="ff0000">■↑一個目のボタンのリンク先URL<br> <br>以下二個目のボタンも同じ<br> 三個目四個目も同じに作れます</font><p> 画像は入っておりません</p> <p>■から書かれているコメントを良く見てからソースを開いて<br> このページのボタン部分を御自分用に書きなおして下さい</p> <p>ボタンフォーム以降の説明部分は そのあと削除して下さい<br> スクリプトご使用の際は以下リンクをお入れください</p> <a href="http://myako.net/" target="_top">Script by ako's cyberpage</a> </body> </html>
画像 by 今日もわんパグ
Script by ako's cyberpage