onmouseover/onmouseout event on Hyperlink


Hi 
I have a hyperlink with an image inside of it. I would like the image to change when the user does a mouseover. Is this possible with a hyperlink?
<asp:HyperLink ID="hypVisit" runat="server" ImageUrl="Images/WEBSITE_UP.jpg" Target="_blank">HyperLink
                </asp:HyperLink>
onmouseover = WEBSITE_DOWN.jpg

Rob

"Man is the best computer…and the only one that can be mass produced with unskilled labour”
0
Elmbrook
5/5/2009 6:14:19 AM
📁 asp.net.web-forms
📃 93655 articles.
⭐ 6 followers.

💬 6 Replies
👁️‍🗨️ 5558 Views



You can use styles.
<style type="text/css">
a:hover{ background-image:url }
</style>

Bind GridView to Dynamically created DataTable | Bind DataTable to DropDownList

My Blog
-1
shahed
5/5/2009 6:19:08 AM

You need to add the onmouseover and onmouseout attributes to the hyperlink:
hypVisit.Atrributes.Add("onmouseout", "mouseout()");
hypVisit.Atrributes.Add("onmouseover", "mouseover()");
Finally add some JavaScript:
<script language="JavaScript" type="text/javascript">
<!--

function mouseover()
{
document[YOUR-IMAGE-NAME].src = "mouseoverimage.jpg" );
}

            

function mouseout()
{
document[YOUR-IMAGE-NAME].src = "mouseout.jpg" );
}

// -->
</script>
Give that a try.

Sincerely,
Malcolm Sheridan
Microsoft Certified Solution Developer
Please remember to click "Mark as Answer" on the post that helps you, and to click "Unmark as
Answer" if a marked post does not actually answer your question.
2
malcolms
5/5/2009 6:19:36 AM

hi
please go with above mentioned solution it is perfect
0
hiral
5/5/2009 6:31:10 AM

Place the below code on page_load event. 
hypVisit.Attributes.Add("onMouseOver","this.firstChild.src='/Images/WEBSITE_DOWN.jpg")

Please mark it as answer if it resolves the issue.

visit: http://technicalsol.blogspot.com
1
sumitd
5/5/2009 6:32:09 AM

Hi,try this:<asp:HyperLink ID="hypVisit" onmouseover="changeImage()" runat="server" ImageUrl="Images/WEBSITE_UP.jpg" Target="_blank">HyperLink
</asp:HyperLink> function changeImage()
{
var image = document.getElementById("<%=hypVisit.ClientID %>");image.imageurl = "ImageUrl"; //Give your image url here
}
For mouseover event you will not get intellisence then only it will work.You can write that event.
Thanks,
Khushboo Nayak
Please Mark as Answered if this helps you.
-1
khushi_nayak
5/5/2009 6:41:40 AM

 ok, I have tried all the solutions and they don't seem to be working.
I have swap image code already (Dreamweaver creates it) and that works with other things.
    function MM_swapImage() { //v3.0
        var i, j = 0, x, a = MM_swapImage.arguments; document.MM_sr = new Array; for (i = 0; i < (a.length - 2); i += 3)
            if ((x = MM_findObj(a[i])) != null) { document.MM_sr[j++] = x; if (!x.oSrc) x.oSrc = x.src; x.src = a[i + 2]; }
    }
     function MM_swapImgRestore() { //v3.0
        var i, x, a = document.MM_sr; for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc;
    }
 
My hyperlink which does not work is the following
                <asp:HyperLink ID="hypVisit" runat="server" ImageUrl="Images/WEBSITE_UP.jpg" Target="_blank" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('hypVisit','','Images/WEBSITE_OVER.jpg',1)">HyperLink
                </asp:HyperLink>
My Image button which does work has the following
<asp:ImageButton id="btnEmail" runat="server" onclick="btnEmail_Click" imageurl="Images/EMAIL_UP.jpg" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btnEmail','','images/EMAIL_OVER.jpg',1)" />
                
From that, can anybody work out why it is not working or get it working?

Rob

"Man is the best computer…and the only one that can be mass produced with unskilled labour”
1
Elmbrook
5/5/2009 6:58:46 AM
Reply: