2

qTip 2を使用してホバーでより大きな画像を表示していますが、半ば機能します。画像は全幅ではなく表示されています。全幅を表示するにはどうすればよいですか？

コード：

HTML

<img src="img.jpg" usemap="#Map" class="center" style="width:900px;" 
border="0" />
<map name="Map" id="Map">
  <area class="1" shape="rect" coords="4,3,225,150" />
</map>

JS

var $j = jQuery.noConflict();
$j('.1').qtip({
   content: '<img src="img1.jpg" width="600"  />',
position: {
  my: 'left top', 
  at: 'right top', 
  target: $j('.1') 
  },
  style: {
  classes: 
  'ui-tooltip-tipsy'
}
});

画像を全幅で表示するにはどうすればよいですか？

このコードを追加しようとしましたが、機能しませんでした。

          tip: {
        width: 600
    }
4

1 に答える 1

1

max-widthcss ファイルのを変更するだけです。

.ui-tooltip, .qtip{
    max-width: 900px; /* Change this? */
}

jsfiddleでこの例を参照してください

HTML:

<p>
<img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=1" data-pic="http://www.dummyimage.com/600x600/4c6aff/000000.png&text=1">
<img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=2" data-pic="http://www.dummyimage.com/300x300/4c6aff/000000.png&text=2">
    <img src="http://www.dummyimage.com/50x50/4c6aff/000000.png&text=3" data-pic="http://www.dummyimage.com/150x150/4c6aff/000000.png&text=3">
</p>

ジャバスクリプト

$(function() {
    $("img").each(function() {
        $(this).qtip({
            content: {
                text: function(api) {
                    return "<img src='" + $(this).attr("data-pic") + "' class='dit'>";
                }
            }
        });
    });
});​

CSS

p {
    margin-top: 50px;
    margin-left: 100px;
}
img {
    padding: 10px;
}
.ui-tooltip, .qtip{
    max-width: 10000px; /* Change this? */
}
于 2012-06-21T18:15:49.120 に答える