Saturday, October 25, 2008

How to show hyperlink on mouse over?

There can be instants in web sites where when user places mouse cursor over a component like label should then display a hyper link and on click of which should open a window.

For this kind of requirement it is better to apply style sheet on mouse over of label and java script to open a window on click.

Style sheet :-

Mouse out style sheet

.lbl_mouseout
{
text-decoration:none;
color:Black;
}

Mouse over style sheet

.lbl_mouseover
{
text-decoration:underline;
cursor:hand;
color:Blue;
}


In aspx.cs page

//Javascript to handle mouse and mouse out events
lbl.Attributes.Add("onmouseover", "this.className='lbl_mouseover'");
lbl.Attributes.Add("onmouseout", "this.className='lbl_mouseout'");

//Javascript to handle on click of the label
lbl.Attributes.Add("onclick", "window.open('destinationurl.aspx'");

1 comment:

mulukh said...

I only have access to a limited html editor, and can't use css. Is there a way to do this without it?