Sami's Site: CSB - Trellix Support and Tests
previous    next
Test Index   ·   CSB4 Rollover Links   ·   Link Styles 1   ·   Link Styles 2   ·   Link Styles 3   ·   iFrame Tutorial - IFrames described in detail!   ·   Form sample in iFrame   ·   Arrowhead   ·   Excel   ·   Color Blind   ·   Websafe Fonts and tests   ·   Make an Alert Box   ·   Webgem Placeholder Images   ·   LINK HOVER TOOLTIP   ·   OverLIB tooltip   ·   Disguise Email   ·   Quote of the Month   ·   Map to your location!   ·   Link Border Test   ·    FORUM

Link Styles 2
Change groups of links on a page
Column 1:

This code allows a group of links to have a special effect

ON MOUSEOVER:
Overline and Underline
Font changes to UPPERCASE
Changes the font color
Column 2:

This is a modified version of the  first code.  

ON MOUSEOVER:
Font changes to UPPERCASE
Changes the font color
Adds a background color
Column 3:

Place this code at the top of the page to remove underlines from all the links on the page.  
Note: If publishing with frames use it in all the frames or only one.
ON MOUSEOVER:
Changes the font color
See sample on the index page
Roll your mouse over these:

Roll your mouse over these:
Column 3 code:
THIS VERSION UPDATED!!!
NOW WORKS IN FIREFOX!
<STYLE>
<!--
A:link, A:visited, A:active
{ text-decoration: none }
A:hover
{ color: #CC0066; text-decoration: none }
U {text-decoration: none}
-->
</STYLE>

Style codes for the navigational links at the top of these sample
pages make them not match the rest of the links on the page
Putting links in a table?  Want a background image too?
Samples, VERY easy instructions, and script provided.
What color do you want your links to be?   

GENERAL INSTRUCTION:
If you have more than one set of codes on a page like this one does, then rename the next version so they do not interfere with each other. Notice that in the scripts, the links are named menucont  and menucont2.
Each group of links must have a Style setting section of code, then each link is added.   Change the Style codes at the beginning of the code to adjust the color of the font, size, bold, underline, overline, uppercase, etc. The two link lists above show some of the adjustments you can do...just play with the codes until you find the right combination.
List your links together
You can choose to open a link several ways:
in the same window with target="_top"     [Try the Contact Sami links - but remember to click BACK]
in a new window with target="_blank"       [Try the Iframe links]
in a particular frame target="TRLX_Middle"
(if publishing with frames - this page is not published with frames)
in a particular window with target="FRAME1"  (See iFrame examples)
Input a statement about the link into the title=""
These codes are placed into your webpage using Insert > HTML (or webgem in Trellix)


Column 1 code:
To capture the code, press Select All then COPY the contents.
I have made notes in code below it and it will effect functionality!
Select All

<!--     Code copied from: Samisite.com -->

<style type="text/css">
.menulinks {position:relative;}
#menucont a{color:#660099; font-weight:bold; text-decoration:none;}
#menucont a:hover{color:#CC0066 ; font-weight:bold; text-decoration:underline overline; text-transform: uppercase;}
</style>

<BODY>

<div id="menucont">
  <!--  Put all links between <center> </center> to get those links align center for older browser -->
  <a href="http://www.samisite.com/test-csb2nf/id43.htm"  TARGET="_blank"    TITLE="Iframe Tutorials"  id="a1" class="menulinks">Iframe Tutorial</a><br>
  <a href="http://www.samisite.com/contact.htm"  TARGET="_top"    TITLE="Contact Sami"  id="a2" class="menulinks">Contact Sami</a><br>
  <a href="http://www.samisite.com"   TARGET="_top"    TITLE="Samisite.com Home Page - Website Tutorials"  id="a3" class="menulinks">Samisite Home Page</a><br>
</div>

Column 2 code:
To capture the code, press Select All then COPY the contents.
I have made notes in code below it and it will effect functionality!
Select All
<!--     Code copied from: Samisite.com -->

<style type="text/css">
.menulinks {position:relative;}
#menucont2 a{color:#993300; font-weight:bold; text-decoration:none;}
#menucont2 a:hover{color:#CC3300 ; font-weight:bold; text-decoration:none; text-transform: uppercase; background-color:yellow;}
</style>
</HEAD>

<BODY>

<div id="menucont2">
  <!--  Put all links between <center> </center> to get those links align center for older browser -->
  <a href="http://www.samisite.com/test-csb2nf/id43.htm"  TARGET="_blank"    TITLE="Iframe Tutorials"  id="a1" class="menulinks">Iframe Tutorial</a><br>
  <a href="http://www.samisite.com/contact.htm"  TARGET="_top"    TITLE="Contact Sami"  id="a2" class="menulinks">Contact Sami</a><br>
  <a href="http://www.samisite.com"   TARGET="_top"    TITLE="Samisite.com Home Page - Website Tutorials"  id="a3" class="menulinks">Samisite Home Page</a><br>
</div>