Question

My current code pops up an image when I mouseover a link.

I want to add functionality that in addition to the image, a text description is also in the popup.

In addition, I also want an ‘X’ close button on the popup window that will close the popup when clicked. Currently, the image goes away when I mouseout. But I want to have the close button also.

How do I make these additions?

Here is my current javascript code:

$(document).ready(function() {  
var offsetX = 10;
var offsetY = 5;
$('.menu').mouseover(function(e) {
    console.log(e);
    var href = $(this).attr('href');
    $('<img id="image" src="' + href + '"/>')
    .css('top', e.pageY + offsetY)
    .css('left', e.pageX + offsetX)
    .appendTo('body');
}, function(e) {
    $('#image').remove();
});
$('.menu').mouseout(function(e) {

    $("#image").css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
    $('#image').remove();
});

});

Here is some example html code:

<a id='image1' class='menu' href="images/image1.jpg" alt=""><b>Image Description:</b> Text about this image.</a>

Thanks

Answer 1

You will want to play around with this some to get it to look good, but this should be the basics of what you want.

$('.menu').mouseover(function(e) {
    console.log(e);
    var href = $(this).attr('href');
    var popup = $('<div id="myPopup"></div>');

    var image = $('<img id="image" src="' + href + '"/>');
    popup.append(image);

    var text = $('<p>My Text</p>');
    popup.append(text);

    var closeBtn = $('<button>X</button>');
    popup.append(closeBtn);

    popup.css('top', e.pageY + offsetY).css('left', e.pageX + offsetX);
    popup.append('body');

    closeBtn.button().click(function() {
        $('#myPopup').remove();
    });
}, function(e) {
    // do nothing
});