Question

我有一个包含图像的div，我想在onmouseover上显示所有内部图像的标题。

所以，我有这样的事情：

<div id=MyDiv onmouseover="highlight(this);">

我的javascript：

function highlight(element) {     

        for (var i = 0; i < element.children.length; i++) {
            if (element.children[i].tagName == "IMG")
                element.children[i].title.show();
        }
    }

但我得到的只是一条消息 - 对象“X”没有方法显示。

Answer 1

您正在使用纯JavaScript。 title是一个字符串，正如消息所示，它没有方法show。

如果你想要做的是提醒弹出窗口中的所有标题，你可以这样做：

function highlight(element) {     

        for (var i = 0; i < element.children.length; i++) {
            if (element.children[i].tagName == "IMG")
                alert(element.children[i].title);
        }
    }

另一方面，如果你想在页面上显示它们，你需要这样的东西：

function highlight(element) {     
        var outputelement = document.getElementById("idofsomeelementyouhaveonyourpage");
        for (var i = 0; i < element.children.length; i++) {
            if (element.children[i].tagName == "IMG")
                outputelement.innerHTML += element.children[i].title;
        }
    }

当然，使用第二种方法，您还需要一个隐藏标题的onmouseout处理程序。

Answer 2

以下是使用jQuery的示例：

HTML：

<div id="MyDiv">
    <img src="http://chandra.harvard.edu/photo/2012/m101/m101_xray_thm100.jpg" title="img1" />
    <img src="http://passport-cdn.mobilenations.com/avatars/000/004/072/100x100_4072871.jpg?r=1" title="img2" />
</div>

jQuery的：

$("#MyDiv").mouseenter(function () {
    $mydiv = $(this);
    $.each($('img', $mydiv), function () {
        var pos = $(this).position();
        $('<div>', {
            class: 'imgtitle'
        }).css({
            position: 'absolute',
            color: 'red',
            top: pos.top + 5,
            left: pos.left + 5
        })
        .html($(this).attr('title'))
        .insertAfter($(this));
    });
}).mouseleave(function () {
    $('.imgtitle').remove();
});

这是一个jsfiddle显示它的实际效果：http://jsfiddle.net/obryckim/k5hcJ/

如何在onmouseover上显示所有div的内部图像标题？

2 个答案: