Question

我在MVC 4 Razor显示模板中有一个<img>，当用户将鼠标悬停在图像上时，我想显示一个包含完整尺寸图像的工具提示。

HTML：

<img height="50" width="50" src="@Model.ImageString" />

@Model.ImageString包含一个图像数据字符串，如下所示：

"data:image/*;base64," + Convert.ToBase64String(file.Data)

如果您无法猜测，file.Data是byte[]。

如何在悬停<img>时显示完整尺寸的工具提示？

Answer 1

以下是一个非常简单的示例：http://jsfiddle.net/bGn96/

这与Shan Robertson所暗示的一致。

var $tooltip = $('#fullsize');

$('img').on('mouseenter', function() {
    var img = this,
        $img = $(img),
        offset = $img.offset();

    $tooltip
    .css({
        'top': offset.top,
        'left': offset.left
    })
    .append($img.clone())
    .removeClass('hidden');
});

$tooltip.on('mouseleave', function() {
    $tooltip.empty().addClass('hidden');
});

可在此处找到提供所需功能的库：http://cssglobe.com/lab/tooltip/02/

Answer 2

var Controls = {
init: function () {
    var imgLink = document.getElementById('thumb');

    imgLink.addEventListener('mouseover', Controls.mouseOverListener, false );
    imgLink.addEventListener('mouseout', Controls.mouseOutListener, false );

},

mouseOverListener: function ( event ) {
    Controls.displayTooltip ( this );
},

mouseOutListener: function ( event ) {
    Controls.hideTooltip ( this );
},

displayTooltip: function ( imgLink ) {
    var tooltip = document.createElement ( "div" );
    var fullImg = document.createElement ( "img" );

    fullImg.src = imgLink.src;
    tooltip.appendChild ( fullImg );
    tooltip.className = "imgTooltip";

    tooltip.style.top =  "60px";

    imgLink._tooltip = tooltip;
    Controls._tooltip = tooltip;
    imgLink.parentNode.appendChild ( tooltip );

    imgLink.addEventListener ( "mousemove", Controls.followMouse, false);
},

hideTooltip : function ( imgLink ) {
    imgLink.parentNode.removeChild ( imgLink._tooltip );
    imgLink._tooltip = null;
    Controls._tooltip = null;
},

mouseX: function ( event ) {
    if ( !event ) event = window.event;
    if ( event.pageX ) return event.pageX;
    else if ( event.clientX ) 
        return event.clientX + (document.documentElement.scrollLeft ?
                                document.documentElement.scrollLeft :                 
                                document.body.scrollLeft); 
    else return 0;
},

mouseY: function ( event ) {
    if (!event) event = window.event; 
    if (event.pageY) return event.pageY; 
    else if (event.clientY) 
        return event.clientY + (document.documentElement.scrollTop ?     
                                document.documentElement.scrollTop : 
                                document.body.scrollTop); 
    else return 0;
},

followMouse: function ( event ) {
    var tooltip = Controls._tooltip.style;
    var offX = 15, offY = 15;

    tooltip.left = (parseInt(Controls.mouseX(event))+offX) + 'px';
    tooltip.top = (parseInt(Controls.mouseY(event))+offY) + 'px';
}       
};

Controls.init();

编辑：

小提琴：http://jsfiddle.net/enzoferber/SyJsF/2/

现在工具提示将跟随鼠标。

mouseX（）和mouseY（）将返回当前的[x，y]鼠标坐标。跟随侦听器是使用创建工具提示后附加的'mousemove'事件制作的。

哦，是的，我改变了形象。现在每个人都可以开心....

Answer 3

假设您使用Javascript执行此操作：

在dom中准备好工具提示容器
在悬停时，抓取文件href并在工具提示容器中创建一个新的图像标记。

只需确保不在标记中指定图像尺寸，或者如果确实如此，则显示不是50x50的全尺寸尺寸。

在<img/>悬停时显示完整尺寸的图片？

3 个答案: