プロが教える店舗&オフィスのセキュリティ対策術

現在文字サイズ変更スクリプトを設置しています。
http://insomnia.jp/workshop/fontsize_changer_C/i …
▲スクリプトは上記サイトのものを仕様

「大」「標準」「小」
と画像をつくり、ロールオーバーでマウスオンすると
選択画像に色がつくようにしています。
標準的なロールオーバーと同じく、
マウスアウトすると画像は元にもどります。

参考サイト:http://www.td-holdings.co.jp/
目指しているのは上記サイトの
文字サイズ変更スクリプトです。

現在選択中のフォントサイズが分かるよう、
マウスアウトしても次のクリックがあるまで
ロールオーバー状態を維持したいのです。

「大」を選択中には大に色がつき、
「中」を選択中には中に色がつき
という具合です。

どのような方法がベストでしょうか?
お知恵を拝借ください!宜しくお願いいたします。

A 回答 (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>

補足日時:2007/11/09 16:51
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!