0

リンクの上にマウスを置くと、現在のコードで画像がポップアップ表示されます。

画像に加えて、テキストの説明もポップアップに表示される機能を追加したいと思います。

さらに、クリックするとポップアップを閉じるポップアップウィンドウの「X」閉じるボタンも必要です。現在、マウスアウトすると画像が消えます。でも閉じるボタンも欲しいです。

これらの追加を行うにはどうすればよいですか？

これが私の現在のjavascriptコードです：

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

});

ここにいくつかのHTMLコードの例があります：

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

ありがとう

4

1 に答える 1

1

見栄えを良くするために、これをいじってみたくなるでしょうが、これがあなたが望むものの基本であるはずです。

$('.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
});
于 2012-12-04T22:18:54.450 に答える