Categories
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.
<STYLE>
<!--
a:hover{color:#ff0080;}
-->
</STYLE>
<!--
a:hover{color:#ff0080;}
-->
</STYLE>
Listing #1 : HTML code. Download glnkcss (0.18 KB).
<STYLE>
<!--
a:hover{text-decoration:none;}
-->
</STYLE>
<!--
a:hover{text-decoration:none;}
-->
</STYLE>
Listing #2 : HTML code. Download glnkcss2 (0.19 KB).
<STYLE>
<!--
a:hover{text-decoration:bold;}
-->
</STYLE>
<!--
a:hover{text-decoration:bold;}
-->
</STYLE>
Listing #3 : HTML code. Download glnkcss3 (0.19 KB).
<STYLE>
<!--
a:hover{color:#ff0080;text-decoration:none;}
-->
</STYLE>
<!--
a:hover{color:#ff0080;text-decoration:none;}
-->
</STYLE>
Listing #4 : HTML code. Download glnkcss4 (0.2 KB).
<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>
<!--
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>
Listing #5 : JavaScript code. Download glowlink (0.43 KB).
-
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.
- "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).
- Change "ff0080" (current highlight color) in the script to a color number or name of your choice.
-
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>Listing #6 : HTML code. Download demo (0.22 KB).
Result: - var g_bGlowAllLinks = false;
To share this: BlinkBits | BlinkList | Blogmarks | Co.mments | Connotea | Del.icio.us | Digg | Facebook | FrankIt | Furl | Ma.gnolia | Newsvine | Reddit | Yahoo
Applicable Keywords : Cascading Style Sheets, Cascading Style Sheets 1, HTML, Internet Explorer, Explorer 4.x, Internet, JavaScript, World Wide Web