【ロールオーバー】次にクリックされるまで選択を維持
- 現在文字サイズ変更スクリプトを設置しています。標準的なロールオーバーと同じく、マウスアウトすると画像は元にもどります。
- 目指しているのは上記サイトの文字サイズ変更スクリプトです。現在選択中のフォントサイズが分かるよう、マウスアウトしても次のクリックがあるまでロールオーバー状態を維持したいのです。
- どのような方法がベストでしょうか？お知恵を拝借ください！
- ベストアンサー
【ロールオーバー】次にクリックされるまで選択を維持
現在文字サイズ変更スクリプトを設置しています。 http://insomnia.jp/workshop/fontsize_changer_C/index.html ▲スクリプトは上記サイトのものを仕様 「大」「標準」「小」 と画像をつくり、ロールオーバーでマウスオンすると 選択画像に色がつくようにしています。 標準的なロールオーバーと同じく、 マウスアウトすると画像は元にもどります。 参考サイト：http://www.td-holdings.co.jp/ 目指しているのは上記サイトの 文字サイズ変更スクリプトです。 現在選択中のフォントサイズが分かるよう、 マウスアウトしても次のクリックがあるまで ロールオーバー状態を維持したいのです。 「大」を選択中には大に色がつき、 「中」を選択中には中に色がつき という具合です。 どのような方法がベストでしょうか？ お知恵を拝借ください！宜しくお願いいたします。
- rollbahn
- お礼率37% (6/16)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
簡単なサンプルを作ってみました。 とりあえず色が違うクラスを２つ作ります。 ロールオーバー状態を維持、と言うよりは、選択したもののクラスを変えています。これを拡張すれば何とでもなるでしょう。 /////////////////サンプル/////////////////// <html> <head> <style type="text/css"> .blue { background-color: blue; color:white;} .white { background-color: white; color:blue;} </style> <script type="text/javascript"> var SpanArr = ["S","M","L"];//変化させる ID の配列 var FontSizeArr = ["11px","13px","15px"]; var SelectId ; function setBlue ( id ){ document.getElementById(id).className = "blue"; } function setWhite ( id ){ if(SelectId != id ) document.getElementById(id).className = "white"; } function selectSize( id ){ for(var i=0;i<SpanArr.length;i++){ if( SpanArr[i] == id ){ SelectId=id; document.getElementById(SpanArr[i] ).className = "blue"; document.getElementsByTagName("body").item(0).style.fontSize = FontSizeArr[i]; }else{ document.getElementById(SpanArr[i] ).className = "white"; } } } </script> </head> <body> <span class="white" onclick="selectSize( 'S' );" onmouseover=" setBlue( 'S' );" onmouseout="setWhite( 'S' );" id="S">小</span> <span class="white" onclick="selectSize( 'M' );" onmouseover="setBlue( 'M' );" onmouseout="setWhite( 'M' );" id="M">中</span> <span class="white" onclick="selectSize( 'L' );" onmouseover="setBlue( 'L' );" onmouseout="setWhite( 'L' );" id="L">大</span> </body> </html>
関連するQ&A
- フラッシュ＞＞action script ボタンロールオーバーで、他のmcの画像がさしかわる方法
すみません、大変困っています。 いま、action script2.0で Aというボタンをロールオーバーした際に、他のmcの画像がさしかわるスクリプトがわかりませんで困っています。 ソフトは、flash CS3で、scriptは2.0です 細かく説明しますと A:ボタン B：鳥の画像 C:シマウマの画像 1.ボタンAをマウスオーバー 2.鳥がシマウマに変わる 3.ボタンAをロールアウトすると元のBに戻る 大変恐縮ですが、わかるかたがいらっしゃれば教えてください。 よろしくお願いいたします。
- 締切済み
- Flash
- 文字のロールオーバーについて教えてください。
HPを作製しているのですが、リンクを張った文字にロールオーバーをつけたくて、スタイルシートで、やってみたのですが、そうすると画像を張ったリンクにマウスを持ってきても周りの色が四角に、指定した色に変わってしまいます。（画像は、楕円形のボタンです） 文字のみロールオーバーをつけたい場合はどうしたらいいのか教えてください。
- ベストアンサー
- HTML
- 単純にロールオーバーはどうしたら出来ますか？
Flashど素人で御座います。 色々と調べて見たのですが、どうにも解決方法を見つけることが出来ず質問をさせてください。 高度なものを取り入れようといったものではないのですが、いわゆるロールオーバーの方法を教えていただきたく思います。よく、メニューなどで、マウスが重なるとそのメニュー画像が別の色のものに変わるといったものがありますが、こちらを実現したく思います。 初心者なので、根本的な部分が把握できていないということもあり、出来ればかなり度素人目線でご説明頂けると幸いです。 まず、現状でのメニューはMacromedia Flash 8を使って作成し、取りあえずロールオーバーする前の状態のものは出来ております。 これが出来ている状態で、寸分の狂いも無く色違いの画像がマウスが重なった際に変化する様にするにはどうしたらよいのでしょうか？ 出来れば、ロールオーバーする際の色違いメニューの作成方法から、その画像の設定方法、またレイヤー？などを使用する際には、合わせてお伺い出来たらと思います。 とても初歩的なご質問で申し訳御座いませんが、どなたかご存知の方いらっしゃいましたら何卒宜しくお願いいたします。
- ベストアンサー
- Flash
- マーキーでロールオーバー
マーキータグで画像を左右に動かし、そこにロールオーバーでリンクを貼ろうとしています。 マーキーで動いていてもマウスを合わせロールオーバーさせると、画像をその場に止められる方法というのはありますか？ 更に、マウスをはなすと再びそこから左右に動き出すようにしたいのですが・・・。 何か良い方法があったら是非教えて下さい。
- ベストアンサー
- HTML
- ロールオーバーを機能させるには？
はじめまして。よろしくお願いします。 フォトショップでロールオーバーの画像を作ったのですが、ｈｔｍｌに取り込みサイト上で機能させるにはどうしたらよいのでしょうか？ サイト作るのが初めてで、市販の参考書を片手にロールオーバーの画像までは作る事ができるのですがソレから先に進む事ガできず困ってます。 すみませんが、よろしくお願いします。
- ベストアンサー
- グラフィックソフト
- ＦＷ ロールオーバーボタンの作り方
ＦＷでＨＰを作成していますが、マウスの上に置いたらボタンの 色が変わるというロールオーバーを作りたいと思っています。 まず、作り方からおしえてください。 一つのボタンを作ったので、そこから保存方法によって マウスオーバーのボタンが作れないでしょうか？
- 締切済み
- Windows XP
- yuga.jsを使うとロールオーバー画像が表示されない
お世話になっております。質問させてください。 現在メニューの画像をyuga.jsに入っていないスクリプトで ロールオーバーさせているのですが、 ある1ページにだけ yuga.js関係のスクリプトを使用した所、 そのページのメニュータイトル画像だけが 表示されなくなってしまいました。 （マウスを載せるとロールオーバー後の画像は出てくるのですが） http://www.geocities.jp/meguri_mizu/test/pc/2008.html ↑こんな感じです…。左上の「役に立つパソコン」の部分です。 firefoxだとずっとマウスオーバーした時の画像が表示されたままになってしまいます。 yuga.jsでできる、名前に_onをつけてのロールオーバーにしても やっぱり自ページのメニューだけがうまく表示されません。 なぜなのでしょうか…？ スクリプトが読めないのでどう直していいのか全然わかりません；； よろしければご教授ください。お願いします…。
- ベストアンサー
- JavaScript
- 画像のロールオーバー
Dreamweaver8のビヘイビアのスワップイメージを使って 画像のロールオーバーを再現したいのですが 思い通りにいきません。 実装したいこと ---------------------------------------------------- 画像Ａをマウスオーバーで画像Ｂに変わる クリックでオーバーした状態を保持（画像Ｂのまま） さらに、画像Ｃをマウスオーバーで画像Ｄに変わり クリックでオーバーした状態を保持（画像Ｄのまま） そのクリック時、画像Ｂが画像Ａに変わる ---------------------------------------------------- http://h2ham.up.seesaa.net/html/bgimage-change03.html の上の画像のような感じです。 これを実装を助けて頂きたいです。 スクリプトが書けず、Dreamweaverのビヘイビアしか 対応できない為、詳しく解説いただけたら嬉しいです。 もしくは参考サイト、サンプルソースなどありましたら 助かります。 よろしくお願いします。
- ベストアンサー
- JavaScript
- WordPressで画像のロールオーバーをさせたい
WordPressのブログや固定ページの記事の中で、 ２枚の画像を使って、画像のロールオーバー（マウスオーバー）をさせたいのですが、 やりかたがわかりません。 Java Scriptではなく、CSSで行いたく思い、 検索していろんなサイトに行きましたがうまくできませんでした。 もし可能であれば、単純にこれをコピーしたらできる というＣＳＳをご提示していただけないでしょうか。
- 締切済み
- HTML
- ActionScript～ロールオーバー～について
http://www.francfranc.com/ 上記URLにて使われております、 FLASH部分について教えてください。 私、初心者の予想では、Action Scriptでかかれていると思うのですが、 実際どのようにしたら、FLASHでロールオーバーしたときに 画像を置き換えることが出来るでしょうか？ Action Scriptも知識が全然ありませんので、 サンプルコードなど教えていただけたら、幸いです。 どうぞ宜しく御願い致します。
- ベストアンサー
- Flash
補足
早速お答え頂きありがとうございました。 IDで制御すればよかったのですね～！！感動です。 Cookieの有効、サイズの上限下限の数値範囲 （大だけ２段階大きくなる）など、クリアしたい ことがあったので、FontSizeArrを削って既存の（http://insomnia.jp/workshop/fontsize_changer_C/index.html） スクリプトにアドバイス頂いた部分を組み合わせてみました。 しかし上手くいきそうでいきませんでした。 onClickに２つのイベントをのせているのが原因でしょうか・・・。 なんとかアドバイスをいただければ大変嬉しいです！ ---------------------------------------------------------- var SpanArr = ["S","M","L"];//変化させる ID の配列 var SelectId ; function setBlue ( id ){ document.getElementById(id).className = "blue"; } function setWhite ( id ){ if(SelectId != id ) document.getElementById(id).className = "white"; } function selectSize( id ){ for(var i=0;i<SpanArr.length;i++){ if( SpanArr[i] == id ){ SelectId=id; document.getElementById(SpanArr[i] ).className = "blue"; }else{ document.getElementById(SpanArr[i] ).className = "white"; } } } ---------------------------------------------------------- <span onClick="fsc('larger');selectSize( 'L' );" onKeyPress="fsc('larger');" onMouseOver="setBlue( 'L' );" onMouseOut="setWhite( 'L' );" id="L" class="white">大きく</span> <span onClick="fsc('default');selectSize( 'M' );" onKeyPress="fsc('default');" onMouseOver="setBlue( 'M' );" onMouseOut="setWhite( 'M' );" id="M" class="white">標準</span> <span onClick="fsc('smaller');selectSize( 'S' );" onKeyPress="fsc('smaller');" onMouseOver="setBlue( 'S' );" onMouseOut="setWhite( 'S' );" id="S" class="white">小さく</span>