こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

よろしくお願いします。
jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。

別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。(サムネイルには元画像をcssで縮小して表示しています)

やりたいことは以下の2つです。
・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>

投稿日時 - 2012-04-13 21:32:56

QNo.7419465

困ってます

質問者が選んだベストアンサー

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

(全角空白は半角に)
<!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">
<!--
#contents img { width:50px; height:50px; cursor:pointer; }
//-->
</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">
<!--
$(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"));
  });
 });
});
//-->
</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」はフェイクっぽいのでやめた方が良さそう。

投稿日時 - 2012-04-13 23:00:54

補足

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

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

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:44

お礼

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

投稿日時 - 2012-04-16 20:41:14

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

#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">
<!--
#contents img { width:50px; height:50px; }
#photo { width:600px; height:600px; text-align:center; background-color:#ccc; }
//-->
</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">
<!--
$(function(){
 $("#contents img").mouseover(function(){
  var img = $(this);
  var photo = $("#photo img:first-child");
  photo.fadeOut(500, function(){
   photo.attr("src", img.attr("src")).fadeIn(1000).parent().next("span").html(img.attr("title"));
  });
  photo.css("marginTop", (photo.parent().height() - photo.height())/2|0);
 });
});
//-->
</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>

投稿日時 - 2012-04-16 16:17:10

お礼

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

投稿日時 - 2012-04-16 20:41:01

あなたにオススメの質問