javascript c#asp.net onmouseover asplinkbutton

On Mouse Over Not Showing Image

The following code only executes the color change. I never see the image.

I am writing this in C# ASP.Net in Visual Studio 2017

Basically tried variations of this code.

 <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>

I expect to see the image show like a callout or popup. The text changes to red and the page only indicates javascript:__doPostBack('LinkButton1','')

Solution

I think I may see your issue. On this line

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

you appear to be trying to update the src of the button and not the image.

Try updating your code to use the id of the img tag like this

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

EDIT1 Ok I am adding in now so when you mouseover the button the image is available and when you mouse out the image goes away. I am doing this using the css visibility property.We set the image to hidden by default inline on the element using the style attribute. When you mouseover the button we set the visible property to visible and when you mouse out we set it back to hidden.

Here is the code to do so

<!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>

I have also updated the gitub example with the new code and placed it into a file title index2.html which you can view here.