q提示2和图像

时间:2012-06-21 05:22:25

标签: javascript jquery image qtip qtip2

我正在使用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
    }

1 个答案:

答案 0 :(得分:1)

您只需要更改css文件的max-width

.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>

JAVASCRIPT

$(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? */
}