PHP：为图像添加悬停效果答案

【问题标题】：PHP: Add hover effect to imagePHP：为图像添加悬停效果
【发布时间】：2013-04-27 13:56:41
【问题描述】：

我正在处理一个 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'
);

【问题讨论】：

你应该看看CSS sprites
PHP 不处理这个...... CSS 或 Javascript 会更适合这项工作。你可以有一个 CSS :hover 所以它会改变背景颜色。
如果是图像，我如何更改背景颜色？请在回答前阅读..
@JohanVanBaak 所以你有一个背景图像，你想在悬停时将其更改为背景颜色？
不，我在主页上有一个菜单，主页/about-us/contact/etc.. 都是图像。我希望当有人将主页图像悬停时，它会切换到相同的图像，但使用另一种颜色。上面是全局设置的代码，每个图像都有自己的代码。但是我怎样才能在上面的代码上放置一个悬停效果。

标签： css image hover

【解决方案1】：

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

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

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

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

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

<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 悬停效果是当今的标准。

【讨论】：

那么我在哪里可以定义 BUTTON 呢？对不起，我的英语不是很好，我的语法可能很糟糕。
再次更新以说明您可以使用 CSS 设置哪些元素。
再次更新解释 CSS 精灵。

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以通过 content: 选择器使用 css 轻松地做到这一点。

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

<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的工作小提琴

【讨论】：

我明白，但我不能真正将 DIV 设为 $home，$globalsettings 已分配。

【解决方案4】：

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

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

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

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

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

如果你想在 PHP 中编辑图像，你需要查看GD+ library

【讨论】：