現在文字サイズ変更スクリプトを設置しています。
http://insomnia.jp/workshop/fontsize_changer_C/i …
▲スクリプトは上記サイトのものを仕様
「大」「標準」「小」
と画像をつくり、ロールオーバーでマウスオンすると
選択画像に色がつくようにしています。
標準的なロールオーバーと同じく、
マウスアウトすると画像は元にもどります。
参考サイト:http://www.td-holdings.co.jp/
目指しているのは上記サイトの
文字サイズ変更スクリプトです。
現在選択中のフォントサイズが分かるよう、
マウスアウトしても次のクリックがあるまで
ロールオーバー状態を維持したいのです。
「大」を選択中には大に色がつき、
「中」を選択中には中に色がつき
という具合です。
どのような方法がベストでしょうか?
お知恵を拝借ください!宜しくお願いいたします。
No.1ベストアンサー
- 回答日時:
簡単なサンプルを作ってみました。
とりあえず色が違うクラスを2つ作ります。
ロールオーバー状態を維持、と言うよりは、選択したもののクラスを変えています。これを拡張すれば何とでもなるでしょう。
/////////////////サンプル///////////////////
<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の有効、サイズの上限下限の数値範囲
(大だけ2段階大きくなる)など、クリアしたい
ことがあったので、FontSizeArrを削って既存の(http://insomnia.jp/workshop/fontsize_changer_C/i …)
スクリプトにアドバイス頂いた部分を組み合わせてみました。
しかし上手くいきそうでいきませんでした。
onClickに2つのイベントをのせているのが原因でしょうか・・・。
なんとかアドバイスをいただければ大変嬉しいです!
----------------------------------------------------------
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- iPad iPadのメモアプリ 文字が突然大きくなってしまった 3 2022/12/23 23:06
- Excel(エクセル) 余計なお世話的な「入力規則」?対策は? 2 2023/01/14 12:39
- Illustrator(イラストレーター) Illustrator アンカーポイント選択について 3 2023/01/30 12:31
- Windows 10 Windows 10 ノートのディスプレイが暗いです 6 2023/07/16 12:59
- JavaScript jsで診断コンテンツのページ内切り替えについて 1 2023/04/14 17:31
- その他(セキュリティ) 特定のWEBページのフリーズ AMAZONサイト PC側? ネットワーク? サイトに問題? 1 2023/01/30 16:23
- その他(コンピューター・テクノロジー) マウスで文章をドラッグしてコピーする際に、横一列全てが選択されるのですが、 2 2023/06/17 18:05
- Windows 10 Windows11タスクバーやエクスプローラー、スタートメニュー 動画全画面時にカーソルが見えない 1 2022/04/08 00:03
- 一眼レフカメラ 同じレンズなのに、選択できるF値が、焦点距離で変わるのはなぜですか? 標準で選択できる最大F値は22 3 2022/06/02 20:58
- Visual Basic(VBA) Outlook VBAについて 1 2023/07/10 12:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
読み込んだQRコードをフォーム...
-
HTMLタグに複数のクラスを設定...
-
removeEventListenerについて
-
変数名をどのようにつけるのが...
-
jQueryで同じid属性が複数あっ...
-
折りたたみ部分にアンカーでリ...
-
HTMLとJavaScriptで作ったタイ...
-
表示・非表示のスクリプトで、...
-
HTML id名とjavascript変数名
-
テキストボックスに入力された...
-
iframe内のリンクが飛ばないの...
-
<Div>の中の要素の数を調べる
-
javascriptでURLにマウスオーバー
-
VBScriptでXMLのデータを取得す...
-
[急ぎ] videoタグで埋め込んだm...
-
checkboxにチェックを入れると...
-
複数のリンク画像を一定時間で...
-
401エラードキュメントを401.ht...
-
javascriptでオブジェクトの重...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
変数名をどのようにつけるのが...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
読み込んだQRコードをフォーム...
-
javascriptテキストBOX色を元に...
-
iframe内のリンクが飛ばないの...
-
クリックで色変更後に既に変更...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
【HP作成】クリックすると下...
-
jQueryで同じid属性が複数あっ...
-
jqueryを使って無駄なspanタグ...
-
jQueryでクリックされた要素のi...
-
バッチファイルでカウントアッ...
-
[急ぎ] videoタグで埋め込んだm...
-
getElementByIdの戻り値がnull...
-
javascriptでpostした値が取得...
-
jqueryで要素の中身を要素の外...
-
IFRAMEの表示/非表示を切り替え...
おすすめ情報