|
#1
08-11-2010, 02:58 PM
|
|||
|
|||
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> 
|
