- ベストアンサー
透明感があって、輝いてる感じのボタンを作りたい
coral_japanの回答
- coral_japan
- ベストアンサー率37% (14/37)
http://www.fmod.jp/sfx/ 参考になるでしょうか。
関連するQ&A
- フォトショップ（CS)でプルンとした感じ
ベベルやエンボス使ってみても、 なかなか思うようなプルンとした感じが出ません・・・ 例えばボタンですと http://lolipop.jp/home/img/btn_home_01_chg.gif こんな感じや テキストですと http://www.7andy.jp/yhs.svl?CID=ESI504&view&image_file=http://img.7andy.jp/bks/images/b8/T0233958.JPG&url_copy_right=&shop_name=e-Shopping!Books この雑誌のロゴみたいな（もっと光が当たってる感じがいいのですが） こんな感じのものを作るコツや tipが載ってるサイトなど、 教えていただけると助かります。 よろしくお願いします・・・☆
- ベストアンサー
- グラフィックソフト
- 【JSP・html・javascript】あるボタンを一定時間無効にする
いつもお世話になっています。 Webアプリケーションの部分修正をしています。 あるボタンを押すと、リロードがかかるまでそのボタンを抑止しているのですが、 10秒間ボタンを無効にする、という処理に変更したいのです。 <img src="/contents/images/no1_small.gif" border="0" width="24" height="22" /> <img src="/contents/images/btn_refresh.gif" border="0" usemap="#temp_map" onMouseDown="if(DClickCheck() == true){ reflesh(); } else { alert('ただいま画面を更新中です。OKボタンを押してしばらくお待ちください'); }" onMouseOut="" onMouseUp="" onMouseOver="this.style.cursor='hand';" /> 現在はこのような感じです。 当方Javaを少しかじったくらいのWeb超初心者です。 まったくわけのわかっていないままの質問をご容赦ください。 よろしくお願いします。
- ベストアンサー
- Java
- onmouseover、onmouseoutの仲間でonmouseclickみたいな
GIFボタン三枚をあらかじめ用意し、 (1) 通常の状態から(btn0.gif)、 (2) マウスが乗るとボタンがテカり(btn1.gif)、 (3) クリックするとボタンがヘコむ(btn2.gif)、 (4) マウスが離れると通常の状態に戻る(btn0.gif)、 のような効果をつけたいと思うのですが (2) ができません。どう書いたらよいでしょうか。 <img src="./btn0.gif" onmouseover="this.src='btn1.gif'" onmouseout="this.src='btn.gif'"> CSSではhoverに相当するものだと思いますが、 思いつきでonmouseclickというのは違うようで。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- スワップイメージ＋ページ内移動（NN4.7）
JavaScriptについて初心者です。どなたか分かる方いましたら、ご教授願います。 【仕様】 ボタンを押下すると、以下の挙動を同時にする。（ボタンは複数） ・同一ページ内の別の画像が切り替わる。 ・同一ページ内の指定した場所へ移動する。 いろいろと調べて以下のようなJavaScriptを作成しました。 <html> <head> <script type="text/javascript"> <!-- function chimg01(){ document.img01.src='images/img01_b.gif' document.location.replace("#a"); } function chimg02(){ document.img01.src='images/img01_c.gif' document.location.replace("#a"); } --> </script> </head> <body> <a name="a"></a> <img src="images/img01_a.gif" alt="あああ" width="400" height="200" name="img01"> --（省略）-- <a href="javascript:chimg01();"><img src="images/btn01.gif" alt="切り替えボタン" name="btn01" border="0"></a> <a href="javascript:chimg02();"><img src="images/btn02.gif" alt="切り替えボタン" name="btn02" border="0"></a> </body> 上記の記述で、IEなどは問題ないのですが、NN4.7の場合、ページをリロードしてしまい、画像の切り替えが効きません。 ブラウザ振り分けで、NN4.7のみ他のjsを読み込むようにした方が良いでしょうか？ その場合の記述方法も分かれば、お願いしますm(-_-)m
- 締切済み
- JavaScript
- どのボタンが押されたかの判定
フォームに複数のSubmitボタンがある場合、飛び先のhtmlファイル ではnameとvalueを使えばどのボタンが押されたか判定できますが、 イメージボタンの場合、valueに設定しておいた文字列が取得できま せん。（valueにはイメージが入っている？） <input type="image" name="DayButton" value="Prev" src="images/prev.gif"> <input type="image" name="DayButton" value="Next" src="images/next.gif"> どのようにすればどのボタンが押されたか判定できますか？
- ベストアンサー
- HTML
- ボタンの非表示
いつもお世話になっております。 OSはWinXPでFlash MXでプログラムしています。 すごく初歩的な質問だと思うのですが、検索できませんでしたので、質問いたします。 フラッシュムービーに幾つかボタンがあり、 A_btnというボタンを押すとB_btnというボタンを非表示にする方法ってありますでしょうか？ C_btnと言うボタンを押した時は非表示にしたくありません。 A_btnに下記のようにしてみました。 on (release) { _root.B_btn._visible = false; } な感じでプログラムを作成してみましたが、だめでした。 分かる方がいましたらご協力お願いします。
- 締切済み
- Flash
- プルダウンボタン実装後ロールオーバーしない親ボタン
お世話になります。 連日CSSとJavaScriptのことで質問させていただいている者です。 皆様のご親切で、すこしずつ理想のCSSを記述することができています、ありがとうございます。 さて、またボタンのドロップダウン機能関連のCSSのことでひとつ疑問が出てきましたので、皆様のお知恵を再度拝借させていただきたく質問させていただきました。 現在添付画像のように、Webサイトのメニューボタンにマウスオンすると下部にダウンメニューが飛び出す仕様を作りたいと考えています。親ボタンはカーソルオンさせるとロールオーバーさせたいと、http://www.kyosuke.jp/yugajs/で配布されているyuga.jsというファイルを利用させていただいております。 ドロップダウンボタンはきちんと表示されるようになったのですが、問題はそのドロップダウンボタン機能を記述した親ボタンのみ、ロールオーバーしなくなってしまいました。他のボタンは通常通りロールオーバーしてくれます。できたら親ボタン、またドロップダウンボタン領域にカーソルオンしている時は親ボタンは常にロールオーバーさせていたいと思っています。そのような仕様にするにはどうしたらいいでしょうか。どうかアドバイスいただけたらうれしいです、よろしくお願いします。 HTML--- <nav id="global_nav"> <ul> <li><a href="index.html"><img src="images/button_top.gif" alt="TOPボタン" class="btn"/></a></li> <li><a href="002.html"><img src="images/button_a.gif" alt="Aボタン" class="btn"/></a> <ul> <li><a href="007.html">サブページ01</a></li> <li><a href="008.html">サブページ02</a></li> <li><a href="009.html">サブページ03</a></li> </ul> </li> <li><a href="003.html"><img src="images/button_b.gif" alt="Bボタン" class="btn"/></a></li> <li><a href="004.html"><img src="images/button_c.gif" alt="Cボタン" class="btn"/></a></li> <li><a href="005.html"><img src="images/button_d.gif" alt="Dボタン" class="btn"/></a></li> <li><a href="006.html"><img src="images/button_e.gif" alt="Eボタン" class="btn"/></a></li> </ul> </nav> CSS--- #global_nav { float:right; width:720px; margin:0; padding-right:15px; } #global_nav img { float:left; display:block; border:0; } #global_nav ul { list-style:none; margin:0; padding:0; } #global_nav li { min-width:120px; white-space:nowrap; float:left; } #global_nav ul ul { display:none; position:absolute; z-index:10; padding-top:52px; } #global_nav ul ul a { display:block; font-family:"ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", sans-serif; font-size:0.75em; color:#FFF; background-image:url(../images/dawnmenu_button.gif); height:25px; width:120px; text-decoration:none; text-align:center; padding-top:5px; } #global_nav ul ul a:hover { background-image:url(../images/dawnmenu_button02.gif); } #global_nav li li { clear:left; position:relative; width:100% } #global_nav ul li:hover > ul { display:block; } Java Script(yuga.js)---(一部抜粋です) $(function() { $.yuga.rollover(); $.yuga.externalLink(); $.yuga.thickbox(); $.yuga.scroll(); $.yuga.tab(); $.yuga.stripe(); $.yuga.css3class(); }); //ロールオーバー rollover: function(options) { var c = $.extend({ hoverSelector: '.btn, .allbtn img', groupSelector: '.btngroup', postfix: '_on' }, options); //ロールオーバーするノードの初期化 var rolloverImgs = $(c.hoverSelector).filter(isNotCurrent); rolloverImgs.each(function(){ this.originalSrc = $(this).attr('src'); this.rolloverSrc = this.originalSrc.replace(new RegExp('('+c.postfix+')?(\.gif|\.jpg|\.png)$'), c.postfix+"$2"); this.rolloverImg = new Image; this.rolloverImg.src = this.rolloverSrc; }); //グループ内のimg要素を指定するセレクタ生成 var groupingImgs = $(c.groupSelector).find('img').filter(isRolloverImg); //通常ロールオーバー rolloverImgs.not(groupingImgs).hover(function(){ $(this).attr('src',this.rolloverSrc); },function(){ $(this).attr('src',this.originalSrc); }); //グループ化されたロールオーバー $(c.groupSelector).hover(function(){ $(this).find('img').filter(isRolloverImg).each(function(){ $(this).attr('src',this.rolloverSrc); }); },function(){ $(this).find('img').filter(isRolloverImg).each(function(){ $(this).attr('src',this.originalSrc); }); }); //フィルタ用function function isNotCurrent(i){ return Boolean(!this.currentSrc); } function isRolloverImg(i){ return Boolean(this.rolloverSrc); }
- ベストアンサー
- CSS
- メニューボタン画像のロールオーバー時の処理について
以下のスクリプトを用いてドロップダウンメガメニューを作成しています。 jQuery MegaMenu Plugin http://www.geektantra.com/2010/05/jquery-megamenu-2/ このメニューのボタンを画像にし、ロールオーバー時には透過して背景が見えるようにしたいと考えています。 --------------------------------------- <script type="text/javascript" src="/_js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/_js/jquery.megamenu.js"></script> <script type="text/javascript"> $(function() { .find('img.btn').hover( function(){ $(this).stop().animate({'opacity' : '0'}, 200); }, function(){ $(this).stop().animate({'opacity' : '1'}, 500); } ); }); </script> <ul id="megamenu"> <li> <a><img src="../_images/btn_01.jpg" alt"ボタン1" class="btn"/></a> <div>コンテンツA</div> </li> <li> <a class="mm-item-link-hover"><img src="../_images/btn_02.jpg" alt"ボタン2" class="btn"/></a> <div>コンテンツB</div> </li>↑※このメニューにロールオーバーしている場合、class="mm-item-link-hover"がaに追加される。 <li> <a><img src="../_images/btn_03.jpg" alt"ボタン3" class="btn"/></a> <div>コンテンツC</div> </li> </ul> ------------------------------------- 上記のように記述して、ボタン画像にロールオーバーするとドロップダウンメニューが出現、さらにそのボタン画像が透過し、背景が見えるようにできました。 しかし、画像からマウスをおろしてドロップダウンメニューに移動すると透過が戻ってしまいます。 jquery.megamenu.jsの処理で、ドロップダウンメニューにロールオーバーしている間、class="mm-item-link-hover"がaに追加されています。 これを利用して、a.mm-item-link-hoverのなかのimg.btnを透過GIFに置き換えたいと思いましたが、うまく行きません。 【追加したスクリプト】 $(function() { $("a.mm-item-link-hover").each(function() { $("img.btn").attr("src", "/img/blank.gif"); }); }); 上記の処理の方法は、考え方としては正しいでしょうか？ また、その場合のスクリプトはどのように書けばよろしいでしょうか？ ご教授頂けると非常に助かります。
- ベストアンサー
- JavaScript
- 外部の画像をボタンとして使用
オンマウスで画像が変わるボタンを作成したいのですが、 使用する画像を外部ファイルにしたところうまく動作しません。 ボタン用のMCを設置し、MCアクションに以下のように記述しましたが 画像は表示されませんでした。 onClipEvent (load) { filename = "images/button.gif"; loadMovie(filename,this); } どこをどう直せば画像を読み込めるようになりますか？ ※FLASH CS3 / AS2.0です ※画像のパスは正しい事を確認しています。
- ベストアンサー
- Flash
- AS3.0でボタン処理をまとめて書くには？
はじめまして。当方、最近プログラム的なものを始めたばかりで困っています。 例えばルートにbtn0,btn1,btn2という3つのムービークリップを置いたとして、 ボタンを押したらそれぞれのムービークリップ名をトレースするには、 AS2.0以前ではルートのフレームアクションで for (var i=0;i<3;i++){ _root.["btn" + i].onRelease = function{ trace(this._name); } } といった感じでforループでまとめられると思うのですが、 3.0ではどうしたらよいのか見当もつかず困っています。 for (var i=0; i<3; i++) { ["btn"+i]addEventListener(MouseEvent.CLICK,over); } このようにまとめてリスナーに登録したとしても、 リスナー関数が別になってしまうので、this.nameは使えず…はて。といったところです。 なにとぞご教示よろしくお願い申し上げます。
- ベストアンサー
- Flash
お礼
photoshopのネタ本をわざわざ買わなくてもネット上にいろいろあるんですね。 しっかり勉強させていただこうと思います。 ありがとうございました！