On Mouse Over Not Showing Image

Question

On Mouse Over Not Showing Image

1.3k views Asked by crystalnoob At 22 August 2019 at 15:37

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','')

Original Q&A

There are 4 answers

VDWWD On 22 August 2019 at 16:11

A LinkButton, which simply is an anchor in html does not have a src property. It is not an image. Use a background image.

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

OR change it to an ImageButton Control, which becomes <input type="image"

crystalnoob On 22 August 2019 at 20:46

Thank you so much, everyone. Between your suggestions and some tinkering, I was able to get the code to work as expected.

Here is the final code. When I hover over the linkbutton the image shows below the button and disappears when I mouse out.

<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";
}

Code On 16 March 2021 at 11:39

      <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/ follow this link also

**tilted** · Accepted Answer · 2019-08-22T16:04:45+00:00

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.

TechQA.

On Mouse Over Not Showing Image

There are 4 answers

Related Questions in JAVASCRIPT

Related Questions in C#

Related Questions in ASP.NET

Related Questions in ONMOUSEOVER

Related Questions in ASPLINKBUTTON

Popular Questions

Popular Tags

Trending Questions