- ベストアンサー
カーソルを重ねたときのボタン
<input Style="background-color:#00ff00; color:#ffffff; border-style:solid; border-color:#ffffff; border-width:0 2;" type="button" value="メルマガ" onclick="javascript:window.location.href='URL'" title="ボタンです。クリックしてね"> ■デザイン「ボタン」の作り方を知りましまた。^^ でも、カーソルを乗せたただけでは、なにも変わらないので、 「ポタン」なのかどうか、文中などにあると、「ボタン」だと気がつきにくいです。 質問です。 デザイン「ボタン」の場合に、カーソルを乗せた(重ねた)とき、なんでもいいのですが、背景でも、文字でもいいのですが、「色」変わりませんか? やり方がありましたら教えてください。お願いいたます。 (ちなみに、今は、title="ボタンです。クリックしてね の方法くらいしか思いつかないのですが、これ以外で。。。)
- sakura5678
- お礼率90% (67/74)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
onmouseoverでカーソルをのせた処理をかき、onmouseoutで戻すと よいでしょう <input type="button" onmouseover="this.style.color='red';this.style.backgroundColor='blue';" onmouseout="this.style.color='white';this.style.backgroundColor='lime';" Style="background-color:lime; color:white; border-style:solid; border-color:#ffffff; border-width:0 2;" value="メルマガ" onclick="javascript:window.location.href='URL'" title="ボタンです。クリックしてね">
その他の回答 (1)
- k17s
- ベストアンサー率47% (9/19)
<input Style="background-color:#00ff00; color:#ffffff; border-style:solid; border-color:#ffffff; border-width:0 2;" type="button" value="メルマガ"onmouseout="this.style.backgroundColor='#00ff00';" onmouseover="this.style.backgroundColor='#000000';" onclick="javascript:window.location.href='URL'" title="ボタンです。クリックしてね"> こんな感じにJavascriptでスタイルを変えてあげるのはどうでしょう？
お礼
Σ(・ω・ノ)ノ！ ハヤッ！ できました。(^^)/ どうもありかとうございました。。。<(_ _)>
関連するQ&A
- リンクにカーソルを合わせてもカーソルが変化しません
ＨＰを作成しているのですが、メニューを作成していて、メニューにカーソルを合わせてもpointer(手のマーク)にならず、テキストのときに出るIに似たアイコンのままになってしまいます。(リンクは問題なく飛べるのですが、分かりづらいです) メニューのボタンは素材屋さんのサイトにかいてあったソースをいただきましたので画像ではなく、全てソースから出来ています。 いろいろ調べて実践したのですがなかなかカーソルが変わりません＞＜ どうしたら変わりますか？ちなみにメニューのソースは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title>メニュー</title> </head> <p align="center"> <button style="BORDER-LEFT-COLOR: #ff80c0; BACKGROUND: #ffffff; BORDER-BOTTOM-COLOR: #ff80c0; WIDTH: 97px; BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: #ff80c0; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; HEIGHT: 52px; BORDER-RIGHT-COLOR: #ff80c0; BORDER-BOTTOM-STYLE: solid; type: " onclick="window.open('top_page.html','トップページ','')" button?><span style="FONT-SIZE: 23px; FILTER: dropshadow(color=#ffd5d5,offX =5,offY=5); WIDTH: 90px; COLOR: #74faf3; LINE-HEIGHT: 2; FONT-FAMILY: HGP創英角ポップ体; HEIGHT: 46px"> <p align="center">TOP</p> <p align="center"> </p></span></button> </a> <font size="5"><strong><em><font size="5"><strong><em><u></u></em></strong></font></em></strong></font></p> </body> </html> です。途中にある「トップページ」というのはtarget先です。 どなたか分かる人お願いします！！
- ベストアンサー
- その他([技術者向] コンピューター)
- カーソル当てると説明文出るようにしたいんです。
CSSで今ＨＰ作っています。 カーソルを当てると説明文が出るようにしたいのですが どういうタグをCSSで作ったら良いか分かりません。 <alt="○○">や<title="○○">で出るような窓ではなく 自分で[好きな背景色]にしたり出来る説明窓を作りたいのです。 例えば http://myako.net/linkjs.html ここのようにしたいのです。 あるＨＰのソースを見たら <span id="txt1" style="display:none;position:absolute; border:3px solid #006633;color:#ffffff;background-color:#000000;">○○</span> となっていたのですがこれを記入しても文字が出てきませんでした。 何をどう記入し作ったら良いのか分からないので 作成法を教えてください。 または方法を教えてくれているサイトがありましたらを教えてください。
- ベストアンサー
- ブログ
- ホームページビルダーでテーブルタグにスタイルを個別に適用すると
ホームページビルダーでテーブルタグに個別にスタイルを適用すると、 <TABLE style="border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #ff6633 #ff6633 #ff6633 #ff6633;" bgcolor="#ffffff"> と長くなってしまいます、 <TABLE style="border-width : 1px;border-style : solid;border-color : #ff6633;" bgcolor="#ffffff"> このように（これで、正解なのかわかりませんが）、省略しては駄目なのでしょか？ 教えて下さい、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- 外部スタイルシートへの記入方法について
外部スタイルシートへの記入方法について 下記ボックスを利用したいのですが 外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。 どなたか詳しい方にご教授願えないでしょうか、 よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と 本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。
- ベストアンサー
- CSS
- NN4.78で動きません・表示されません
こんにちは、二つ質問させて下さい。 色々探してみたのですが、原因がわかりません。 １）<INPUT TYPE="button" value="クリック" onClick="klicken('hyouzi')" tabindex=1 style="color:#000000;border:solid 1px #ffffff;background:#ffffff"> <input type="button" value="閉じる" onClick="window.close()" tabindex=1> この二つがNN4.78で表示されません。とほほさんで調べたらNN4でも動作するようなんですが・・・何が間違っているのでしょうか？ ２）innerHTML内で改行をしたいのですが、できないでしょうか？ どちらかでもご存知の方いらっしゃいましたら教えて下さい、お願いします。
- ベストアンサー
- JavaScript
- ボタンリンクタグができない
<form action="アドレス" target="_top"><input type="button" value="拍手ボタン" style="color:FFFFFF;background-color:FF6600;border-top:1px solid white;border-bottom:2px solid FFFF00;border-left:1px solid white;border-right:2px solid FFFF00;"></form> これでやっているのですが、 ボタンの形はできたのですがリンクはならないんです。 何故でしょうか？
- ベストアンサー
- その他（インターネット・Webサービス）
- お気に入りを追加ボタンをつけたのですが(absolute)
家庭向け＞ブログで質問して回答がなかったのでコチラで質問します。 ブログでお気に入りに追加ボタンをCSSのabsolute指定で つけたのですが、なぜか画面の一番左下に表示されてしまいます。 ブログでなく自作のホームページだとうまくいきます。 CSSは .oki { top:40px; left:500px; position:absolute; } htmlのbody内に追加 <div class="oki"><input type="button" value="お気に入りに追加" onclick="javascript:window.external.AddFavorite('http://xxxxx.xxxxx.xxx/','サイト名')" style="border-style:solid; border-width:2px; border-color:#66CCFF; background:blue; font-size:10pt; color:#ffffff" /></div> どうして正しく表示されないのでしょうか？
- ベストアンサー
- HTML
- 「カーソル当てると説明が出る方法」
<ait>や<title>でなく カーソルを当てると自分の好きな「背景色や枠色」で 説明文が出るようにしたいのですが中々うまくいきません。 そこで、あるサイトの方のソースを見て そのままタイトルや説明文章を変えてみたら表示できました。 －<a href="○○.html" onmouseover="txt1.style.display='block'" onmouseout="txt1.style.display='none'">○○タイトル</a> <span id="txt1" style="display:none;position:absolute; border:3px solid #006633;color:#ffffff;background-color:#000000;">○○説明</span> ここにあろ<span id="txt1>という物が何か分かりません。 自分でＣＳＳで<txt1>を作らないといけないでしょうか？ もし.txt1 を作るなら何を記入すれば良いのですか？ またこのまま、この方のソースをコピペして使った場合 もしこの方がサイトを閉鎖しても 僕がコピペした部分はそのまま生きていますでしょうか？ もし手直し等必要ならどうか教えてください。 このままで良いのか手直しがいるのかが分かりません。
- 締切済み
- ブログ
- 無駄なところ省いてほしいです。
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> <!-- BODY{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; } TD{ font-size : 10pt; } a.menu:link { color: #FFFFFF; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FF99CC; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; display: block; height: 25px; } a.menu:visited { color: #FFFFFF; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FF99CC; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; display: block; height: 25px; } a.menu:hover { color: #666666; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FFFFFF; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : ridge ridge ridge ridge; border-color : #FFFFFF #FFFFFF #FFFFFF #FFFFFF; display: block; height: 25px; } a.menu:active { color: #666666; font-weight : bold; font-family: 'Comic Sans MS'; text-decoration: none; background-color: #FFFFFF; padding: 5px 15px 5px 15px; border-width : 1px 1px 1px 1px; border-style : groove groove groove groove; border-color : #FFFFFF #FFFFFF #FFFFFF #FFFFFF; display: block; height: 25px; } .pagetitle{ color : #FF6699; padding-bottom : 5px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : #FF6699; } .sub1{ color : #FFFFFF; border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; background-color : #FF99CC; } .log{ border-width : 1px 1px 1px 1px; border-style : solid solid solid solid; border-color : #666666 #666666 #666666 #666666; background-color: #FFFFFF; } HR{ color : #999999; height: 1px; } --> </style> </head> <body bgcolor="#ffffff" background="./top_img/1155290302.gif" text="#666666" link="#666666" vlink="#666666" alink="#666666"> <center> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; FONT-FAMILY: 'Comic Sans MS'" cellspacing="3" cellpadding="0" width="166"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="#666666">Top</font></td> </tr> <tr> <td><a class="menu" href="">Profile</a></td> </tr> <tr> <td><a class="menu" href="">Diary</a></td> </tr> <tr> <td><a class="menu" href="">BBS</a></td> </tr> <tr> <td><a class="menu" href="">Chat</a></td> </tr> <tr> <td><a class="menu" href="">Room</a></td> </tr> <tr> <td><a class="menu" href="">Album</a></td> </tr> <tr> <td><a class="menu" href="">Freepage-1</a></td> </tr> <tr> <td><a class="menu" href="">Freepage-2</a></td> </tr> <tr> <td><a class="menu" href="">Freepage-3</a></td> </tr> <tr> <td><a class="menu" href="">Link</a></td> </tr> <tr> <td><a class="menu" href="">Mailbox</a></td> </tr> </table> </center> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- クリックカウント プログラムについて
教えてください。 javascriptで以下のような、お気に入り追加のプログラムがあります。 -------------------------------------------------------------- <input type="button" value="お気に入りに追加 !" onclick="javascript:window.external.AddFavorite('http://okwave.jp/','OKwave')" style="border-style:solid; border-width:2px; border-color:#808080; background:#EFEFEF; font-size:10pt; color:#808080"> ------------------------------------------------------------- このお気に入りに追加ボタンをクリックした回数をカウントしたいのですが、どのようなプログラムを組めばよいのでしょうか？ プログラムに関してはあまり詳しい方ではありません。 簡単にできる方法はないでしょうか？
- 締切済み
- JavaScript
お礼
Σ(・ω・ノ)ノ！ ハヤッ！ できました。(^^)/ どうもありかとうございました。。。<(_ _)>