PHP鼠标悬停图像更改答案

【问题标题】：PHP Mouseover image changePHP鼠标悬停图像更改
【发布时间】：2012-06-06 07:22:07
【问题描述】：

我有代码：

<?php
function imagecode($url,$x,$y,$h='auto') {
?>
<div style="display:block;position:absolute;left:<?php echo $x; ?>;top:<?php echo $y; ?>;">
<img src="<?php echo $url; ?>" style="height:<?php echo $h; ?>;">
</div>
<?php
}
imagecode('/index_files/images/loga/same-off.png',110,-140,36);
?>

我需要在鼠标悬停时将该图像更改为另一个图像，例如可能使用 $rollover_url。如何修改代码？此外，图片必须是网站链接。

【问题讨论】：

这不能只用 PHP 完成，你需要使用 javascript 或 CSS。

标签： php javascript css mouseover

【解决方案1】：

请务必注意，您的 PHP 代码不存在于浏览器中，而浏览器是发生鼠标悬停效果的地方。您的 PHP 代码仅存在于服务器上，在那里它被处理成将发送到浏览器的代码。

为了实现鼠标悬停效果，您可以采用传统的 JavaScript 方法，并按照以下方式进行操作：

var kitten = document.getElementById("kitten");

kitten.addEventListener("mouseover", function(){
    this.src = "overImage.png";
}, false);

kitten.addEventListener("mouseout", function(){
    this.src = "originalImage.png";    
}, false);

小提琴：http://jsfiddle.net/jonathansampson/ZPqPy/

【讨论】：

多张图片的效果如何？我有 13 个。
@LestattGaara 您需要循环遍历它们，或重复此代码 13 次。或者，如果您愿意使用库，jQuery 是一个免费工具，也可以很容易地做到这一点。

【解决方案2】：

如果您将图像命名为 1.png、2.png、...、13.png，假设您只有 13 个图像，这可能会起作用。

var image = document.getElementById("image");
var counter = 1;
image.addEventListener("mouseover", function(){
   counter = counter +1;
   this.src = counter + ".png";
}, false);

image.addEventListener("mouseout", function(){
    this.src = counter + ".png";
}, false);

也就是说，假设所有图像都与 javascript 所在的网页位于同一目录中。它会在鼠标悬停时更改图像，但在鼠标移出时不会更改。

您可以随意更改。

【讨论】：