［JS覚書］styleswitcherのボタン画像がリンク切れするので、背景画像とす。

今まで作成した分では、うまくいっていたstyleswitcherが、
構築中のサイトではボタン画像のリンク切れが起こってしまいました。

・ちゃんと見える時と切れている時とがある（法則性不明）
・ボタンの画像リンク先は確実に合っている
・リンク先を相対パスにしても、絶対パスにしても×

元々、ページ内リンク関係のJSが入ってると（URLの最後に#があると）不具合が起こるというのは知ってたので、
こちらを参考にして、リンク先を#からindex.htmlに変えてみたけども、状況変わらず。
今回は色々javascript関係を入れたので、それにひっかかってるのかなぁ。

構築期間が2ヶ月ほどあったので、その間に隙を見て色々やってみたのですが、
ダメだったので、最終的には背景画像として設定しました。
この方がスマートなんだろうけど、なんか悔しい・・・orz

ソース記述をこのように変更（もちろん各ボタンも同様）

?
1
2
3
4
5
6
7
<li id="sizem">
<a href="index.html"
onclick="setActiveStyleSheet('medium');
return false;">
<img src="images/btn_fontsize-m.png" width="33" height="33" alt="文字の大きさを標準にする" />
</a>
</li>

↓　↓　↓

?
1
2
3
4
5
<li id="sizem">
<a href="index.html"
onclick="setActiveStyleSheet('medium');
return false;">文字の大きさを標準にする</a>
</li>

CSSでは画像と大きさを合わせるのと、テキストを飛ばすのが必要ですね。

?
1
2
3
4
5
6
#fontsize dd ul #sizem a {
    width: 33px;
    height:33px;
    background:url(images/custom/btn_fontsize-m.png) no-repeat -74px;
    text-indent:-9999px;
}

他の各々のボタンとa.onpageとhoverも同様の設定としました。

Web制作メモJavascript

Posted by ponnao