▼ オンマウスで画像変化

オンマウスで画像変化させるには、引き続きonmouseover属性とonmouseove属性。

そして、img src属性を、使うよ。＾＾


この方法を使うと、こんな視覚効果が、得られます。＾＾


ちょっと、↓のイラスト（？）に、矢印を載せてみて。＾＾



HTMLタグは、こうだよ。＾＾

<img src="ここに元の写真のURL" onmouseover="this.src='ここに矢印を載せた時のURL';" onmouseout="this.src='ここに元の写真のURL';">

似顔絵アバターを「2コマ漫画風」にしたりと、「ちょっとした遊び心」を演出したい時に、いいかも？＾＾


●リンクとして使うには？

リンクに使う場合は、
<img src="ここに元の写真のURL" onmouseover="this.src='ここに矢印を載せた時のURL';" onmouseout="this.src='ここに元の写真のURL';">を
<a href="ここにリンク先のURL"></a>で、囲みます。＾＾


こんな感じね。＾＾
<a href="ここにリンク先のURL"><img src="ここに元の写真のURL" onmouseover="this.src='ここに矢印を載せた時のURL';" onmouseout="this.src='ここに元の写真のURL';"></a>


こんな↓ふうに「限られたスペースに、情報を詰め込みたい」という時にも、使えるよ。＾＾




●ランキングボタンに応用する

ちなみに、ランキングボタンに応用すると・・・

↓のような、使い方も、出来ちゃいます♪＾＾




この場合のタグは

<a href="ここにランキングのURL" target="_blank"><img src="ここに常時表示するバナーのURL" onmouseover="this.src='ここに矢印を乗せた時に表示するバナーのURL';" onmouseout="this.src='ここに常時表示するバナーのURL';" width="バナーの横幅" height="バナーの縦幅" border="0" alt="バナーの説明" /></a>


●ランキングバナーを、加工する場合、ランキングサイトの利用規約違反に、ならないの？

にほんブログ村の場合、利用規約には、こう明記されています。

以下、にほんブログ村から、引用。

リンク用バナーを自作したいのですが？

はい、オリジナルバナーをご利用いただけます。
現在、にほんブログ村が用意しているバナーに適当なサイズがない場合、ブログ村が用意しているバナーのデザインや色が気に入らない場合などに既存のバナーを加工して利用したり、独自のバナーを利用することは問題ありません。

（但し、写真そのものやイラスト類そのものに近くバナーとは呼べないようものなど写真などからの
直リンクは禁止させていただきますので予めご了承くださいませ。）
ですが、その際はそのバナーが「ランキング」や「にほんブログ村」、
「参加しているカテゴリー名」、「参加しているサブカテゴリー名」などの文字を含むか、にほんブログ村のランキングのクリック投票用であることを加工した写真類や周辺のテキストにて必ず明示してください。

つまり、にほんブログ村のランキングということを明示して、
クリック投票する方が紛らわしくないようにしてください。

と、明記されています。


この方法は、通常表示時には、「ランキングである事が明確なバナー」を使っています。

矢印に触れた時だけ、「ありがとうバナー」に変化するから、規約違反には、ならないと思います。


・FC2ブログランキングの場合も、同様な感じです。

ただし「ＦＣ2ブログランキングバナーの加工」に対しては、明記されていませんから、新たに同サイズのバナーを作るのが、よいでしょう。

まぁ、「規約に記載されていない＝OK」というわけでもないだろうから、ランキングに応用する時は、自己責任でね♪(´ー`)ノ