0

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

HTML：

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

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

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

如果你猜不出来，file.Data是一个byte[]。

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

4

3 回答 3

3

这是一个非常简单的示例：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/

于 2013-08-12T21:56:14.467 回答
3 
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”事件创建的。

哦，是的，我改变了图像。现在每个人都可以快乐....

于 2013-08-12T21:59:45.350 回答
1

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

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

只需确保不要在标签中指定图片尺寸，或者如果你这样做了，则显示完整尺寸而不是 50x50。

于 2013-08-12T21:41:14.130 回答