jQuery マウスオーバーのたびに処理を繰り返す

解決済

質問者：yama_no_uchi
質問日時：2012/04/13 21:32
回答数：2件

よろしくお願いします。
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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2012/04/13 23:00

条件がいまいちよくわかりませんが、単純にこんなのでは？

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">

</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript">

</script>
</head>
<body>

<ul id="contents">
<li><img src="A.jpg" title="ああああああ" alt=""></li>
<li><img src="B.jpg" title="いいいいいい" alt=""></li>
<li><img src="C.jpg" title="うううううう" alt=""></li>
</ul>

<div id="photo">
<img src="A.jpg" alt="big_image">
<span>テキストテキスト</span>
</div>

</body>
</html>

「cursor:pointer」はフェイクっぽいのでやめた方が良さそう。

この回答への補足

早々にご回答頂きありがとうございます！
お教え頂いたコードでフェードイン・アウトでの画像切替が出来ました！

ただ、画像の上下左右の中央表示についてなのですが、お教え頂いたコードに上下左右中央に表示させるためのスクリプトを追記したところ中央に表示させることはできたのですが、最初に表示していた画像の縦横の比率のまま、全ての画像が表示される症状に悩んでおります。

Div要素「#photo」は正方形のボックス状にしており、縦長・横長の画像問わずDivの中央に画像を表示したいと考えているのですが、マウスを乗せるたびにその画像のサイズを取得して中央に表示することはできるのでしょうか？

重ね重ね恐れ入りますが、差支えなければご教授頂ければ幸いです。

$(function(){
$("#contents img").mouseover(function(){
var img = $(this);
$("#photo img:first-child").fadeOut(500, function(){
$(this).attr("src", img.attr("src")).fadeIn(1000).next("span").html(img.attr("title"));

////追記した部分////
var w = $('#photo img').width();
var h = $('#photo img').height();

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"});
////追記ここまで////
});
});
});

補足日時：2012/04/13 23:49

通報する

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。お教え頂いたコードで上下左右中央に比率を保ちながら表示することが出来ました！
お手数をお掛けしてすみませんでした。
本当にありがとうございました！

通報する

お礼日時：2012/04/16 20:41

No.2

回答者： fujillin
回答日時：2012/04/16 16:17

#1です。

＞最初に表示していた画像の縦横の比率のまま、全ての画像が
＞表示される症状に悩んでおります。
サムネイルのサイズを取得しても、サムネイルのサイズが返されます。（当然ですが）

どのようなHTML構成なのか不明ですが、適当に設定して（前回と異なります）書いてみるなら、
こんな感じでしょうか？（外側のdivを画像がはみ出すことは無いと仮定しています）

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">

</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript">

</script>
</head>
<body>

<ul id="contents">
<li><img src="A.jpg" title="ああああああ" alt=""></li>
<li><img src="B.jpg" title="いいいいいい" alt=""></li>
<li><img src="C.jpg" title="うううううう" alt=""></li>
</ul>

<div>
<div id="photo">
<img src="A.jpg" alt="big_image">
</div>
<span>テキストテキスト</span>
</div>

</body>
</html>