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);
?>

我需要在mouseover上将该图像更改为另一个图像，例如使用$ 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所在的网页位于同一目录中。它在鼠标悬停时更改图像，但在mouseout上没有任何内容。

您可以根据需要对其进行倒角。

PHP鼠标悬停图像更改

2 个答案: