Ultra fast cheap  linux and windows hosting
javascript tutorial Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

javascript tutorial
buy template
Home >> Tutorials >> Advanced javascript tutorials

Links:
 
Link Underline Remover Changing Linkcolor  Giving  link message on a layer
Reloading current page loading page on mouseover Viewing Source Code

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.


<style>

<!--

a{text-decoration:none}

//-->

</style>

To bring the underline back on mouseover? 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 page

Eg:

Click here to Reload this page

Source 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 code

Eg:
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
javascript tutorial
javascript book
Buy this book