1

在我的网站上，我有一个导航列表，其中包含代表导航链接的图像，我编写了一个 onmouseover javascript 函数，它将 imgsrc 更改为图像的较暗版本。

我现在认识到，如果导航中有多个列表元素（导航中的列表元素数量是动态的），则 javascript 函数不起作用。对于一个元素，它确实有效。

现在我发现了错误：由于图像是在 while 函数中创建的，它总是具有相同的 id，所以如果有多个导航元素，它有多个使用相同 id 调用的图像，所以 JavaScript 函数当然不能引用它们.

奇怪的是，我发现很难解决这个问题。有人可以告诉我为什么以下方法行不通吗？

<html>
<head>
<script
language="JavaScript">
function over(source,c) {
  c.src = "Images/List/streams/"+source+"_mo.png";
}
function out(source,c) {
  c.src = "Images/List/streams/"+source+".png";
}
</script>
</head>
<body>
<?php
...
while($row_player = mysql_fetch_object($players)) {
    $image   = 'pic'.$row_player->Id;
    echo "<a href=".$row_player->Page." target=_parent
    onmouseover= over(".$row_player->Id,$image.")
    onmouseout = out(".$row_player->Id,$image.")> 
    <li>
    <img id=".$image." src=Images/List/streams/".$row_player->Id.".png>
    </li>
    </a>";  
}
...
?>
</body> 
</html>

这是我第一次使用的代码，它只适用于一个元素

<html>
<head>
<script
language="JavaScript">
function over(source) {
    pic.src = "Images/List/streams/"+source+"_mo.png";
}
function out(source) {
    pic.src = "Images/List/streams/"+source+".png";
}
</script>
</head>
<body>
<?php
...
while($row_player = mysql_fetch_object($players)) {
        echo "<a href=".$row_player->Page." target=_parent
        onmouseover= over(".$row_player->Id.")
        onmouseout = out(".$row_player->Id.")> 
        <li>
        <img id=pic src=Images/List/streams/".$row_player->Id.".png>
        </li>
        </a>";  
}
...
?>
</body> 
</html>

顺便说一句，while循环都在回声中。

4

1 回答 1

1

您的代码中有一些错误。一个是在您的overandout函数中，c是一个字符串（元素的 ID），但您将其视为一个元素。使用document.getElementById(c).src = ...而不是c.src = ....

另一个问题是您错误地回显了onmouseoverand的参数onmouseout。您需要用逗号分隔它们并引用它们。而不是onmouseover= over(".$row_player->Id,$image.")，使用

onmouseover=\"over(\"".$row_player->Id."\", \"".$image."\")\"

和同样的onmouseout。引用 HTML 属性允许您在其值中包含空格（并使您的标记生效）。您需要引用 Javascript 函数的参数，否则 Javascript 会将图像 ID 视为变量的名称，而不是字符串。

于 2012-12-20T15:40:42.700 回答