To capture the code, press Select All then COPY the contents.
I have made notes in code below it and it will effect functionality!
|
#glowg - put these two lines in the style code for green
#glowgu - put these two lines in the style code for green, and no underline
|
|
#glowo - put these two lines in the style code for orange
#glowou - put these two lines in the style code for orange, and no underline
|
Color change to green
|
#glowc - put these two lines in the style code no underline to underline
|
Notes about this code:
Choose the type of glow you want (glowg, glowu, glowo, glowu, glowc) and put those two lines into the style. If you will not be using the others, you can safely delete those lines of the code.
Adjust the size of the link. In this sample, some links are longer so must be set a little wider (425)
Change RED to your link information
Don't want the link underlined? to the style code add: text-decoration:none;
These links have the dotted outline removed when you click the link: onfocus="this.blur()"
You can change the TARGET destination to something different:
TARGET="_top" is the same window TARGET="_blank" is a new window
Each of these links must have it's own id number. If you have only one link, then use id="a1" . I have 4 links in this sample, so a1 through a5 were used. (a6 is used in the link in the black box above!)
Yes, you can have other colors for glowing text. Just change the text hex color codes!
<!-- Original code: Samantha Conway -->
<!-- Please keep credit in the code when you use it! -->
<style type="text/css">
.glowlinks {position:relative;}
#glowg a{width: 400px; height: 30px; color: #006400; }
#glowg a:hover{width: 400px; height: 30px; color: #40FF40; filter: glow(color=#00C000, strength=3); }
#glowgu a{width: 425px; height: 30px; color: #006400; text-decoration:none; }
#glowgu a:hover{width: 425px; height: 30px; color: #40FF40; filter: glow(color=#00C000, strength=3); text-decoration:none;}
#glowo a{width: 425px; height: 30px; color: #FF6600; }
#glowo a:hover{width: 425px; height: 30px; color: #FFFFCC; filter: glow(color=#FF3300, strength=3); }
#glowou a{width: 400px; height: 30px; color: #FF6600; text-decoration:none;}
#glowou a:hover{width: 400px; height: 30px; color: #FFFFCC; filter: glow(color=#FF3300, strength=3); text-decoration:none;}
</style>
<div id="glowg">
<a href="http://www.samisite.com/" TARGET="_blank" TITLE="Home page" onfocus="this.blur()" id="a1" class="glowlinks">Filter Glow on Mouseover - open link in new window</a><br>
</div>
<div id="glowgu">
<a href="http://www.samisite.com/" TARGET="_top" TITLE="Home page" onfocus="this.blur()" id="a2" class="glowlinks">Filter Glow on Mouseover - open link in SAME window</a><br>
</div>
<div id="glowo">
<a href="http://www.samisite.com/" TARGET="_top" TITLE="Home page" onfocus="this.blur()" id="a3" class="glowlinks">Filter Glow on Mouseover - open link in same window</a><br>
</div>
<div id="glowou">
<a href="http://www.samisite.com/" TARGET="_blank" TITLE="Home page" onfocus="this.blur()" id="a4" class="glowlinks">Filter Glow on Mouseover - open link in new window</a><br>
</div>
<div id="glowc">
<a href="http://www.samisite.com/" TARGET="_blank" TITLE="Home page" onfocus="this.blur()" id="a5" class="glowlinks">Two color - no underline orange to underline green</a><br>
</div>
|