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

カテゴリ: JavaScript / 公開日: 2008年5月03日(土曜)02:19 / 投稿者: Tom Goodsun
ひとつ前の記事で公開したロールオーバー用の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必須)。

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