fold.js 修正版 動作サンプル

月別

• 2005-03
• 2005-02
• 2005-01
• 2004-12
• 2004-11

HTML

HTML部は従来通りの書き方です。

1. <dl class="arc">
2. <dt title="過去ログ">月別</dt>
3. <dd class="js_open">
4. <ul>
5. <li><a href="#" title="リンクはダミーです">2005-03</a></li>
6. <li><a href="#" title="リンクはダミーです">2005-02</a></li>
7. <li><a href="#" title="リンクはダミーです">2005-01</a></li>
8. <li><a href="#" title="リンクはダミーです">2004-12</a></li>
9. <li><a href="#" title="リンクはダミーです">2004-11</a></li>
10. </ul>
11. </dd>
12. </dl>

CSS

トグルスイッチが割り当てられた要素に、マウスポインタが乗った時は.js_mouse_on、ポインタが離れている時は.js_mouse_outのclassNameが設定されます。管理画面のCSS編集欄に以下のように追記してください。オンオフで文字サイズを変化させることなども可能です。

1. .js_mouse_on {
2. background-image: url(マウスオンで表示したい画像のアドレス);
3. background-repeat: no-repeat; /* お好みで */
4. background-position: 0 0;  /* お好みで */
5. }
6.  
7. .js_mouse_out {
8. background-image: url(マウスアウトで表示したい画像のアドレス); /* または none; */
9. background-repeat: no-repeat;
10. background-position: 0 0;
11. }

background-image: none;とすると背景画像は消えます。