Question

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

Answer 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精灵（就像过去使用的旧视频游戏）。 CSS精灵是单个图像中的图像集合，您只需更改背景位置的位置，即可创建效果。你可以这样做：

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

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

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

Answer 2

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

你无法动态编辑JS中的按钮（好吧，你可以使用画布和html 5，但这不是一件容易的事）。因此，您需要使用CSS（或可能是JS）来交换2个图像。

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

或者，您可以拥有一个PHP脚本，可以即时生成图像（理想情况下会缓存它们以保存以后重新计算它们）。这允许无限变化但在服务器上需要更多开销。这种方法通常用于生成缩略图，因为事先不知道源图像

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

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

Answer 3

使用内容：选择器，您可以使用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

的工作小提琴

Answer 4

您可以使用精灵图像和onhover更改位置。你也会受益于表现。

PHP：为图像添加悬停效果

4 个答案: