php - PHP鼠标悬停图像更改

Question

我有代码：

<?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 。如何修改代码？此外，图像需要是网站的链接。

Answer 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/

Answer 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 所在的网页位于同一目录中。它会在鼠标悬停时更改图像，但在鼠标悬停时不会更改。

你可以随心所欲地改变它。