昨日の朝「Twenty Tenのタイトルを超簡単に画像に置き換える方法」という記事を書いたばかりなんですけど、数日前に知ったJavaScriptのjQueryってものを知って（おそっｗ）、面白そうなのでいろいろいじって、またタイトル画像を変えたりして遊んでいました＾＾
タイトル画像を入れ替える方法を何パターンか試してみたんですけど、ふわっとした感じのフェードで入れ替える方法が一番いい感じに思えたので紹介します＾＾
仕組みとやり方
まず、結論からいうと、この方法の仕組みは、画像を入れ替えるというよりは、1枚は普通に画像として置いて、もう1枚はCSSで背景画像として設定し、2枚の画像を重ねて置いた状態にして、普通に置いた上の画像をフェードアウトさせて消し、CSSで設定した背景画像が見えるようにするってだけです。
で、実際のやり方ですが、まず、上になる1つ目の画像はこんな感じで普通に置きます。
[html]<h1 id="site-title">
<a href="https://c713.net/"><img src="/images/anchan_logo_off.jpg" alt="Anchan" width="260" height="75" /></a>
</h1>[/html]
次にCSSで、同じ場所に背景画像をこんな感じで設定します。
[css]#site-title {
width: 260px; /* 画像の横幅 */
height: 75px; /* 画像の高さ */
background-image: url(/images/anchan_logo_on.jpg) ; /* 画像のURL */
display: block;
background-position: left center;
background-repeat: no-repeat;
}[/css]
ここまでできたら、jQueryを使って上になっている画像をフェードアウトさせますが、ヘッダーでjQueryを読み込んでない方は、これをそのままヘッダーに追加してください。
[javascript]<script type=’text/javascript’ src=’https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js’></script>[/javascript]
これを追加する事によって、ｊQueryが動作するようになります。
画像をフェードアウトさせるためのjQueryのJavaScriptは、kojilow Blogさんの「ナビゲーションをフェードで切り替え」という記事で使っているものと同じです。（kojilow Blogさんに感謝です＾＾）
[javascript]<script type="text/javascript">// <![CDATA[
$(function(){ $(‘#site-title img’).hover( function() { $(this).stop().animate({"opacity":0}); }, function() { $(this).stop().animate({"opacity":1}); } ); });
// ]]></script>[/javascript]
これの3行目の部分のカッコの中に、この動作のターゲットとなるものを書きます。
私の場合はid=”site-title”内のimgに対してなので、こういった指定になりました。
これをこのままヘッダーにコピーするか、JavaScriptのファイルとして作って、読み込んでもOKです。
さいごに
これで上になる画像がフェードアウトされて、背景画像とふわっと入れ替わったように見えます。
いろいろと書きましたが、実際にやってみるとそんなに難しくないので、やってみたいなーと思う方は試してみてください＾＾