Question

我需要将响应图像放在像“视频”这样的字符串上，这也是他的alt标签。例如：

<img src="my_image" alt="VIDEO">

我应该有我的图像，在中心（垂直和水平），字符串“VIDEO”用作alt。我不知道如何使用jquery，我搜索了很多，但没有什么是我需要的。

看到我不需要CSS解决方案！

我是我的理由，但我需要jquery解决方案。我试过但没什么...... 如果我写：

<script>

    $(function () {
        var info = $("#informa");
        if (info.length == 0) {
            info = $("<span />").addClass("informa");
            $("body").append(info);
        }
        info.hide();
        $(".hover_text").bind("mouseenter", function () {
            var p = GetScreenCordinates(this);
            info.html(this.alt);
            info.show();
            info.css("width", $(this).width());
            info.css({ "left": p.x, "top": p.y + this.offsetHeight - info[0].offsetHeight });
        });
        $(".hover_text").bind("mouseleave", function () {
            info.hide();
        });
    });
    function GetScreenCordinates(obj) {
        var p = {};
        p.x = obj.offsetLeft;
        p.y = obj.offsetTop;
        while (obj.offsetParent) {
            p.x = p.x + obj.offsetParent.offsetLeft;
            p.y = p.y + obj.offsetParent.offsetTop;
            if (obj == document.getElementsByTagName("body")[0]) {
                break;
            }
            else {
                obj = obj.offsetParent;
            }
        }
        return p;
    }
</script>

我的形象是：

                <img src="myimage.jpg" class="hover_text" alt="Collection">

看起来正确，但在顶部。

Answer 1

您需要向span添加绝对定位，以将其从常规文本流中删除。添加以下行：

info.css("position", "absolute");

你的span高于你的形象。定位只是正确计算的问题。

修改

要将其水平居中，只需将text-align: center添加到元素，因为它已经像图像一样宽info.css("width", $(this).width());。对于垂直居中，我假设它可以有多行，所以你需要添加图像高度的一半，然后减去图像上文本高度的一半。

此处的完整代码：http://jsfiddle.net/sQwW6/

编辑行：

info.css("text-align", "center"); info.css({ "left": p.x, "top": p.y + $(this).height()/2 - info.height()/2 });

Answer 2

Use this modified script:


    $(function () {
        var info = $("#informa");
        if (info.length == 0) {
            info = $("").addClass("informa");
            $("body").append(info);
        }
        info.hide();
        $(".hover_text").bind("mouseenter", function () {
            var p = GetScreenCordinates(this);
            info.html(this.alt);
            info.show();
            info.css("width", $(this).width());
            info.css("position",'absolute');
            info.css({ "top": info[0].offsetWidth-p.x, "left": p.y  - info[0].offsetHeight });
        });
        $(".hover_text").bind("mouseleave", function () {
            //info.hide();
        });
    });
    function GetScreenCordinates(obj) {
        var p = {};
        p.x = obj.offsetLeft;
        p.y = obj.offsetTop;
        console.log(p);

        p.x = $(obj).width()/2;
        p.y = $(obj).height()/2;   
        console.log(p)    
        return p;
    }

如何通过alt标签设置以图像为中心的文本

2 个答案: