Friday, November 28, 2008

How to display hyperlink using label in html page

Cascading style sheet helps in this kind of stuff. Indirectly displaying a label as hyperlink is anchor tag. But it differs much more in actual attributes or properties with anchor tag.
Ex:-

.hyperlnk
{
color:Blue;
text-decoration:underline;
}


When the above style class (hyperlnk) is applied as cssclass attribute to a label, it looks like simillar to an anchor tag.
Further more styles can be applied on mouse over/on mouse out of label to have more user friendly response.

In this case say if we would like show hand cursor on mouse over , we just say as onmouseover=”this.style.cursor=’hand’;”.
Also when user clicks on the hyper link to open window with url of label.
<label class="hyperlnk" id="lblLnk" onmouseover="this.style.cursor='hand';" onclick="window.open(this.innerText);">http://www.google.com</label>



Out put:



Now when user clicks on the above link, window opens with google.com as page.

No comments: