- ベストアンサー
【ロールオーバー】次にクリックされるまで選択を維持
- 現在文字サイズ変更スクリプトを設置しています。標準的なロールオーバーと同じく、マウスアウトすると画像は元にもどります。
- 目指しているのは上記サイトの文字サイズ変更スクリプトです。現在選択中のフォントサイズが分かるよう、マウスアウトしても次のクリックがあるまでロールオーバー状態を維持したいのです。
- どのような方法がベストでしょうか？お知恵を拝借ください！
- 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>
補足
早速お答え頂きありがとうございました。 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>