Home >> Tutorials >> Javascript tutorials
How do I remove underlines from my links?By default, every link got underline. But We can use the text-decoration property to remove the underlines. By default, the browser will set the text-decoration of an <a> tag to underline. To remove the underline, simply set the text-decoration: none;Put the following code in head section.The links will appear with no under lines.
put the following code in head section.
<Style>
<!--
a{text-decoration:none}
a:hover { text-decoration: underline}
//-->
</style>
Top
How do I create a link that changes color on mouseover?Did you ever wonder how to change the link color on mouse over? To create this effect, we style the :hover and :active pseudo-classes differently than the other pseudo-classes of the anchor tag.
Put the code in <head> </head> section.(1)Change link color on mouse over<STYLE TYPE="text/css">
<!--
A:link {color: blue}
A:hover { color:red }
//-->
</style>(2)Change link background on mouseover
YOu can also change the link background color on mouse over.
<style>
<!--
A:hover {color:white;background-color: blue }
A:active {color:red;background-color: yellow }
//-->
</style>
Top
Giving link message on a layer (This works only in IE4.x and Netscape 4.x)
The source code is given below. To customize it, include your links between <body> and </body> tags in the following format:<body>
.
.
<a href="http://www.yourlink1.com" onMouseover="UpdateMsgBar('MsgBar','Visit my favorite site1 !')"
onMouseout="HideMsgBar('MsgBar')">CNN</a><br>
<a href="http://www.yourlink2.com" onMouseover="UpdateMsgBar('MsgBar','Visit my favorite site2 !')"
onMouseout="HideMsgBar('MsgBar')">CNN</a><Br>.
.
</body>Complete Source Code:<script>
ns4x = (document.layers)? true:false
ie4x = (document.all)? true:false
function UpdateMsgBar(LayerHandle,Msg) {
if (ns4x) {
var MsgBarLayer = document.layers[LayerHandle].document
MsgBarLayer.open()
MsgBarLayer.write(MSG)
MsgBarLayer.close()
ShowMsgBar(LayerHandle)
}
else if (ie4x){ document.all[LayerHandle].innerHTML = MSG
ShowMsgBar(LayerHandle)
}
}function ShowMsgBar(LayerHandle) {
if (ns4x){ document.layers[LayerHandle].visibility = "show"
}
else if (ie4x){ document.all[LayerHandle].style.visibility = "visible" }
}
function HideMsgBar(LayerHandle) {
if (ns4x) document.layers[LayerHandle]Visibility = "hide"
else if (ie4x) document.all[LayerHandle].style.visibility = "hidden"
}</script>
<div id="MsgBar" STYLE="position:absolute;visibility:hide;left:50; top:100;width:100;background-color:#C0C0C0; layer-background-color:#C0C0C0;"></div>
<body>
<a href="http://www.cnn.com" onMouseover="UpdateMsgBar('MsgBar','Visit CNN for LATEST NEWS!')"
onMouseout="HideMsgBar('MsgBar')">CNN</a><Br>
<a href="http://www.excite.com" onMouseover="UpdateMsgBar('MsgBar','Get web updates from
Excite!')" onMouseout="HideMsgBar('MsgBar')">Excite</a> <Br>
<a href="http://www.yahoo.com" onMouseover="UpdateMsgBar('MsgBar','Search the web using Yahoo!')"
onMouseout="HideMsgBar('MsgBar')">Yahoo!</a>
</body>
Top
Reload current pageEg:
Click here to Reload this pageSource Code:
<html>
<head></head>
<body>
<script language="Javascript">
<!--
function ReloadPage() {
document.location.reload()
}
//-->
</script>
<a href="javascript:ReloadPage()">Reload this page</body>
</html>
Top
Going to location on mouseover
Pass the mouse over the link. It will automatically go to the location.Yahoo<body>
<a href="http://www.yahoo.com" onMouseover="window.location=this.href">Yahoo!</a>
</body>
Top
Viewing source codeEg:
Click here to view source code of current web page!Source Code:<body>
<script>
<!--
function ShowSourceCode(){
window.location="view-source:"+window.location
}
//-->
</script>
<a href="javascript:ShowSourceCode()">Click to view source code of current web page!</a>
<body>
Top
|
Page contents: itechies.net – Learn how to remove Link Underline of a link on mouse over ,change link color on mouse over,Change link background color on mouse over, show link message on a layer, and go to location(load url) on mouse over |
