2

我正在处理一个 PHP 文件。我正在菜单栏上工作，菜单栏包含所有图像按钮，如果有人将鼠标悬停在其中一个按钮上，我希望他们更改图像（颜色）。有人可以帮我解决这个问题吗？

$globalsettings = array(
    'src' => $sImageURL.'global1.png',
    'alt' => $clang->gT("Global participant settings"),
    'title' => $clang->gT("Global participant settings"),
    'style' => 'margin-left:5px',
    'style' => 'margin-right:1px'
);
4

4 回答 4

2

您可以使用 CSS（级联样式表）创建悬停效果。您的 CSS 必须位于外部样式表或嵌入样式元素中。

我正在使用BUTTON它来设置所有<button>元素的样式，但是您可以将其替换为您想要设置样式的任何元素，例如<img>with IMG（小写或大写）。

BUTTON { 
    background: url(my_bg.png); 
}

BUTTON:hover { 
    background: url(my_hover_bg.png); 
}

如果您不知道如何使用样式表，只需将嵌入样式插入<head>HTML 文档即可。

<style type="text/css">
    /* Place CSS here */
</style>

如果你愿意，你可以更进一步，使用 CSS sprites（就像以前的电子游戏一样）。CSS sprites 是单个图像中的图像集合，您只需更改背景位置的位置，即可创建效果。你可以这样实现：

#myelement { 
    background: url(my_bg.png) -0 -0; 
}

#myelement:hover { 
    background: url(my_bg.png) -0 -100px; 
}

也有老派的悬停效果方式，但它们就像 Frontpage 时代一样，所以我不建议使用它们。CSS 悬停效果是当今的标准。

于 2013-05-03T08:07:34.070 回答
0

您正在尝试一步解决 2 个问题。您需要显示图像，然后在悬停时在它们之间交换。

您不能在 JS 中动态编辑按钮（好吧，您可以使用画布和 html 5，但这并不重要）。因此，您需要使用 CSS（或者可能是 JS）在 2 个图像之间进行交换。

这些图像的来源取决于您 - 您可以预先生成它们，这需要一些前期工作，但易于实现且不需要 PHP。如果只有一两种颜色变化，这将是首选。

或者，您可以使用 PHP 脚本即时生成图像（并理想地缓存它们以节省以后重新计算它们）。这允许无限变化，但需要更多的服务器开销。这种方法通常用于生成缩略图，因为事先不知道源图像

请注意，PHP 无法控制何时显示每个图像 - 它只是以与 Web 服务器提供静态图像完全相同的方式向您的 CSS/JS 提供图像。

如果要在 PHP 中编辑图像，则需要查看GD+ 库

于 2013-05-03T08:19:04.727 回答
0

您可以使用 css 通过 content: 选择器轻松完成此操作。

例如，您的标记可能如下所示：

<div class="link" id="link1">
    <a href="yourhref"><img /></a>
</div>

和CSS会是这样的：

#link1 a img{
    content:url("http://www.maxxpotential.com/stephen2/wp-content/uploads/2013/03/Images-from-Deep-in-the-Woods-by-Astrid-Yskout-4.jpg");
}

#link1:hover a img{
content:url("http://blogs.mathworks.com/pick/files/zebrainpastelfield.png");
}

通过使用您在脚本中分配的选择器，您应该会发现很容易修改它以满足您的需要。

这是一个演示这个http://jsfiddle.net/pWYtu/1的工作小提琴

于 2013-05-03T08:21:09.843 回答
0

您可以使用精灵图像和悬停改变位置。您也将从性能中受益。

于 2013-05-03T08:36:52.863 回答