On Mouse Over Not Showing Image
Question
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','')
4 answers
solution1
0 ACCPTED 2019-08-22 16:04:45
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 .
solution2
0 2019-08-22 16:11:15
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"
solution3
0 2019-08-22 20:46:02
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";
}
solution4
0 2021-03-16 11:39:55
<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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.