jQuery マウスオーバーのたびに処理を繰り返す
よろしくお願いします。
jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。
別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。（サムネイルには元画像をcssで縮小して表示しています）
やりたいことは以下の２つです。
・Div要素には元画像の大きさで表示させたい。
・できれば、フェードイン・アウトで画像を切り替えたい。
色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。
お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。
////スクリプト////
$(function(){
$('#contents li a').click(function(){
return false;
});
$('#contents li a').mouseover(function(){
var $title = $(this).children('img').attr('title');
var w = $(this).children('img').width();
var h = $(this).children('img').height();
$('#photo img').attr('src',$(this).attr("href"));
$('#photo span').text($title);
var mtop = (h/2)*(-1);
var mleft = (w/2)*(-1);
$('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"});
});
});
////HTML////
<div id="contents">
<ul>
<li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li>
<li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li>
<li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li>
</ul>
</div>
<div id="photo">
<img src="1.jpg" />
<span>テキストテキスト</span>
</div>
お礼
お答えありがとうございます＞＜ 図書館！！ 古びた洋書、探してみます！ デジカメで撮ってパソコンに入れて 明るくしてフチを塗りつぶして。 ぐらいのことは出来るので☆ 画像が見つからなければ図書館行ってきますｖｖ