javascript - Display full sized image on <img> hover? - Stack Overflow

admin管理员组

文章数量:1356383

I have an <img> in an MVC 4 Razor Display Template, and I'd like to display a tooltip containing the full sized image when the user hovers over the image.

HTML:

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

@Model.ImageString contains an image data string, which looks like this:

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

If you couldn't guess, file.Data is a byte[].

How can I display a full-sized tooltip upon hovering the <img>?

I have an <img> in an MVC 4 Razor Display Template, and I'd like to display a tooltip containing the full sized image when the user hovers over the image.

HTML:

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

@Model.ImageString contains an image data string, which looks like this:

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

If you couldn't guess, file.Data is a byte[].

How can I display a full-sized tooltip upon hovering the <img>?

• javascript
• jquery
• html
• image
• asp-mvc-4

Share Improve this question Follow asked Aug 12, 2013 at 21:35 keeehlankeeehlan 8,0641616 gold badges5959 silver badges105105 bronze badges 1

• Google "display image on rollover" and you'll be presented with numbers of ways of doing it. – Terry Commented Aug 12, 2013 at 21:52

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Here is a very quick example: http://jsfiddle/bGn96/

This is along the lines of what Shan Robertson is suggesting.

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');
});

A library that provides the desired functionality can be found here: http://cssglobe./lab/tooltip/02/

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();

EDIT:

Fiddle: http://jsfiddle/enzoferber/SyJsF/2/

Now the tooltip will follow the mouse.

mouseX() and mouseY() will return the current [x,y] mouse coords. And the follow listener is made with the 'mousemove' event that is attached after the tooltip is created.

Oh, and yeah, I changed the image. Now everyone can be happy....

Assuming you are using Javascript to do this:

• Have a tooltip container ready in the dom
• on hover, grab the file href and make a new image tag inside of the tooltip container.

Just make sure to not specify the image dimensions in the tag, or if you do, display the fullsize dimensions not 50x50.

本文标签： javascriptDisplay full sized image on ltimggt hoverStack Overflow