Question

我在php中有一个链接并使用javascript我试图在鼠标结束时将“read.png”的背景图像设置为“read.png_light”。知道如何让它发挥作用吗？

<?php
echo "<a href='messages.php?hash=$hash'>";                  
?>

<onmouseover="document.getElementById('mage').src='img/read_light.png';"
onmouseout="document.getElementById('mage').src='img/read.png';">       

<img src="img/read.png" id="mage"/>

<?php               
echo"</a>";
?>

Answer 1

Onmouseover不是标记，而是事件属性！ Here are some info

因此，它必须放在元素标签内。

在您的问题中提供的示例中，onmouseover / onmouseout是如果它们是标记，则写成：<onmouseover>。这就是为什么它不起作用。
在您的第一条评论中提供的示例中，onmouseover位于内部一个锚标记，如<a onmouseover....></a>。这就是它工作的原因。

你试过了吗？

//onmouseover and onmouseout are inside the <img> tag
<?php
echo "<a href='messages.php?hash=$hash'>";                  
?>

<img src="img/read.png" id="mage" 
onmouseover="document.getElementById('mage').src='img/read_light.png';"
onmouseout="document.getElementById('mage').src='img/read.png';" />       

<?php               
echo"</a>";
?>

OR

//onmouseover and onmouseout are inside the <a> tag
<?php
echo "<a href='messages.php?hash=$hash' ";                  
?>
onmouseover="document.getElementById('mage').src='img/read_light.png';"
onmouseout="document.getElementById('mage').src='img/read.png';" 

<?php echo ">"; ?>


<img src="img/read.png" id="mage" />       

<?php               
echo"</a>";
?>

Answer 2

我认为您需要这样的代码：

<script>
   var read = 'img/read.png';
   var read_light = img/read_light.png;
</script>
<?php
     echo "<a href='messages.php?hash=$hash' onmouseover='document.getElementById('mage').src=read_light;' onmouseout='document.getElementById('mage').src=read;'>
?>

<img src="img/read.png" id="mage"/>

<?php               
     echo"</a>";
?>

使用CSS做一个更好的方法就是这样：

您生成的HTML：

<a href='messages.php?hash=$hash' class="swap">                  
    <span id="mage">Text</span>
</a>

然后将此CSS附加到您的HTML：

a #mage {
    display:block;
    height:60px;
    width:60px;
    background-image:url('img/read.png'); 
}

 a #mage:hover { 
     background-image:url(img/read_light.png); 
}

javascript for php里面的链接无法正常工作

2 个答案: