q提示 2 和图像

qTip 2 and Images

本文关键字：图像 提示      更新时间：2023-09-26

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

你只需要更改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? */
}
相关文章：