2013年3月4日、ブログは以下のURLに移行しました。最新の記事はこちらで公開しています。
新しいブログでは、コメントやリンクが一部切れていたり、一部機能が調整中です。
新しいブログへ

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

投稿日:2008.05.03 / カテゴリ:JavaScript / 投稿者: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必須)。

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

コメント

まだコメントはありません。
このアイテムは閲覧専用です。コメントの投稿、投票はできません。