我正在使用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
}
答案 0 :(得分:1)
您只需要更改css文件的max-width
:
.ui-tooltip, .qtip{
max-width: 900px; /* Change this? */
}
请参阅jsfiddle
上的此示例<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'>";
}
}
});
});
});
p {
margin-top: 50px;
margin-left: 100px;
}
img {
padding: 10px;
}
.ui-tooltip, .qtip{
max-width: 10000px; /* Change this? */
}