0

我有一个带有“访问”按钮的图像，它是用 HTML 代码映射的图像，它具有翻转效果，因此当您将鼠标放在“访问”链接上时，它会显示访问按钮的发光版本。

但是现在代码不正确，翻转效果将原始图像替换为发光版本图像，我只是希望发光版本在以下 html 代码中的相同坐标处覆盖​​原始版本：coords="52,63,145,100"

我不希望它替换整个图像。我希望发光版本保持其正常大小。这是到目前为止的代码：

<div style="text-align:center; width:200px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_3201304212133558" src="http://www.image-maps.com/uploaded_files/3201304212133558_example78.png" usemap="#Image-Maps_3201304212133558" border="0" width="200" height="200" alt="" />
<map id="_Image-Maps_3201304212133558" name="Image-Maps_3201304212133558">
<area shape="rect" coords="52,63,145,100" href="yahoo.com" alt="visit!" title="visit!" onMouseOver="if(document.images) document.getElementById('Image-Maps_3201304212133558').src= 'http://s15.postimg.org/a71gazzzr/visit_glow.pngmage-maps.com/';" onMouseOut="if(document.images) document.getElementById('Image-Maps_3201304212133558').src= 'http://www.image-maps.com/uploaded_files/3201304212133558_example78.png';"  />
<area shape="rect" coords="198,198,200,200" href="http://www.image-maps.com/index.php?aff=mapped_users_3201304212133558" alt="Image Map" title="Image Map" />
</map>

</div>

这是一个现场演示。

4

3 回答 3

0

您实际上是在替换标签中的图像，因此除非您将基本图像加载到单独的元素中，否则您将无法同时显示两张图片。

一种选择是更改 : 添加background-image: url(http://www.image-maps.com/uploaded_files/3201304212133558_example78.png);到样式属性。（并且，为了整洁，您可以用透明 png 替换标签中的基本图像）。

但是，出于多种原因，这不是正确的方法。图片损害 SEO，加载速度较慢，某些浏览器存在 png 透明度问题，谷歌翻译不会翻译它们，等等等等。

此外，您可以在 css 中完成所有这些操作：http: //jsfiddle.net/as2003/AbVTK/

于 2013-04-22T01:58:00.107 回答
0

您可以通过删除此代码并使用 CSS 创建按钮和发光悬停效果来实现您想要的。

您当前代码的问题在于，这种翻转效果的方法，即通过映射替换图像，可以说非常繁琐且过时。

网络确实涵盖了有关 CSS 甚至 HTML 的资源，我建议您研究一下。

特别是对于您的查询，请查看：http ://designshack.net/articles/css/four-simple-and-fun-css-button-hover-effects-for-beginners/

于 2013-04-22T02:01:15.103 回答
0

我将在这里尽我所能说服你重新考虑你在做什么。我知道你想回答你的问题，但事实是，我认为没有办法做到这一点。问题是原始图像是一回事，翻转按钮是另一回事。当这是标准时，您必须将原始按钮和翻转按钮创建为完全相同的大小和 dpi 才能使其正常工作并看起来正确。如果你想在图像中间有一些东西，你必须切掉你想要改变的部分，并使用 css 和 div 或（上帝禁止）一个表格，以使其工作。

在 2013 年，您可以使用 CSS3 完成您想做的所有事情，而根本不需要图像。

该站点将为您制作它们，并在您完成后将代码提供给您。 http://css-tricks.com/examples/ButtonMaker/

这个使用了图​​片，以防您想要一些比文本可以提供的更特别的东西，

http://designshack.net/articles/css/four-simple-and-fun-css-button-hover-effects-for-beginners/

祝你好运

编辑：我困了，所以当我告诉你你原来的东西有什么问题时，我认为我做得不好。原始图像是一个巨大的东西，中间有一个边框和一个小按钮。悬停按钮只是一个小按钮。您认为您可以使用悬停效果将中间的小按钮替换为覆盖图像。使用 javascript 可能会实现这一点，但我不确定您是否可以使用悬停效果来做到这一点。如果这是可能的，它不是一个好方法。

于 2013-04-22T02:01:40.113 回答