1

单击图像时，我正在尝试获取指向正常工作的页面的链接。在这个jsFiddle 上，您将看到三个圆形图像。当鼠标悬停在其中任何一个上时，将呈现背景阴影图像。当您单击“律师事务所”图像时，应该会显示一个带有一些文本的简短 HTML 页面。所发生的情况是，指向律师事务所文本的链接不是作为图像本身呈现，而是作为“>”字符呈现 - 请参见下面的屏幕截图。

谁能指导我如何使图像充当链接？还确保当鼠标悬停在背景图像上时，背景图像继续位于律师事务所图像的中心。

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>

在此处输入图像描述

4

3 回答 3

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>

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

看看我的新小提琴

于 2013-03-18T16:57:58.563 回答
0

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

<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>
于 2013-03-18T16:55:12.060 回答
0

第 6 行：

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

卸下额外的闭合支架。

于 2013-03-18T16:55:34.947 回答