オープンソース JavaScript:SmartRolloverを公開


　トップページ　→　アンカーラボ　→　オープンソース - JavaScript:SmartRollover

アンカーラボ オープンソース

アンカーラボ（アンカー研究室）

(オープンソース) JavaScript: SmartRollover

ロールオーバーさせたいファイル名末尾を「_0.gif」「_1.gif」とする事で、面倒なonmouseover/onmouseout属性を記述なしに画像をロールオーバーさせる事が出来ます。
さらにロールオーバー時の画像をプリロードさせます。

また、ロールオーバーさせたいメニューが外部ファイルになっている場合にも、自動で現在のページに対応しているボタンをオン状態にする事も可能です。
※対応するclass名の画像をオン状態にすることも可能です。

SmartRollover設置例
button_img_0.gif　→　button_img_1.gif
ロールオーバー画像
  • ロード設定
    <body onload="smartRollover('_0','_1');">
  • 拡張子を除いたファイル名の末尾が一致する場合のみ適用されます。
    <img src="image/button_img_0.gif">
設置方法
下記のコードを適切な部分に貼り付けてご利用ください。
※下記の例はJavaScriptファイルの場所がhtmlファイルと同階層の場合です。
※重要な部分は赤文字になっています。
下記のファイルを右クリックから保存でダウンロードしてください。

[ソースコード：smartrollover-1.2.2.js]

<!-- <head>～に記述</head> -->
<script type="text/javascript" src="smartrollover.js"></script>
<!-- <head>～に記述</head> -->

<body onload="smartRollover('_0','_1');">

<!-- <body>～</body> -->
<img src="image/button_img_0.gif">
<!-- <body>～</body> -->
改版履歴
Ver.1.2.2
[Mod] img要素にclass属性が無い場合にエラーが起きるバグを修正
Ver.1.2.1
[Add] 指定のクラス名のみ画像がonになる機能を追加しました
[Add] 親要素がAの場合に、現在のuriとhrefの内容を比較し、同じなら自動でonになる機能を追加しました
Ver.1.1.1
[Mod] マウスアウト時の画像が全て同じになるバグを修正
Ver.1.1.0
[Add] ロールオーバー対象ファイル名のSuffixを指定可能にしました
Ver.1.0.0
お問い合せ
バグ・要望のご連絡はこちらへお願い致します。
email：labo@anchor-gr.jp
また、設置方法のアドバイスや設置代行作業(有料)も行っております。お気軽にお問い合せ下さい。

SmartRolloverスクリプト仕様

smartRollover(mouseout, mouseover, classname)
ファイル名末尾がmouseoutに一致した場合に実行します。
通常時ファイル=○○○_0.gif　置き換えファイル=○○○_1.gif
※○○○は同名である必要があります。
※「_0」「_1」はロード時に変更する事が可能です。例）「_out」「_on」など
※拡張子はjpg,jpeg,gif,pngに対応しています。
※classnameを指定した場合、対応する画像はデフォルトでmouseoverの画像が表示されます。
パラメータ値 デフォルト値 備考
mouseout "_0" 省略可。通常時の拡張子を除いたファイル名末尾。
例）_out
mouseover "_1" 省略可。マウスが乗った場合の拡張子を除いたファイル名末尾。
例）_on
classname "" 省略可。マウスが乗った状態にする画像のclass名。
例) button1
smartRolloverA(mouseout, mouseover)
ファイル名末尾がmouseoutに一致した場合に実行します。
ロールオーバー画像の親要素がAの場合に、現在のuriとhref属性の値を確認し自動でマウスオーバー時の画像を表示します
※href属性とuriが必ず一致する保証はありませんので、
　必ず使用するページで動作確認してください。
パラメータ値 デフォルト値 備考
mouseout "_0" 省略可。通常時の拡張子を除いたファイル名末尾。
例）_out
mouseover "_1" 省略可。マウスが乗った場合の拡張子を除いたファイル名末尾。
例）_on

ご利用条件

  1. アンカーラボで公開している全ては、通常、商用利用をお断りしておりますが、オープンソースの表示がある場合はこの限りではありません。どなたでも自由にご利用が可能です。
    ※ホームページ制作会社(ホームページ制作関連の業者・デザイン会社含む)が自社のページに設置する場合に限り商用ページに設置が可能です
  2. 弊社トップページへのリンクをして頂きます。設置箇所付近又は、設置ページのCopyright付近に目立たないよう小さくでも結構です。
    <a href="http://www.anchor-gr.jp/" title="オープンソース アンカーラボ">Powered by アンカーグループ</a>
    表示例）→ Powered by アンカーグループ
  3. アクセス数があまりにも多い場合は、一時的に制限させて頂く場合がございます。
    ※常時負荷が大きい場合はご相談させて頂きます
  4. 電源メンテナンス・セキュリティアップデート等でサーバを再起動する場合、一時的にアクセスが出来なくなる事があります。
    ※通常3分以内で完了します。長時間のダウンタイムが発生する場合のみ当ホームページで告知致します。
  • 仙台のホームページ制作・WEBシステム開発会社
  • 仙台でホームページ制作なら022-342-1556
  • ホームページ作成、WEB制作は
    仙台市のアンカー！
  • お問合せフォーム
  • EVSSL
  • 無料お見積フォーム
  • ホームページ制作、開発
  • 仙台市内|名取|岩沼|白石
    亘理|大河原|角田|仙南|仙北
    宮城県内お伺い致します。

営業カレンダー

※赤文字は定休日です

2025年10月
日月火水木金土
1234
567891011
12131415161718
19202122232425
262728293031
2025年11月
日月火水木金土
1
2345678
9101112131415
16171819202122
23242526272829
30