Question

我正在尝试在单击图像时获得指向页面正常工作的链接。在这个jsFiddle上你会看到三个圆形图像。当鼠标悬停在它们中的任何一个上时，将渲染背景阴影图像。当您点击“律师事务所”图片时，应显示包含一些文字的简短HTML页面。会发生的事情是，律师事务所文本的链接不是图像本身，而是“＆gt;”角色 - 见下面的截图。

有人可以指导我如何将图片作为链接吗？同时确保背景图像继续以律师事务所为中心，当鼠标悬停在它上面时。

CSS：

.center {text-align: center;}

#sfimages {padding:15px;}

#sfimages:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;     
}

HTML：

<body>
<table style="width: 100%">
    <tr>
            <td class="center">
                <div id="sfimages"> 
                <a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG">                              >
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
                    <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
                </object>
                </a>
                </div>
            </td>
            <td class="center">
                <div id="sfimages">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
                    <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
                </object>
                </div>
            </td>
            <td class="center">
                <div id="sfimages">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
                    <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
                </object>
                </div>
            </td>
    </tr>
</table>

enter image description here

Answer 1

很抱歉这段时间，对我来说这是忙碌的一天，我有足够的时间回到你的问题。这是我推荐的。看起来你正在使用的代码是从inkscape生成的？当它运行时，源代码是一个坚果，特别是在对象区域内。但如果你想要链接，不要害怕。只需进行以下轻微调整，您就可以使用链接了！

CSS：

.center {
    text-align: center;
}

#sfimages {
padding:15px;
position:relative;
width:380px;
height:273px;
}

#sfimages:hover {
    background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
    background-repeat: no-repeat;
    background-position:center;     
}

#ext-site {
display:block;
width:380px;
height:273px;
position:absolute;
z-index:9999;
}

HTML：

<table style="width: 100%">
    <tr>
            <td class="center">
                <div id="sfimages"> 
                <a id="ext-site" href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"></a>                              
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
                    <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
                </object>

                </div>
            </td>
            <td class="center">
                <div id="sfimages">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
                    <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
                </object>
                </div>
            </td>
            <td class="center">
                <div id="sfimages">
                <object type="image/svg+xml"
                    data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
                    <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
                </object>
                </div>
            </td>
    </tr>
</table>

这是经典技巧，涉及在相对显示块元素内部的绝对定位锚链接。只要锚点伸展到它的父级大小，它就会在整个部分的顶部充当一个隐形按钮。

查看我的新Fiddle

Answer 2

有多余的角色：请检查以下代码（在评论中有完整代码的链接）：

<table style="width: 100%">
    <tr>
        <td class="center">
            <div id="sfimages"> 
            <a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG">                              
            <object type="image/svg+xml"
                data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
                <img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
            </object>
            </a>
            </div>
        </td>
        <td class="center">
            <div id="sfimages">
            <object type="image/svg+xml"
                data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
                <img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
            </object>
            </div>
        </td>
        <td class="center">
            <div id="sfimages">
            <object type="image/svg+xml"
                data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
                <img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
            </object>
            </div>
        </td>
    </tr>
</table>

Answer 3

第6行：

<a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG">                              >

删除额外的右括号。

图像（带背景图像）作为链接

3 个答案: