鼠标悬停不显示图像

Question

以下代码仅执行颜色更改。我从来没有看到图像。

我在 Visual Studio 2017 的 C# ASP.Net 中编写此代码

基本上尝试了此代码的变体。

 <asp:LinkButton ID="LinkButton1" Font-Underline="true" runat="server" 
 OnMouseOver="mouseOver();" OnMouseOut="mouseOut();">Facility 
 ID</asp:LinkButton> 
 <img src="../Images/invoice.PNG" id="image1" alt="Image Not Found" 
 width="1000" height="500" style="display:none;" runat="server" /> 


 <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

 <script>
 document.getElementById("LinkButton1").onmouseover = function() 
 {mouseOver()};
 document.getElementById("LinkButton1").onmouseout = function() 
 {mouseOut()};

 function mouseOver() {
 document.getElementById("LinkButton1").style.color = "red";
 document.getElementById("LinkButton1").style.display="inline";
 document.getElementById("LinkButton1").src = '../Images/invoice.PNG';
 }

 function mouseOut() {
 document.getElementById("LinkButton1").style.color = "black";
 }
 </script>

我希望看到图像显示为标注或弹出窗口。文字变为红色，页面只显示 javascript:__doPostBack('LinkBut​​ton1','')

Answer 1

我想我可能会看到您的问题。 在这条线上

document.getElementById("LinkButton1").src = '../Images/invoice.PNG';

您似乎正在尝试更新按钮的 src 而不是图像。

尝试更新您的代码以使用这样的 img 标签的 id

document.getElementById("image1").src = '../Images/invoice.PNG';

EDIT1 好的，我现在添加，所以当您将鼠标悬停在按钮上时，图像可用，而当您将鼠标移出时，图像就会消失。我正在使用 css 可见性属性执行此操作。默认情况下，我们使用样式属性在元素上将图像设置为隐藏。当您将鼠标悬停在按钮上时，我们将可见属性设置为可见，当您将鼠标移出时，我们将其设置回隐藏。

这是执行此操作的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="button1">Button</button>
    <img id="image1" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png" style="visibility: hidden;"></img>
</body>
<script>
    function mouseOver(){
        document.getElementById('button1').style.color = "green";
        document.getElementById('button1').style.display = "inline";
        document.getElementById('image1').style.visibility = "visible";
    }
    function mouseOut(){
        document.getElementById('button1').style.color = "red";
        document.getElementById('image1').style.visibility = "hidden";
    }
    document.getElementById('button1').onmouseover = mouseOver;
    document.getElementById('button1').onmouseout = mouseOut;
</script>
</html>

我还用新代码更新了 gitub 示例并将其放入文件标题 index2.html 中，您可以查看 here。

Answer 2

一个链接按钮，它只是 html 中的一个锚点，它没有 src 属性。它不是图像。使用背景图片。

document.getElementById("LinkButton1").style.backgroundImage = "url('image.png')";

或将其更改为 ImageButton 控件，变为 <input type="image"

Answer 3

非常感谢大家。在您的建议和一些修补之间，我能够让代码按预期工作。

这是最终代码。当我将鼠标悬停在链接按钮上时，图像显示在按钮下方，当我鼠标移出时消失。

<asp:LinkButton ID="LinkButton1" Font-Underline="true" runat="server" 
OnMouseOver="mouseOver();" OnMouseOut="mouseOut();">Facility ID</asp:LinkButton>

function mouseOver() {

document.getElementById("image1").style.display = "inline";
document.getElementById("image1").style.backgroundimage = "input type=image";
}

function mouseOut()
{

document.getElementById("image1").style.display="none";
}

Answer 4

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://cdn.rawgit.com/elevateweb/elevatezoom/master/jquery.elevateZoom-3.0.8.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("[id*=GrdEmplistAtt] img").elevateZoom({
                    cursor: 'pointer',
                    imageCrossfade: true,
                    loadingIcon: 'loading.gif'
                });
            });
        </script>

<asp:TemplateField HeaderText="View Files" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="300px"
                                                                                        HeaderStyle-HorizontalAlign="Center">
                                                                                        <ItemTemplate>

                                                                                            <asp:Label ID="lblGrdDocFileName" runat="server" Text='<%#Bind("DocFileName") %>' CssClass="form-label" Visible="false"></asp:Label>
                                                                                            <table cellspacing="0" style="width: 100%">
                                                                                                <tr>
                                                                                                    <td style="width: 25%">
                                                                                                        <asp:Image ID="Image1" runat="server" Height="30px" Width="30px" ImageAlign="Middle" Visible="false" />
                                                                                                    </td>
                                                                                                    <td style="width: 25%">
                                                                                                        <asp:Image ID="Image2" runat="server" Height="30px" Width="30px" Visible="false" ImageAlign="Middle" />
                                                                                                    </td>
                                                                                                    <td style="width: 25%">
                                                                                                        <asp:Image ID="Image3" runat="server" Height="30px" Width="30px" Visible="false" ImageAlign="Middle" />
                                                                                                    </td>
                                                                                                    <td style="width: 25%">
                                                                                                        <asp:Image ID="Image4" runat="server" Height="30px" Width="30px" Visible="false" ImageAlign="Middle" />
                                                                                                    </td>
                                                                                                </tr>
                                                                                            </table>
                                                                                        </ItemTemplate>
                                                                                        <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
                                                                                        <ItemStyle HorizontalAlign="Center" Width="250"></ItemStyle>
                                                                                    </asp:TemplateField>

https://www.aspforums.net/Threads/541191/Display-GridView-image-in-Modal-Popup-on-MouseOver-using-jQuery-in-ASPNet/也可以点击此链接