画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウ

画像にエリア指定をしてマウスオーバーすると画像が変わり、さらにそのマウスオーバーがフェードで切り替わるということはできないでしょうか？

画像にエリア指定をしてマウスオーバーすると画像が変わるということはできたのですが
その画像の切り替えをフェードでできないでしょうか
問題のコードです
<script>function over(num){
document.getElementById("mg").src="site02/ex/ex_top03"+num+".jpg"
}
function out(){
document.getElementById("mg").src="site02/ex/ex_top03.jpg"
}
</script>

<div id="main_content_ex">
<img id="mg" src="site02/ex/ex_top03.jpg" usemap="#hisigata" border="0" />
<map name ="hisigata">
<area shape="rect" coords="10,498,149,532" href="site02/lightbox/ex.htm" onmouseover="over(1)" onmouseout="out()">
<area shape="rect" coords="582,468,790,496" onmouseover="over(2)" onmouseout="out()">
<area shape="rect" coords="800,465,932,493" onmouseover="over(3)" onmouseout="out()"></div>


jQueryなどのフェードのエフェクトを使用しようかとも思ったのですが、javascriptでmouseOverの画像を指定しているためどう書いていいかわからなくなってしまいました

こういう質問のしかたで大変恐縮なのですが
誰かご教授願えないでしょうか？？
scriptもjQueryも基本を理解できておらず、大変困っています。

大変申し訳ありませんが、お願いいたします。

No.1 ベストアンサー 回答者： yyr446 回答日時： 2010/09/17 16:10

別に、フェードのところだけjQuery使えばよいと思いますけど、全部jQueryで

書きなおしても手間かからないと思うけど、作ってみたぞい。
<script type="text/javascript">
var fadein = function (node,interval){
　this.counter = 0;
　this.target = node;
　this.interval = interval;
　this.timerId = setInterval((function(that){
　 return function(){that.loop();};
　})(this),this.interval);
　this.stop = function () {
　 this.timerId && clearInterval(this.timerId);
　 this.timerId = null;
　};
　this.loop = function(){
　 //this.target.style.width=this.counter+"px";
　 //this.target.style.height=this.counter+"px";
　 this.target.style.opacity = this.counter / 100;
　 this.target.style.filter = "alpha(opacity=" + this.counter + ")";
　 if( ++this.counter>100) this.stop();
　};
};

var fadeout = function (node,interval){
　this.counter = 100;
　this.target = node;
　this.interval = interval;
　this.timerId = setInterval((function(that){
　 return function(){that.loop();};
　})(this),this.interval);
　this.stop = function () {
　 this.timerId && clearInterval(this.timerId);
　 this.timerId = null;
　};
　this.loop = function(){
　 //this.target.style.width=this.counter+"px";
　 //this.target.style.height=this.counter+"px";
　 this.target.style.opacity = this.counter / 100;
　 this.target.style.filter = "alpha(opacity=" + this.counter + ")";
　 if( --this.counter<0) this.stop();
　};
};

function over(num){
　var target=document.getElementById("mg");
　target.src="site02/ex/ex_top03"+num+".jpg"
　fadein(target,20);
}
function out(){
　var target=document.getElementById("mg");
　target.src="site02/ex/ex_top03.jpg"
　fadeout(target,20);
}
</script>

どうせ、他人が作ったのを張り付けるだけなら、jQuery使うのとかわらんぞ
特に、私なんぞのコード使うぐらいなら、jQueryの方がよほど確かだ。

この回答へのお礼

ありがとうございます

私用でネットの繋がらない環境にいたためお礼が遅くなって申しわけありません

本当にありがとうございます

お礼日時：2010/09/21 11:41