マウスカーソルオンで画像を変化させる方法 - MT-t サポート

ＨＯＭＥ > 記事の編集方法 > マウスカーソルオンで画像を変化させる方法

マウスカーソルオンで画像を変化させる方法

2013年07月14日

マウスカーソルが画像に重なったときに画像を変化させる方法は？
ロールオーバーとも呼ばれます。

それでは設定方法です。

設定方法（１）異なる画像に変化

画像（.jpg .gif .png）のファイル名に対して、「_o」を付けた同じサイズの画像を用意してください。

例１：
aaa.jpg
aaa_o.jpg

例２：
bbb.gif
bbb_o.gif

例３：
ccc.png
ccc_o.png

通常のファイル名に対して、
カーソルオン時に表示される画像は　末尾に「_o」がついたものになります。

画像の準備が出来ましたら、
２つの画像を同じ領域にアップロードし、
以下のように記述します。

class="img_o"　により、カーソルオン時に　aaa_o.jpg　に変化するようになります。

↓（仕様変更しました。2015-05-06）

上記のように
onmouseout="this.src='button01'" onmouseover="this.src='button01_o'"
と記述を加えてください。

設定方法（２）半透明にする

以下のように DIV ボックスに　class="img-o" を入れると、
ボックス内の画像が全て　カーソルオン時に透明度 70％になります。

単純に画像を変化させるだけであれば（２）の方法が簡単です。
（１）の方法は、凝ったデザインにできますが２つの画像を用意する必要があります。

どちらの方法も、
以下のように imgタグにリンクを貼ってクリックボタンを変化させる使い方が一般的です。

回答は２営業日以内にメールでさしあげます。もし回答が届かない場合はメールが迷惑ボックスに入っているか、何らかの原因で受信できていない可能性があります。その際はお手数ですが再度ご相談フォームよりご入力ください。

よりスムースなサポートのために下記のアプリのインストールをお願いします。
Screen Capture (by Google)
Chromeの右上にアイコンが表示されます。そこから簡単に画面撮影でき、画像として保存することが可能です。ご相談の際、画面の画像を添付していただけると助かります。（詳しい使い方はこちら）

４ファイル以上添付したい方はこちらをお読みください。