タイトルだけでは分かりにくいですが、ECサイトの詳細画面などでよくあるタイプのものです。
いつもの様に勉強がてら作ってみましたが、意外と使えるのではなかろうかと思っています。
そういうわけで、何らかの商品管理画面を作った際には楽に使えるよう、久しぶりにプラグイン化もしてみました。
そんな感じで、今回もスクリプトを晒してみたいと思います。

サムネイル画像をマウスオーバーするとメイン画像が入れ替わるスクリプト

動作のイメージ

画像の命名規則

画像ファイル名はメイン画像用は

filename1.jpg
filename2.jpg

とし、サムネイル画像は

filename1_thumb.jpg
filename2_thumb.jpg

という感じの命名規則を設けています。
「_thumb」部分は、プラグイン版では変更できるようにしています。

スクリプトコード

HTML

ではHTMLから。
[html]

---

サムネイルにマウスカーソルを合わせると画像が入れ替わります

[/html]

メイン画像を置き、罫線に下に、サムネイル画像を置いているだけです。
メイン画像のクラスを「mainImage」、サムネイル画像のクラス名を「thumb」とします。

CSS

お次はCSS。
[css]
.mainImage{
border: 2px solid #333;
}

.thumb{
border: 2px solid #333;
}
[/css]

CSSは、メインイメージ、サムネイルのボーダーを書いているだけです。
カーソルが乗った時に、ボーダー色を変更させています。

JS

ではメインのスクリプトです。
[js]
$(function() {
$('img.thumb').mouseover(function(){
// "_thumb"を削った画像ファイル名を取得
var selectedSrc = $(this).attr('src').replace(/^(.+)_thumb(\.gif|\.jpg|\.png+)$/, "$1"+"$2");

// 画像入れ替え
$('img.mainImage').stop().fadeOut(50,
function(){
$('img.mainImage').attr('src', selectedSrc);
$('img.mainImage').stop().fadeIn(200);
}
);
// サムネイルの枠を変更
$(this).css({"border":"2px solid #ff5a71"});
});

// マウスアウトでサムネイル枠もとに戻す
$('img.thumb').mouseout(function(){
$(this).css({"border":""});
});
});
[/js]

4行目でサムネイルのファイル名から、メイン画像のファイル名を取得し、
7行目からフェードインしながら、入れ替える画像を表示。
14行目で、カーソルが乗っているサムネイルの枠を #333 から #ff5a71 に変更。
18行目から、マウスアウトした際にサムネイルの枠色を元の黒に戻しています。

デモ

プラグイン版

上記スクリプトをプラグインとしてみました。設定は以下の様な感じで。
HTMLの記述例です。

[html]



[/html]

メイン画像、サムネイル画像のクラス名（セレクタ名）サムネイルの枠設定などが変更できます。
アニメーション時間を両方共「0」とすると、パラパラと切り替わります。

ダウンロード

右クリックの「対象をファイルに保存」などで保存してください。

• バージョン1 ダウンロード（jquery.tgImageChange.js）
• バージョン2 ダウンロード（jquery.tgImageChangeV2.js）

2013.08.21 追記

うふふ さんコメント用

デモ

デモはこちらから（index3.html が別ウィンドウで開きます）

スクリプト

[html]

サムネイルのマウスオーバーでメイン画像を切り替える

テキストを表示します

灰皿の画像

ライター

サボテン！

にーちゃん

月と城

---

サムネイルにマウスカーソルを合わせると画像が入れ替わります

[/html]

2014.04.12 追記

04 さんコメント用

デモ

デモはこちらから（index4.html が別ウィンドウで開きます）

スクリプト

[html]

サムネイルのマウスオーバーでメイン画像を切り替える

---

サムネイルにマウスカーソルを合わせると画像が入れ替わります

[/html]

2014.05.13追記

Satoさんコメント用

デモ

デモはこちらから（index5.html が別ウィンドウで開きます）

Satoさんのコメントを受け、こそっとバージョンバップ版を作成しました。
関連付けを明示的に行うことにより、同画面に複数個の表示を可能にしています。
詳細はデモ画面、デモ画面のソースを確認して下さい。

ダウンロード

右クリックの「対象をファイルに保存」などで保存してください。
ダウンロード（jquery.tgImageChangeV2.js）

2014.05.20追記

デモ

デモはこちらから（index6.html が別ウィンドウで開きます）

バージョン2に、メッセージ機能(3行)を追加してみました。バージョンは2.1です。
スクリプトのオプションを1つ追加しています。
メッセージも画像同様、同画面に複数の設置が可能となっています。
詳しくはデモのソース、スクリプトのソースを確認で。

ダウンロード

右クリックの「対象をファイルに保存」などで保存してください。
ダウンロード（jquery.tgImageChangeV2.1.js）

-Javascript,jQuery
-WEB制作, サムネイル, プラグイン, マウスオーバー, 画像入れ替え