2010'03.30.Tue
もうすでに、いつも見に来て頂いている皆さんは、気づかれていると思いますが、
そうです☆ バナー新しくしたんですよ~♪
(各記事のページでしか表示されませんので、最新記事の記事名をクリックするかコメント欄を開いてみてください)
結構、評判が良いので、今日はその作り方というか、オンマウスで切り替わるオリジナルバナーのタグの書き方をご紹介します。

え~、まず、今回作成したバナーは、3つの画像が使われています!
A画像:最初の画像「ハエ穫って~」画像
B画像:マウスを上に持って来た時に切り替わる画像
C画像:クリックした時に出て来る画像

ひとまず、A画像、B画像、C画像としておきます!
その画像をブログにアップロードして、アップロード先のURLをメモしておいてください。

そして、下記のソースをコピーしてください。
赤字、ピンク字を差し替えて、そのままブログにペーストしてください。
<a href="http://cat.blogmura.com/" target="_blank" onmouseover="rollover.src='B画像URL'" onmouseout="rollover.src='A画像URL'" onmousedown="rollover.src='C画像URL'"><img src="A画像URL" name="rollover" border="0"></a>

赤文字のURLは、リンク先のURLです。
(現在は猫ブログのURLになっていますので、お好きなリンク先に差し替えてください。)
ピンクの文字が画像のURLを入れる部分です。
A、B、Cそれぞれに、オリジナル画像のURLを入れると、下記のようなバナーになるはずですよ~☆
う~ん、どうですかね?
結構、分かりやすく書いたつもりなんですが。。。
トップページで表示できないのが難点。。。
各記事のページだと、ちゃんと切り替わるんですがね。。。
やっぱ、javascript書き込んだ方がいいのかしら?
少しでも、お役に立てたようでしたら、下でハエをポチっとお願いします~♪
↓↓

そうです☆ バナー新しくしたんですよ~♪
(各記事のページでしか表示されませんので、最新記事の記事名をクリックするかコメント欄を開いてみてください)
結構、評判が良いので、今日はその作り方というか、オンマウスで切り替わるオリジナルバナーのタグの書き方をご紹介します。

え~、まず、今回作成したバナーは、3つの画像が使われています!
A画像:最初の画像「ハエ穫って~」画像
B画像:マウスを上に持って来た時に切り替わる画像
C画像:クリックした時に出て来る画像

ひとまず、A画像、B画像、C画像としておきます!
その画像をブログにアップロードして、アップロード先のURLをメモしておいてください。

そして、下記のソースをコピーしてください。
赤字、ピンク字を差し替えて、そのままブログにペーストしてください。
<a href="http://cat.blogmura.com/" target="_blank" onmouseover="rollover.src='B画像URL'" onmouseout="rollover.src='A画像URL'" onmousedown="rollover.src='C画像URL'"><img src="A画像URL" name="rollover" border="0"></a>

赤文字のURLは、リンク先のURLです。
(現在は猫ブログのURLになっていますので、お好きなリンク先に差し替えてください。)
ピンクの文字が画像のURLを入れる部分です。
A、B、Cそれぞれに、オリジナル画像のURLを入れると、下記のようなバナーになるはずですよ~☆
う~ん、どうですかね?
結構、分かりやすく書いたつもりなんですが。。。
トップページで表示できないのが難点。。。
各記事のページだと、ちゃんと切り替わるんですがね。。。
やっぱ、javascript書き込んだ方がいいのかしら?
少しでも、お役に立てたようでしたら、下でハエをポチっとお願いします~♪
↓↓

スポンサーサイト
じゃむのアレ
めちゃめちゃ役に立ちますよ~コレ!
次のお休みで
ぜひ制作挑戦したいと思います!
飼い主さん、アリガトー><
2010/03/30(火) 08:39:25 | URL | [ 編集]