マウスオーバーで画像変更スクリプト

　状態:不明　閲覧数:6,669 　投稿日:2009-04-10 　更新日:2015-08-17

マウスオーバーで画像変更スクリプト
・Javascriptを使用することで「画像にマウスポインターを乗せて画像を変更する」ことが可能

<img alt="Sample" width="100" height="100" src="元画像URL" 

onmouseover="this.src='変更画像URL';" onmouseout="this.src='元画像URL'>

■参考url
http://www.animegif.net/tips/javascript/onmouseover.html

順位	ページタイトル抜粋	％
1	マウスオーバーで画像変更スクリプト	88
2	マウスオーバーで「リンク画像」拡大表示をCSSで実装	50
3	CSSで画像をロールオーバー	39
4	画面幅に応じて取得ディレクトリパスを変更したい	35
5	スキップリンク	33
6	自分の環境でスプライト画像を作成したい	33
7	画像補正プライベート運用ルール	31
8	画像編集系ソフトウェアの分類。ラスタ、ベクタだけではなく	31
9	リストタグではない、リスト内画像の縦位置調整	31
10	スマートフォン対応	31
11	モバイルデザイン9 ／トップページリスト表示	30
12	画像の上にテキスト表示	29
13	「マウスオーバー」「ロールオーバー」「ホバー」の違い	28
14	YouTube動画のフルスリーンキャプチャ画像を取得	28
15	画像背景色を透明化するオンラインサービス	27
16	CSSのみで交互色 … リスト	25
17	ライセンス変更	25
18	デスクトップにChromeのショートカットを作成	24
19	ブラウザ一覧(公式サイトリンク)	24
20	キャラクター無料作成ソフトウェア	24
	2026/6/05 4:07 更新

順位

ページタイトル抜粋

％

2026/6/05 4:07 更新

順位	ページタイトル抜粋	アクセス数
1	RGBの種類／ビットカラー \| RGB(色)	5
2	「属性」「プロパティ」「アトリビュート」の違い \| CSS	4
2	キャラクター無料作成ジェネレーター／ FLASH ／オンラインサービス \| イラスト参考(デザイン)	4
3	RGB → HSL \| 色変換(色)	2
3	鉄道会社毎のカラーコード \| カラーコード(色)	2
3	ログイン	2
3	「max-width:100%;」は原寸画像幅までしか拡大しない／「width:100%;」は要素幅まで拡大する	2
3	画像縦横比の問題 \| 画像	2
3	「要素{position:absolute;}親要素{position:absolute;}」と「要素{position:absolute;}親要素{position:relative;}」の違い \| position(CSS)	2
3	レスポンシブカテゴリー	2
3	CMY	2
3	CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ \| CSS	2
3	全体基準となるhtmlタグへのfont-size指定案	2
3	「東京都」のカラーコード取得は難しい \| カラーコード(色)	2
4	P46	1
4	HSV → RGB 計算方式の違い \| 色変換(色)	1
4	正規表現　2つのキャプチャ	1
4	SCSSは良いことばかりではないかも \| SCSS(CSS拡張メタ言語)	1
4	色空間／表色系／顕色系／混色系	1
4	「Bootstrapデザイン」✕「グラフ」 \| 2系(Bootstrap)	1
	2026/6/4 5:05 更新

順位

ページタイトル抜粋

アクセス数