2005年8月 5日 12:18
タグ:
アイコン,
ブログパーツ,
メロメロパーク
このページのソースに、間違いがありました。すみません。
<img src="meroccio10.gif" onmouseover="this.src='meroccio11.gif'" onmouseout="this.src='meroccio12.gif'" width="40" height="31" alt="メロッチョ" />
赤字の部分が、抜けている所がありました(メロッチョとモフモフ)。
お手数ですが、確認していただけると嬉しいです。
(ぱんだこさん、ありがとうございます~。 9/9修正)
■ ロールオーバーのアイコン単体
| | | |
表示 (マウスを乗せてみると) | = 通常時 | + マウスオーバー | + マウスアウト |
画像は2つ or 3つ必要になります。
それぞれ、サーバーにアップしてアドレスを控えてください。
そして、次のようなソースを、表示箇所に貼り付けます。
<img src="meroccio10.gif" onmouseover="this.src='meroccio11.gif'" onmouseout="this.src='meroccio12.gif'" width="40" height="31" alt="メロッチョ" />
src="meroccio10.gif"
:通常時の画像アドレス
onmouseover="this.src='meroccio11.gif'"
:マウスオーバー(マウスを画像に載せたとき)の画像アドレス
onmouseout="this.src='meroccio12.gif'"
:マウスアウト(マウスを画像から外したとき)の画像アドレス
alt="メロッチョ"
:自分のメロの名前などに変えたり。
■ ロールオーバーのアイコン + 背景
150*55の背景画像の場合は、この記事の一番最後も見てください。
ここでは、divで囲み、その背景に画像を指定しています。
<div style="background:url(m_bg01.gif) no-repeat center;width:140px;padding:9px 0px 5px;margin:5px auto;text-align:center;">
<img src="meroccio10.gif" onmouseover="this.src='meroccio11.gif'" onmouseout="this.src='meroccio12.gif'" width="40" height="31" alt="メロッチョ" /><img src="merolin10.gif" onmouseover="this.src='merolin11.gif'" onmouseout="this.src='merolin12.gif'" width="40" height="31" alt="メロリン" /><img src="mofmof10.gif" onmouseover="this.src='mofmof11.gif'" onmouseout="this.src='mofmof12.gif'" width="40" height="31" alt="モフモフ" /></div>
m_bg01.gif
:背景画像のアドレス
padding:9px 0px 5px
:画像上と下のスペース。この画像では、この数値で。
margin:5px auto
:divの周りとのスペース。上下に5px、左右にはセンタリング(IE以外?)
text-align:center
:画像のセンタリング。
灰色部分に、ロールオーバーのアイコン単体のタグ。
■ その他
※ もし、アイコンにリンクを貼る場合は、border=0を足すと周りに線が出なくなります。
<img src="meroccio10.gif" onmouseover="this.src='meroccio11.gif'" onmouseout="this.src='meroccio12.gif'" width="40" height="31" alt="メロッチョ" border=0 />
※ アイコンの下に、隙間ができてしまうのは、<img>と<img>の間で改行(\n)がある為のようです。
(追記)
改行していなくても、隙間が空いてしまう場合は、以下のようなpadding値にしてみてください;
<div style="background:url(m_bg01.gif) no-repeat center;width:140px;padding:10px 0px 2px;margin:5px auto;text-align:center;">
<img src="meroccio10.gif" onmouseover="this.src='meroccio11.gif'" onmouseout="this.src='meroccio12.gif'" width="40" height="31" alt="メロッチョ" /><img src="merolin10.gif" onmouseover="this.src='merolin11.gif'" onmouseout="this.src='merolin12.gif'" width="40" height="31" alt="メロリン" /><img src="mofmof10.gif" onmouseover="this.src='mofmof11.gif'" onmouseout="this.src='mofmof12.gif'" width="40" height="31" alt="モフモフ" /></div>
(さらに追記 H19.5.17)
150*55背景を使用する場合は、widthやpaddingの値が変わります~。
<div style="background:url(m_bg01.gif) no-repeat center;width:150px;padding:14px 0px 10px;margin:5px auto;text-align:center;">
<img src="meroccio10.gif" onmouseover="this.src='meroccio11.gif'" onmouseout="this.src='meroccio12.gif'" width="40" height="31" alt="メロッチョ" /><img src="merolin10.gif" onmouseover="this.src='merolin11.gif'" onmouseout="this.src='merolin12.gif'" width="40" height="31" alt="メロリン" /><img src="mofmof10.gif" onmouseover="this.src='mofmof11.gif'" onmouseout="this.src='mofmof12.gif'" width="40" height="31" alt="モフモフ" /></div>
2005年8月 5日 10:48
タグ:
アイコン,
ブログパーツ,
メロメロパーク
ダウンロードされる方は、画像についてをお読みの上でどうぞ~。
■ メロメロパークアイコン
■ プチメロアイコン
■ その他
□ RSS
□ 雑多
■ ロールオーバー + 背景
各アイコンは、それぞれ3つの画像からなっています。
「もうちょっと丁寧(?)な解説」「背景付きのソース」はこちらをどぞ。
<img src="meroccio10.gif" onmouseover="this.src='meroccio11.gif'" onmouseout="this.src='meroccio12.gif'" width="40" height="31" alt="メロッチョ" />
<img src="merolin10.gif" onmouseover="this.src='merolin11.gif'" onmouseout="this.src='merolin12.gif'" width="40" height="31" alt="メロリン" />
<img src="mofmof10.gif" onmouseover="this.src='mofmof11.gif'" onmouseout="this.src='mofmof12.gif'" width="40" height="31" alt="モフモフ" />
<img src="peace10.gif" onmouseover="this.src='peace11.gif'" onmouseout="this.src='peace12.gif'" width="40" height="31" alt="モフモフ" />
■ 背景画像
□ 140*45
□ 150*55(以前の背景画像から差し替える場合は、この記事の一番最後を参照)