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

　状態:不明　閲覧数:6,648 　投稿日: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/5/06 4:49 更新

順位

ページタイトル抜粋

％

2026/5/06 4:49 更新

順位	ページタイトル抜粋	アクセス数
1	CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ \| CSS	11
2	RGBの種類／ビットカラー \| RGB(色)	7
3	ログイン	5
3	Material Design 2014 年 \| Material Design(色)	5
4	Illustratorでaiファイルを保存する際、下位バージョンでも開けるよう保存する \| Illustrator CS3(Illustrator)	4
4	RGB ⇔ Lab \| 色変換(色)	4
5	aタグのクリック範囲を、囲っているタグ範囲まで拡大する \| CSS	3
5	「東京都」のカラーコード取得は難しい \| カラーコード(色)	3
5	Design 0	3
5	画像縦横比の問題 \| 画像	3
5	キャラクター無料作成ジェネレーター／ FLASH ／オンラインサービス \| イラスト参考(デザイン)	3
6	上記とは異なるアプローチの仕方	2
6	好きな色は群青色	2
6	スキップリンク \| アクセシビリティ(UI)	2
6	RGB \| 色	2
6	問題発生／方法は2種類／ CSS対応時の注意点	2
6	「属性」「プロパティ」「アトリビュート」の違い \| CSS	2
6	謎の現象／「Photoshop CS」と「Photoshop CCでは」では扱いが異なる／「PhotoShop CS3」で「Camera Raw 4.0」を起動するには？	2
6	SVG(画像) カテゴリー	2
6	#0000CDは群青色ではない？ \| 色	2
	2026/5/5 5:44 更新

順位

ページタイトル抜粋

アクセス数