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. 3 followers. Follow

6 Replies
3671 Views

Similar Articles

[PageSpeed] 10

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:

Web resources about - onmouseover/onmouseout event on Hyperlink - asp.net.web-forms

Twitter OnMouseOver Error Causes Popups
A Twitter "onMouseOver" error propagated on Twitter early this monring. The error allowed "tweets" containing blocked-out text to appear on Twitter. ...

Twitter Explains Away “onMouseOver” Attack
After receiving numerous reports from the twitterverse and blogosphere, Twitter has finally posted an explanation regarding the “onMouseOver” ...

'Rainbow tweets' start hammering Twitter after onMouseOver exploit discovered
Oh dear. Some wise guys have discovered a JavaScript exploit in Twitter's web interface, which uses an onMouseOver instruction to hijack your ...

Twitter Attack Using onmouseover Shows Why I Hate Mouse Overs
... found that it was really easy to fall prey to an exploit that took advantage of something that is all too common on so many sites, using onmouseover ...

OnMouseOver XSS plagues Twitter - Update
A new wave of Twitter attacks, which make use of an XSS vulnerability in Twitter's web client, is causing trouble for Twitter users

'OnMouseOver' Twitter Security Flaw Takes Over Twitter.com (UPDATED)
UPDATE: Twitter has published a blog on the "OnMouseOver incident," explaining what happened, why, and how Twitter responded.UPDATE: Twitter ...

Twitter: Site Update Unleashed 'OnMouseOver' XSS Exploit
Twitter on Tuesday blamed this morning's "onMouseOver" incident on a recent site update that unknowingly resurfaced a site exploit it discovered ...


Warning: Onmouseover Twitter Security Flaw Is Wreaking Tweet Havoc [Updated]
BREAKING: Post javascript into your status update on Twitter and you can make something appear in the pop-up as a user mouses over your tweet. ...

Techmeme: Twitter ‘onmouseover’ security flaw widely exploited (Graham Cluley/Sophos)
The web's technology news site of record, Techmeme spotlights the hottest tech stories from all around the web on a single page.

Resources last updated: 1/20/2016 6:37:44 PM