Links


[Know links, and just wanna know how to make them non-underlined, with color, etc? Click here to find out...]


Your Basic Link

Click here for my main page!
<a href=URL.htm OF WEBSITE> TEXT HERE</a>


Email Link

Click here to email me!
<a href="mailto:NAME@EMAIL.com"> TEXT HERE</a>


Emails With Subjects

Click here to email me!
<a href="mailto: NAME@EMAIL.com?subject=blah"> TEXT HERE</a>


Link With Toolbar Text

Main page
<a href="main.asp" OnMouseOver="window.status='TEXT'; return true;">LINK TEXT</a>


Mouseover Link

Main page
<a href="main.asp" onmouseover="parent.location='URL'"> TEXT HERE</a>


Mouseover Link: BG

Change the background
<a href="main.asp" onMouseOver="var bg=prompt('TEXT'); document.bgColor=bg"> TEXT HERE</a>


Mouseover Link: Pop Up

Click here
<a href="main.asp" onMouseover="alert('TEXT')"> TEXT</a>


Re-Direction Link

(When you go to the site, it automatically
waits a few seconds then goes to the next site)


<META HTTP-EQUIV="Refresh" CONTENT="6; URL=URL.htm HERE">


Drop-Down Link List

<form><select name=select size="1" style="background-color:COLORHERE; font size:#pt; font-family:FONTHERE; color:COLORHERE"onchange="location.href= (form.select.options[form.select.selectedIndex].value)"> <option value="URL">page link</option> <option value="URL">page link</option> <option value="URL">page link</option> </select></form>


Drop-Down List (TARGET)

<script language="javascript"> function jump(form) { var myindex=form.menu.selectedIndex if (form.menu.options[myindex].value != "0") { window.open(form.menu.options[myindex].value, target="TARGET NAME GOES HERE"); }}//--></script> <form name=""> <select name="menu" style="background-color:COLORHERE; font size:#pt; font-family:FONTHERE; color:COLORHERE" size="1" onchange="jump(this.form)"> <option value="URL HERE">TEXT</option> <option value="URL HERE">TEXT</option> <option value="URL HERE">TEXT</option> <option value="URL HERE">TEXT</option> </select></form>

Changing Link Styles


You can change how ALL your links look:
  • just when its normal (A:LINK),
  • once you visited it (A:VISITED),
  • when you click on it (A:ACTIVE),
  • when you put your mouse on it (A:HOVER).

    The following is the main code. Put it ONCE on your page, and it changes ALL your links. Whatever interesting style code you want to do, put that particular code where it says "text-decoration:none"


  • <STYLE type="text/css"><!-- A:link{color:COLOR;text-decoration:none} A:visited{color:COLOR;text-decoration:none} A:active{color:COLOR;text-decoration:none} A:hover{color:COLOR;text-decoration:none} --></STYLE>
    See where it says "text-decoration:none"? That can be changed to many different codes, which make links underlined, bold, italic, different colors, etc. You can change any, or all of the text-decorations. If you want to, replace the part where it says "text-decoration:none" on each line with one of the following codes. OR if you leave it as it is, the links will be plain, non-underlined. You can also put more than one text decoration on each section.

    Text Decorations For Links
    Code To Replace "text-decoration:none" With
    Which Makes...
    text-decoration:underline
    underlined
    text-decoration:underline overline
    underline & overline
    background-color:COLORHERE
    background color
    text-decoration:line-through
    slashed out
    cursor:crosshair
    cross cursor
    cursor:n-resize
    cursor points up
    cursor:s-resize
    cursor points down
    cursor:w-resize
    cursor points left
    cursor:e-resize
    cursor points right
    cursor:wait
    hourglass cursor
    font-weight:bold
    bold font
    font-weight:italic
    italics text
    font-size:#pt
    sized text
    Related Sites