ロールオーバーイメージ用のJavaScriptエンジン Version 2修正点
ひとつ前の記事で公開したロールオーバー用のJavaScriptエンジンですが、少し修正を加えました。
カレントページでの画像反転で、記事の説明では動作しないことがあることです。
カレントページでの画像反転で、記事の説明では動作しないことがあることです。
ダウンロードファイルは修正してあります。以前のものは削除しました。同じ名前でアップしてありますので、以前の記事からもダウンロードしても問題ありません。
設置方法に変更はありませんが、ロールオーバーイメージ周りのタグの記述方法には少し注意が必要です。
まずそれぞれの画像が同じ構造で記述されていること。
例えば
こういう構造ならば一向に問題ありません。リスト系のタグを使う場合が一番安定して動くと思われます。(なぜならそういう前提で作っているから)
問題は次です。説明には「任意のタグ(divタグなど)に任意のID属性・・・」とあります。
例えば以下のような形
これには対応していませんでした。なので対応させました。見ると2つの例ともアンカータグの周りはすべて同じ構造になっています。
あまりそれぞれのタグを多くのタグで囲まないでください。最低限必要なのはラッパーのタグ(divやol)、アンカータグ、イメージタグだけです(olやulを使う場合はli必須)。
ということでこれをお使いください。
ダウンロードはこちら
設置方法に変更はありませんが、ロールオーバーイメージ周りのタグの記述方法には少し注意が必要です。
まずそれぞれの画像が同じ構造で記述されていること。
例えば
<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必須)。
ということでこれをお使いください。
ダウンロードはこちら
コメント