マウスカーソルを乗せると変化するバナー作ってみた

カイタローです。

マウスカーソルを乗せると変化するバナー作ってみました。

PCではマウスカーソルを乗せると変化します。
スマホ・ガラケー版ではクリックすると変化します。

この方法は「ロールオーバー」と呼ぶようです。

ロールオーバーのHTMLタグは以下です。

<IMG src=”最初に表示される画像のURL” border=0
onMouseOver=this.src=’カーソルを乗せたときの画像のURL’
onMouseOut=this.src=’カーソルを離したときの画像のURL’>

リンクするボタンにするには、<a href=”リンク先のURL”></a> で囲みます。

<a href=”リンク先のURL”>
<IMG src=”最初に表示される画像のURL” border=0
onMouseOver=this.src=’カーソルを乗せたときの画像のURL’
onMouseOut=this.src=’カーソルを離したときの画像のURL’>
</a>

私はブログ村にリンクさせたいのでこうしました。

<a href=”ブログ村URL”>
<IMG src=”最初に表示される画像のURL” width=”???” height=”???” border=0
onMouseOver=this.src=’カーソルを乗せたときの画像のURL(ワードプレスのメディアURL)’
onMouseOut=this.src=’カーソルを離したときの画像のURL(ワードプレスのメディアURL)’>
</a>

※???は画像サイズの数値を入力してください。

チカッバナーやガコッバナーも出来ます。

ただのPUSHボタンバナーではなくPUSHすると+300表示されるバナーとかも作れると思います。
(なんかこれ書きながらいいなと思ったので次作りますw)

もっと面白いアイデアもあると思うので、是非やってみて下さい。

▼ブログ村入口▼

応援クリックありがとうございます!

▼参考にしたサイト
カスタマイズ実験室

シェアする

  • このエントリーをはてなブックマークに追加

フォローする