We've moved!
Host4Post has shifted over to an SSD VPS, to speed up your site. If you're seeing this message, then you're seeing the new server on any domain that is pointed to our nameservers.


Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
TUTORIAL: Make Your Links Glow
Author Message
NNT_ Offline

Banned
325
Posts:
Oct 2010
Joined:
Thanks: 0
Given 0 thank(s) in 0 post(s)
Post: #1
TUTORIAL: 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:


Glowing Like This!


1.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.

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

Quote:Listing #1: HTML code. Download glnkcss.zip (0.18 KB).



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

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

Quote:Listing #2: HTML code. Download glnkcss2.zip (0.19 KB).


To make links bold, use:

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

Quote:Listing #3: HTML code. Download glnkcss3.zip (0.19 KB).


To combine two of the above effects:

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

Quote:Listing #4: HTML code. Download glnkcss4.zip (0.20 KB).


_______________________________________________________________________________

2. 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.

Code:
<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>


Quote:Listing #5: JavaScript code. Download glowlink (0.43KB).


3. 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.

4. How to change the highlight color

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


5. 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:


Code:
<a href="http://yourwebsite.com/links/"
   onmouseover="gl_high();"
   onmouseout="gl_norm();">
Glowing Link
</a>

Quote:Listing #6: HTML code. Download demo (0.22KB).

Result:

Glowing Link


THANKS BECAUSE OF YOUR READING !!!
[color=#006400]THANKS BECAUSE OF YOUR READING !!!
11-20-2010 01:15 AM
Visit this user's website Find all posts by this user Quote this message in a reply
lasr Offline
Registered

Junior Member
14
Posts:
Jan 2011
Joined:
0
Reputation:
Thanks: 0
Given 0 thank(s) in 0 post(s)
Post: #2
TUTORIAL: Make Your Links Glow

Hi there, i've try he demo.zip, but file hasn't extention.
What kind of file it's ??
Tkz
01-27-2011 01:52 AM
Find all posts by this user Quote this message in a reply
Enarsee Offline
Retired Staff

Retired Staff Member
3,648
Posts:
Oct 2010
Joined:
0
Reputation:
Thanks: 0
Given 0 thank(s) in 0 post(s)
Post: #3
TUTORIAL: Make Your Links Glow

(01-27-2011 01:52 AM)lasr Wrote:  Hi there, i've try he demo.zip, but file hasn't extention.
What kind of file it's ??
Tkz

Open it in notepad.
01-27-2011 02:09 AM
Visit this user's website Find all posts by this user Quote this message in a reply
bopjesvla Offline
Registered

Member
154
Posts:
Dec 2010
Joined:
0
Reputation:
Thanks: 0
Given 0 thank(s) in 0 post(s)
Post: #4
TUTORIAL: Make Your Links Glow

Quote:
Code:
<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>

You didn't really explain the code. It's a very complicated way of adding an onMouseOver and an onMouseOut.

This might be easier to begin with:

Code:
<a href="javascript:;" onmouseover="this.style.color = '#F00'" onmouseout="this.style.color = '#00C'" style="color:#00C">

Explanation:

Code:
href="javascript:;"

j; makes the link do nothing, but this way it does act like a hyperlink, not as plain text. If you want to link to google.com you can enter "http://www.google.com", if you want to go to index.html in the same folder you can enter "index.html".

Code:
style="color:#00C"

This changes the hyperlink color to the default hyperlink color, but some browsers might change that to torture humanity. Now you're sure. With style="some CSS" you can change the Cascading Style Sheets of the element.

Code:
onmouseover="this.style.color = '#F00'"

"this.style.color = '#F00'" is javascript. The client's browser should handle it. The "this" keyword refers usually to the element you're currently modifying. In this case, it's the hyperlink itself. Almost every CSS property has a twin in javascript. Most properties are changed with "[element].style.property = value".
This changes the color to red when you move the mouse over the element. Colors are made with three values: red, green and blue. But the range isn't 0 to 9. It's 0 to F. The oppurtunities are 0123456789ABCDEF, where 0 is the darkest and F is the brightest. #FF0: red and green are full, no blue -> yellow. #F80 is red full, green in the middle (8/16) and no blue -> orange.

Code:
onmouseout="this.style.color = '#00C'"

This changes the color back when you leave the element with your mouse. If you change the style="color:#00C" you also should change this color.
01-27-2011 04:36 AM
Find all posts by this user Quote this message in a reply
Razrbackfan5 Offline
Registered

Junior Member
11
Posts:
Apr 2011
Joined:
0
Reputation:
Thanks: 0
Given 0 thank(s) in 0 post(s)
Post: #5
TUTORIAL: Make Your Links Glow

Doesnt glowing text only work for Internet Explorer?
04-22-2011 10:52 AM
Find all posts by this user Quote this message in a reply
nando Offline
Registered

Member
166
Posts:
Feb 2011
Joined:
0
Reputation:
Thanks: 0
Given 0 thank(s) in 0 post(s)
Post: #6
TUTORIAL: Make Your Links Glow

Yeah, It look retro glowing.
I need more inprovement for my standard. I like java, it more light and easier.

Thanks
04-22-2011 12:35 PM
Find all posts by this user Quote this message in a reply
jcifuen Offline
Registered

Junior Member
34
Posts:
Aug 2011
Joined:
0
Reputation:
Thanks: 0
Given 0 thank(s) in 0 post(s)
Post: #7
TUTORIAL: Make Your Links Glow

I used a lot these effects when performing my first web pages with FrontPage, and I still cool. Remember this is appreciated, and now use Wordpress ...
08-24-2011 03:52 AM
Find all posts by this user Quote this message in a reply
ZayDaBeast Offline

Banned
163
Posts:
Jun 2011
Joined:
Thanks: 0
Given 0 thank(s) in 0 post(s)
Post: #8
TUTORIAL: Make Your Links Glow

I like this is really helpful im going to use it.
09-28-2011 05:09 AM
Find all posts by this user Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)