InnerFadeは対象となるブロックの領域を切り替え同様に、バナーを切り替えることもできます。バナーの場合、クリックされたら別のサイトに移動します。InnerFadeでは<li>タグ内に<a>タグでクリック時に移動するサイトのURLを指定するだけです。特に<li>タグでなく、他のタグでも可能です。実際のプログラムはサンプル02になります。

サンプル02の実行結果。バナーが切り替わり、バナークリックで該当するサイトに移動する

サンプル02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>InnerFadeサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/main.css"> 
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.innerfade.js"></script>
        <script type="text/javascript"><!--
            $(function(){
                $("#bannerLink").innerfade();
            });
        // --></script>
    </head>
    <body>
    <h1>InnerFadeサンプル</h1>
        <ul id="bannerLink">
            <li><a href="http://www.openspc2.org/">
                <img src="images/banner1.gif" width="400" height="50" alt="OpenSpace"></a>
            </li>
            <li><a href="http://journal.mycom.co.jp/">
                <img src="images/banner2.gif" width="400" height="50" alt="マイコミジャーナル"></a>
            </li>
        </div>
    </body>
</html>

InnerFadeは<ul>タグに限らず<div>タグなどでも利用できます。サンプル03では<div>タグ内に記述された<p>タグの内容を切り替えて表示させています。

サンプル03の実行結果

次々と表示される文字が切り替わる

サンプル03

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>InnerFadeサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/main.css"> 
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.innerfade.js"></script>
        <script type="text/javascript"><!--
            $(function(){
                $("#textData").innerfade();
            });
        // --></script>
    </head>
    <body>
    <h1>InnerFadeサンプル</h1>
        <div id="textData">
            <p>InnerFadeは・・・</p>
            <p>手軽に画像やテキストを</p>
            <p>フェードイン/フェードアウトさせる</p>
            <p>jQueryのプラグインです</p>
        </div>
    </body>
</html>