Question

我很好奇这是最好的（唯一？）方式。

我被要求制作文字链接，在翻转时显示图像（在它下面），当然你在滚动链接时会消失。

（原版个人使用了一些破坏页面的内联样式，而不是声明一个块）..他们还尝试使用IMAGE MAP使显示的图像成为LINK / clickable，并且具有不同/唯一TEXT链接用于显示图像的URL。

我做了风格：

/*custom client requested CSS styling/functionality*/
a.imageDisplay img { 
    display:none; 
}
a.imageDisplay:hover img { 
    display:block; 
}

以下是我尝试将此功能添加到HTML的HTML代码段：

<a class="imageDisplay" href="#">Client Name XYZ<img src="/UserFiles/image/ALLSAtestpage3.jpg" usemap="#allsa" /><map id="allsa" name="allsa"><area coords="12,113,123,142" href="http://www.nike.com/" shape="rect" target="_blank" /></map></a><br />

我的问题是：向正在显示的图像添加LINK / URL的最佳方式（更好的方法）是什么？

因为图像是INSIDE，所以锚点/链接标记...也会在点击时获得与目标相同的URL ....是吗？

任何人都有一些简单的想法作为解决方法吗？

（我真的讨厌那些MAP标签）:)）

谢谢！

Answer 1

这很简单吗？

<span class="txt-img">
    <a class="txt" href="#1">Client Name ABC</a>
    <a class="img" href="#2"><img src="http://placehold.it/200/0000cc/" /></a>
</span>

.txt-img {position:relative;}
.txt-img .img {position:absolute; display:none; left:0;}
.txt-img:hover .img {display:block;}

FIDDLE：http://jsfiddle.net/46Tf6/

CSS +链接翻转=显示图像（唯一的URL）

1 个答案: