マウスオーバーで画像を切り替える(FC2)

マウスオーバーとは、Webブラウザ画面で、マウスカーソルをテキストや画像などの上に重ねると何らかの処理(画像やテキストの切替など)を行うことで、カーソルを離すと元の状態に戻るようなことです。 

マウスオーバーに似た表現で「オンマウス」、「ロールオーバー」、「ホバー」と同じ意味で使われる言葉があります。厳密には、「マウスオーバー」、「オンマウス」、「ホバー」はマウスカーソルを何かに重ねる状態で、「ロールオーバー」は切り替わる動作を指します。

マウスオーバーで画像を切り替える方法は何通りかあるようですが、その中一番簡単のは、HTMLの属性変更(imgの「onmouseout属性」と「onmouseover属性」)によって切り替える方法です。

通常、編集画面で画像を張り付けると下記のように記述されます。
<img src="画像1のURL" alt="画像1のタイトル">

マウスオーバーで画像を切り替えるするには
下記のように記述します。
20161009_001.png
<img src="画像1のURL" alt="切り替える画像"
onmouseover="this.src='画像2のURL'" 
onmouseout="this.src='画像1のURL'">

下記は、サンプルです。
マウスオーバー時に、別の画像が表示します。
マウスオーバーで画像を切り替える(FC2) 

基本動作について、普段は「画像1」を表示、マウスオンになら「画像2」を表示、マウスアウトになれば「画像1」に戻ります。

次回は、CSSとJavascriptを利用する方法を紹介します。


関連記事
スポンサーサイト

コメントの投稿

非公開コメント

検索フォーム
最新記事
カテゴリ
スポンサーリンク
RSSリンクの表示
プロフィール

実録FX

Author:実録FX
多通貨・複数時間足を分散することで、相場の流れに対し有利な自動売買EAの構築を目指しております。

基本的なトレード手法はスイングのトレンドフォローです。相場強弱、エントリータイミング、ロスカット、エグジットのトレード精度向上を目指します。取引事績や基礎知識などを随時更新していきますので宜しくお願いいたします。

「相互リンク」、大歓迎です。同ジャンルであれば基本的に、リンクを断ることはありませんので、貴ブログに当ブログのリンクを設置後でも、ご連絡いただければ当ブログで貴ブログのリンクを追加させていただきます。

投資につきましては、各自のご判断で行って頂きますようお願い致します。当ブログで提供している情報は、投資を勧誘する目的で提供しているものではありません。一切責任を負いませんのでご了承ください。

当ブログの詳細は以下の通りです。
・ブログ名:必勝の方程式 「トレードの真実」
・URL:http://thrustbands.blog.fc2.com/
お時間のある方はぜひご覧ください。

カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
月別アーカイブ
経済指標
最新コメント

Top