1

I have a div containing images and I want to show all of the inside image's titles onmouseover.

So, I have something like this :

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

And my javascript :

function highlight(element) {     

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

But all i get is a message - Object "X" has no method show.

4

2 回答 2

2

您正在使用纯 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隐藏标题的处理程序。

于 2013-05-28T11:34:23.587 回答
1

下面是一个使用 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/

于 2013-05-28T11:52:28.723 回答