ロールオーバーイメージ用のJavaScriptエンジン Version 2修正点

ひとつ前の記事で公開したロールオーバー用のJavaScriptエンジンですが、少し修正を加えました。
カレントページでの画像反転で、記事の説明では動作しないことがあることです。 ダウンロードファイルは修正してあります。以前のものは削除しました。同じ名前でアップしてありますので、以前の記事からもダウンロードしても問題ありません。
設置方法に変更はありませんが、ロールオーバーイメージ周りのタグの記述方法には少し注意が必要です。

まずそれぞれの画像が同じ構造で記述されていること。
例えば

<ul id="menu">
    <li><a href="#"><img src="/./images/xx1_0.gif" /></a></li>
    <li><a href="#"><img src="/./images/xx2_0.gif" /></a></li>
    <li><a href="#"><img src="/./images/xx3_0.gif" /></a></li>
    <li><a href="#"><img src="/./images/xx4_0.gif" /></a></li>
</ol>

こういう構造ならば一向に問題ありません。リスト系のタグを使う場合が一番安定して動くと思われます。（なぜならそういう前提で作っているから）

問題は次です。説明には「任意のタグ（divタグなど）に任意のID属性・・・」とあります。
例えば以下のような形

<div id="menu">
    <a href="#"><img src="/./images/xx1_0.gif" /></a>
    <a href="#"><img src="/./images/xx2_0.gif" /></a>
    <a href="#"><img src="/./images/xx3_0.gif" /></a>
    <a href="#"><img src="/./images/xx4_0.gif" /></a>
</div>

これには対応していませんでした。なので対応させました。見ると2つの例ともアンカータグの周りはすべて同じ構造になっています。
あまりそれぞれのタグを多くのタグで囲まないでください。最低限必要なのはラッパーのタグ（divやol）、アンカータグ、イメージタグだけです（olやulを使う場合はli必須）。

ということでこれをお使いください。
ダウンロードはこちら

• 前へ
• 次へ