動的且つ複数のスワップイメージを用意したい場合のjavascript on jquery
お客さんからCGIで一覧表示している写真A、B、Cに
Aに紐付いた写真a1、a2、a3
Bに紐付いた写真b1、b2、b3
と言う風に追加し、さらに
a1をマウスオーバーすると写真Aがa1に変わらないか？
と言うご注文をいただいたので、jqueryプラグイン的な物を作った。
本番環境では、それぞれを外部化して、使う。
もし通りかかったあなたが、これを使用するような事態になってたら、
jqueryに関しては、ご自分でググりやがってくださいませ。
またmainを外枠につけるなどの編集を加える事により
認識するsiblingsの範囲変更ができますので、そちらで一層自由度が変わるかとおもわれます。
js部分--------------------------------------------------------------------------------
<script type="text/javascript" charset="utf-8" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
<!--
$(document).ready( function() {
//各種class、tempタグ設定
var class_main = ".main"; // メイン写真部
var class_sumn = ".sumn"; // サムネイル写真部
var class_temp = "span"; //
$(class_sumn).mouseover( function() {
$(this).siblings(class_temp).text($(this).siblings(class_main).attr("src",replace("_s", ""));
$(this).siblings(class_main).attr("src",this.src);
});
$(class_sumn).mouseout( function() {
var changeSrc = $(this).siblings(class_temp).text();
$(this).siblings(class_main).attr("src", changeSrc);
});
});
// -->
</script>
//js部分--------------------------------------------------------------------------------
css部-----------------------------------------------------------------------------------
<style type="text/css"><!--
.hidden {display:none;}
--></style>
//css-----------------------------------------------------------------------------------
html部----------------------------------------------------------------------------------
<div>
<img class="main" src="winter.jpg" width="480" height="320"/>
<br />
<img class="sumn" src="water_lilies_s.jpg" width="50" height="50"/>
<img class="sumn" src="sunset_s.jpg" width="50" height="50"/>
<img class="sumn" src="blue_hills_s.jpg" width="50" height="50"/>
<span class="hidden">temp</span>
<div/>
<div>
<img class="main" src="01_s.jpg" width="480" height="320"/>
<br />
<img class="sumn" src="02_s.jpg" width="50" height="50"/>
<img class="sumn" src="03_s.jpg" width="50" height="50"/>
<img class="sumn" src="04_s.jpg" width="50" height="50"/>
<span class="hidden">temp</span>
<div/>
//html部--------------------------------------------------------------------------------
