-1

我需要在鼠标悬停时更改背景图像，但不知道该怎么做，因为它在我没有写的 document.write 中。任何帮助表示赞赏。这是我到目前为止所拥有的。我希望 B 是正常的，鼠标悬停时的 MO。

<script type="text/javascript">
function DrawRow (Link,Status) {
    B = "../Images/GreenButton.png" ;
    MO = "../Images/GreenButtonMouseOver.png" ;
    color1 = "#66FF33"; color2="#000000"; color3="#000000"; color4="#000000"; color5="#000000";


    //====================================================================================================================
    //          Check User Defined States By Rule
    //====================================================================================================================

    if ( Status4 )  { B="../Images/BlueButton.png"; MO="../Images/BlueButtonMouseOver.png"; color1="#FFFFFF"; }
    if ( Status32 ) { B="../Images/LightGreenButton.png"; B="../Images/LightGreenButtonMouseOver.png"; C1color="#000000"; }
    if ( Status2 )  { B="../Images/YellowButton.png"; MO="../Images/YellowButtonMouseOver.png"; C1color="#000000"; }
    if ( Status1 )  { B="../Images/OrangeButton.png"; MO="../Images/OrangeButtonMouseOver.png"; C1color="#000000"; }
    if ( Status8 )  { B="../Images/RedButton.png"; MO="../Images/RedButtonMouseOver.png";C1color="#FFFF00"; }
    if ( Status16 ) { B="../Images/PurpleButton.png"; MO="../Images/PurpleButtonMouseOver.png"; C1color="#000000"; }

document.write(  "<td ONCLICK=\"Jump('"+Link+"')\"onmouseover=\"this.style.cursor='hand'\" height='37' width='350' background='"+B+"' ><font color='"+color1+"'><p align='center'><b>"+T+"</b></td>"  );
4

5 回答 5

2

使用下面的jQuery代码可能会解决您的问题。

doit当您确定所有tds 都已加载时调用该函数

function doit(){
    //alert(MO);
    //alert(B);
$("td[onclick^='Jump']").each(function(){
    console.log(MO);
    console.log(B);
    $(this).attr("mouseoverpic", MO);
    $(this).attr("mouseoutpic", B);

      $(this).hover(
        function(){
          $(this).attr("background", $(this).attr("mouseoverpic"));
        },
       function(){
         $(this).attr("background", $(this).attr("mouseoutpic"));
        }
     );
 });
}

PS：看看这个jsfiddle。当然，我用它作为我的参考。

于 2013-08-02T10:47:50.250 回答
1

你可以添加一些 CSS 吗？

<style>
  #somename{
    background-image:url("../Images/Green-360-Button.png");
  }
  #somename:hover{
    background-image:url("../Images/Green-360-ButtonMouseOver.png");
  }
</style>

并添加id="somename"到<td>

于 2013-08-02T08:55:59.430 回答
1

如果你的 div 是这样的

 <div id="div_1"></div>

那么你可以使用风格

#div_1:hover{ 
//your style for image
}
于 2013-08-02T08:56:55.887 回答
1

你可以使用这个语法：

onmouseover="changeImage(this.id);"
 create a function like this :

    <script language="javascript" type="text/javascript">
    function changeImage(id)
    {
       $('#'+id).css("background-image", "url(your image path)");
    }

    </script>

你必须包括 jquery.js

于 2013-08-02T09:10:57.360 回答
0

终于明白这是我必须做的非常简单的事情，只花了 3 天的时间尝试功能，使用样式表然后我得到了这个！感谢大家的帮助，我赞成所有的贡献！

    document.write(  "<td ONCLICK=\"Jump('"+Link+"')\" onmouseover=\"this.style.background='url("+M+")'; this.style.cursor='pointer';\" onmouseout=\"this.style.background='url("+B+")';\" onmousedown=\"this.style.background='url(../Images/Gold-360-ButtonMouseOver.png)'\"  height='25' width='350' background='"+B+"' ><p align='center'><font color='"+C1color+"'><b>"+T+"</b></td>"  );
于 2013-08-05T06:18:56.883 回答