Question

我的代码可以使用，但只会在鼠标悬停时更改第一个图标的图像。只要您将鼠标悬停在第二个或第三个图标上，第一个图像仍然是唯一可以更改的图像。

我使用的javascript是：

<script type="text/javascript" language="Javascript">

var imgdir = "category_icons/";

blank_icont = new Image;
blank_icont.src= imgdir+"blank_text.png";
addorder_icon = new Image;
addorder_icon.src = imgdir+"addorder.png";
addorder_icono = new Image;
addorder_icono.src= imgdir+"addorder2.png";
//addorder_icont = new Image;
//addorder_icont.src= imgdir+"addorder.png";

function changeImages(name) { 
document.images[name].src = eval(name + '_icono.src');
document.images.icon_text.src  = eval(name + '_icont.src');
}

function changeImages2(name){ 
document.images[name].src = eval(name + '_icon.src');
document.images.icon_text.src  = eval('blank_icont.src');
    }
</script>

然后我的其余代码连接到数据库，您可以看到我在哪里使用函数changeImages来交换图像。

while($row = mysqli_fetch_array($result))
{
    $id = $row['id'];
    $description = $row['description'];
    $picturepath = $row['picturepath'];
    $name = $row['name'];
    $price = $row['price'];

    $dynamiclist = '<table align="center" width="60%" border="0" cellspacing="5" cellpadding="8">
                        <tr height="10"><hr style="width: 60%;"></tr>
                        <tr>
                            <td width="30% valign="top" align="left"><img style="border: #66cc33 5px solid;" src="./menupictures/'. $picturepath . '" height="140" width="140" border="1"/></td>
                            <td width="40%" valign="top" align="left"> ' . $name . ' <br /> $' . $price . ' <br /><br /><a href="moreinfo.php?id=' . $id .'">More Info</a></td>
                            <td width="30% valign="top" align="left"><a onmouseover="changeImages(&quot;addorder&quot;)" onmouseout="changeImages2(&quot;addorder&quot;)" href="customize.php?id=' . $id .'"><img id="addorder" src="category_icons
                                                                        /addorder.png" alt="" name="addorder" border="0"></a></td>
                        </tr>
                    </table>';
    echo $dynamiclist;
    }

要再次检查问题，第一张图像在鼠标悬停时会在图像之间切换，但当您将鼠标悬停在任何其他图像上时，第一张图像仍然是更改的图像。可能是因为这是一个while循环？我已经尝试过更改一些东西以使其工作，但是完全没有使用我的代码，并且不知道是什么导致了这个？你有什么想法吗？

Answer 1

尝试添加此

<img src="filename.extension"  id="image" onmouseover="changesrc(new_src)"/>

和将其添加到脚本

中

function changesrc(new_src){
  var image = document.getElementById(new_src);
  image.src = "newimage.extension";
}

Answer 2

<img 
    src=<%#Eval("smallPicture","../yourfolder/{0}") %>  
    onmouseover='<%# string.Format("this.src=\"{0}\";", Eval("bigpicture","../yourfolder/{0}"))%>'
    onmouseout='<%# string.Format("this.src=\"{0}\";", Eval("smallPicture","../yourfolder/{0}"))%>'
>

Javascript onmouseover在img之间切换麻烦

2 个答案: