友からのリクエストで、この辺をちゃんと理解したいとのこと。
オンマウス、マウスオーバーなどといいますが、JavaScriptを使うのはかなり敷居が高いということですね。
まず、同じ縦横サイズの画像を用意し、アメブロにアップします。
画像の縦横サイズは、後で使いますので、メモしておいてください。
画像は、オリジナルで必ず記事に貼ります。
アメブロで画像を貼ると、
<a href="イメージのURL"><img border="0" src="イメージのURL" alt="" /></a>
というようなHTMLタグになっています。
2つの画像を、仮に画像A（マウスを当てる前）、画像B（マウスを当てた後）とする。
まず、これらの画像は、すみやかに切り替わって欲しいので、キャッシュ用にしちゃいましょう。
外側のaタグは要らないので、
<img src="画像AのURL" style="display: none;">
<img src="画像BのURL" style="display: none;">
これで、記事には表示されないが、記事を読んでいる人のパソコンにキャッシュされています。
次は、スタイルシート（CSS）を部分を書きましょう。
<style type="text/css">
a.クラス名
{
display: block;
width: 画像の横幅px;
height: 画像の高さpx;
background-image: url(画像AのURL) !important;
}
a.クラス名:hover
{
background-image: url(画像BのURL) !important;
}
</style>
こんな感じです。
最後に、画像が表示される部分です。
<a href="#" class="クラス名"></a>
こんな感じです。
styleタグのところと、aタグのところの、クラス名は、適当な英文字で統一して下さい。
もし、マウスクリックで何処かへ飛ばしたいなら、aタグのhref=""で指定すればよい。
テスト
これで、解らないところあったら、コメントで質問してね。
↧
CSSとHTMLだけでオンマウスで画像を切り替える
↧