PHP：将悬停效果添加到图像

问题描述：

我正在处理PHP文件。我在菜单栏上工作，菜单栏包含所有图像按钮，如果有人在其中一个按钮上悬停，我希望它们更改图像（颜色）。有人可以帮我解决这个问题吗？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精灵（http://css-tricks.com/css-sprites/） – HamZa 2013-05-03 08:08:28

PHP不处理这个... CSS或JavaScript会更适合这个工作。你可以有一个CSS'：hover'来改变背景颜色。 – aug 2013-05-03 08:08:57

如何更改背景颜色，当它是图像？所以，你有一个背景图像，并且希望将其更改为背景色上悬停前请回答.. – 2013-05-03 08:10:31

答

您可以使用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悬停效果是今天的标准。

那我可以在哪里定义BUTTON？我很抱歉，但我的英语不是很好，我的Gramar可能不好。 – 2013-05-03 08:08:43

@JohanVanBaak我已经更新了我的答案。 – Jared 2013-05-03 08:11:08

再次更新以解释您可以使用CSS进行样式化的元素。 – Jared 2013-05-03 08:14:04

答

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

你不能动态编辑JS中的按钮（好吧，你可以使用画布和HTML 5，但它是不平凡的）。所以，你需要使用CSS（或者可能是JS）在2张图片之间进行交换。

这些图像来自哪里取决于您 - 您可以预先生成这些图像，这是一个前台工作，但易于实施，并且不需要PHP。如果只有一种或两种颜色的变化，这将是首选。

或者，您可以有一个PHP脚本，它可以即时生成图像（并且理想地缓存它们以保存稍后的重新计算）。这允许无限变化，但需要更多的服务器开销。由于源图像是未知的，所以这种方法通常用于生成缩略图

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

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

答

您可以使用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已被分配。 – 2013-05-03 08:35:07

答

您可以使用精灵形象和onHover选项改变位置。您也将获得性能优势。

PHP：将悬停效果添加到图像

相关推荐