画像にマウスを乗せたときに、画像が変化!

画像に、マウスポインターを置くと、画像が変わる方法です。

ロールオーバーとか、マウスオーバーとか、言われております。
要するに、画像の上にマウスを置くと、自動的に画像が入れ替わる、動作の事を言います。



イメージ画像が、変化するので、よりイメージされやすく、
クリック率の向上に役立つのではないでしょうか




例えば、この様な感じです。
テスト
リンクなし




だけど、あまり使いすぎると、逆効果になりがちですので
ほどほどががよいです。



で、今回は、JavaScriptを用いた方法になるのですが、
これは、ブラウザ仕様なので、ユーザーの方で、JavaScriptを無効にしてる場合は、
マウスオーバーとして機能しなくなります。



通常の、元の画像のみしか表現しません。



まぁ、ほとんどの方が、有効にしてる方が多いでしょうが
まれに、「動作が重たくなる」、とかの理由で無効にしてる場合もあります。






マウスオーバーを機能させる為には

マウスオーバーにする場合は、

まず、画像を2枚用意します。
元の画像と、マウスポイント時の画像を2枚です。



画像をアップロードできましたら、
以下の、HTMLタグを記述します。

<A href="リンク先のURL"><img src="元の画像" border="0" onMouseOver="this .src='ポイント時の画像'"onMouseOut="this .src='元の画像'"></A>

「リンク先のURL」「元の画像」「ポイント時の画像」は、ご自身の物と置き換えます。
この様な、HTMLタグの記述で、マウスオーバーとして機能します。






QHMのホームページ作成ソフトでは

「おまじない」で、画像にポインターして画像を変化!

上記のHTMLタグでも、もちろんマウスオーバーとして、表現できますが、
QHMでは、「おまじない」を使います。



同じく、画像は2枚用意するのですが、
画像の名前を付ける時に、条件があります。



通常通り、元の画像を、「○○○.jpg」とファイル名を決めたら、
ポイント時の画像の名前も同じにします。



但し、○○○の後に「_onmouse」と付け加えます。
「○○○_onmouse.jpg」となります。



「.jpg、.png、.gif」などの、画像ファイルの(形式)は同じにします。

○○○.jpg
○○○_onmouse.jpg
○○○は、同じ名前にする。


画像を用意できたら、アップロードします。



ページにマウスオーバーする場合は、

通常通り、「入力支援機能」から「リンク」ボタンをクリックして、
リンク先(ページ名, URL)を入力すると・・・・リンクの方法



[[>(ページ名, URL)]]

この様な形になります。



[[ここ> ←カーソルを合わせて、画像を読み込みます。
読み込むのは、元の画像だけです。

例えば、

ファイル名:test.png
画像の説明

ファイル名:test_onmouse
画像の説明

この画像を使って、マウスオーバーにする場合は、
元になる画像、「test.png」を読み込みます。

[[&show(test.png,,画像の説明);>リンク先(ページ名 or URL)]] 
↓↓↓↓↓↓↓
 [[&show(test.png,change,画像の説明);>リンク先(ページ名 or URL)]]


読み込んだ画像に、
「change」を付け加えます。



長々と、説明しましたが、
要するに、QHMの「おまじない」のリンクに、「change」を記述するだけです。

[[&show(test.png,change,画像の説明);>(ページ名 or URL)]]


実際に表示させると
画像の説明
リンク先はTOPページです



この「おまじない」も、JavaScriptを用いた方法になってます。



→ マウスオーバーでリンク画像を半透明にさせる方法