Go Back   Wiki NewForum > Career Forum > Tech Forum & Tutorial > HTML Forum & Tutorial

HTML Forum & Tutorial End-To-End Process HTML / XHTML / CSS

 
Views: 1640  
Thread Tools Rating: Thread Rating: 1 votes, 3.00 average. Display Modes
Prev Previous Post   Next Post Next
  #1  
Old 08-11-2010, 02:58 PM
bholas bholas is offline
Award Winner
 
Join Date:
Apr 2010
Posts: 5,181
Default How to make your links glow

So you're adding cool effects to your page... how about a way to make your links glow? Not only this would look great, but it could also help your visitors to see your links better.

If you're using Explorer 4.x or compatible browser, move your mouse over the following link to see a glowing link in action:

Creating glowing links using style sheets

The simplest way to make all links on a page glow on mouse movement is to insert the following style sheet tags between <HEAD> and </HEAD> tags. You can change "ff0080" (current highlight color) to a color number or name of your choice.

<STYLE>
<!--
a:hover{color:#ff0080;}
-->
</STYLE>

To create other effects, such as removing the underline from links when the mouse is over them, use the following style sheet tags:

<STYLE>
<!--
a:hover{text-decoration:none;}
-->
</STYLE>

To make links bold, use:

<STYLE>
<!--
a:hover{text-decoration:bold;}
-->
</STYLE>

To combine two of the above effects:

<STYLE>
<!--
a:hover{color:#ff0080;text-decoration:none;}
-->
</STYLE>

Creating glowing links using JavaScript

Simply copy and paste the following code on to your page, between <BODY ...> and </BODY> tags, to make all links on your page glow when the mouse is over them.

<SCRIPT TYPE="text/javascript">
<!--

var g_bGlowAllLinks = true;

var g_bGlowLinks = false;

if(document.body)
{
g_bGlowLinks = true;
}

if(g_bGlowLinks && g_bGlowAllLinks)
{
document.body.onmouseover = gl_high;

document.body.onmouseout = gl_norm;
}

function gl_high()
{
if(g_bGlowLinks)
{
if(event && event.toElement)
{
s = event.toElement;
if(s.style && ("A" == s.tagName))
{
s.oldcol = s.style.color;
s.style.color = "ff0080";
}
}
}
}

function gl_norm()
{
if(g_bGlowLinks)
{
if(event && event.fromElement)
{
s = event.fromElement;
if(s.style && ("A" == s.tagName))
{
s.style.color = s.oldcol;
}
}
}
}

//-->
</SCRIPT>

How does it work?


* "gl_high()" and "gl_norm()" functions are used to highlight (change color of the link to a brighter color) and normalize links (change the link color to its normal color).

This is possible because of style sheets and JavaScript elements that expose tags through event properties:

event.toElement.style.color and
event.fromElement.style.color

given that the element in question is an anchor tag:

if("A" == event.toElement.tagName) and
if("A" == event.fromElement.tagName)

* Then we optionally assign document.body.onmouseover property to gl_high and document.body.onmouseout property to gl_norm to make the browser call gl_high if the mouse is over any link or gl_norm if the mouse is moved out of any link.


How to change the highlight color


Change "ff0080" (current highlight color) in the script to a color number or name of your choice.


How to make only the selected links glow

Set g_bGlowAllLinks to false:


var g_bGlowAllLinks = false;



Add following parameters to the links that you want to glow:


onmouseover="gl_high();"
onmouseout="gl_norm();"



For example:

<a href="http://www.chami.com/tips/"
onmouseover="gl_high();"
onmouseout="gl_norm();">
Glowing Link
</a>

Reply With Quote
 

Tags
html tips

New topics in HTML Forum & Tutorial

Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Forum Jump


Powered by vBulletin® Version 3.8.10
Copyright ©2000 - 2019, vBulletin Solutions, Inc.