Nw54-Tutorials pretty linking examples

Different Ways How A Link Could Look Like

You guys have a webaddress which you want to put somewhere to your forum?
You have an URL, something like this:

http://www.network54.com/Hide/Index/1000,

and want to make it appearing as link or a 'pretty' link?

Write in your forum's source code these Html-tags:
<a href="http://www.network54.com/Hide/Index/10000">NAME of LINK</a>
and it will turn into this: NAME of LINK

• You want to open the link into a new window?
Add a target="_blank".
<a href="http://www.network54.com/Hide/Index/10000" target="_blank">NAME of LINK</a>

With a little CSS you can design these 'normal' links in sooo many ways. For example look at the navi-links on this site. You can give links a background and/or a changing color whith a mouseOver effect. Adding borders will let them look like buttons etc... Just as you like.

Try out the Links. Use your browser Back button to come here again.

• A Picture As Link »

 <a href="http://www.network54.com/Hide/Index/10000"><img src="http://www.network54.com/Realm/Rat_Smilies/xshow.gif" alt="Netw54 Support Forum Index" border=0></a>

• A Button As Link

<button type="button" onclick="location.href='http://www.network54.com/'">www.Network54.com</button>

• Button With Picture

<button type="button" onclick="location.href='http://www.network54.com/'"><img src="http://www.network54.com/Realm/Rat_Smilies/xshow.gif" alt="Admin Forum Index" /> Network54.com</button>

• Java-Script Button

» Note: You cannot see in the browser's status whereto that link goes.
You cannot open to a new window via context menu (right mouse click).
If your visitor has disabled JavaScript on their browser the link would be useless.

<script language="JavaScript" typ="text/javascript">
 <!--
function go(link) {
window.location.href = link;
}
//  -->
</script>
<input type="image" src="http://www.network54.com/Rea
lm/n54_files/icon_arrow.gif" height="25" width="40" onclick="go('http://w
ww.network54.com/Hide/Index/10000')" title="Click" />

• Input Type Radio Links

www.Network54.com

<input type="radio" name="link" onclick="location.href='http://www.network54.com/'"> www.Network54.com

• Links In A DropDown Menu

<script language="javascript" type="text/javascript">
<!-- 

 function jump(form) 

 {    

  var myindex = form.select.selectedIndex 

   window.open(form.select.options[myindex].value);  

  }      

-->  

</script> 

<form action=""> 

<select name="select" onchange="jump(this.form)">  

<option selected="selected">Will Open In A New Window</option>

<option value="http://www.network54.com/">www.Network54.com</option> 

<option value="http://www.network54.com/Login">www.network54.com/Login</option> 

 </select> </form>

• Hand-Made Links

From Mr. Pip's Scripts Page:

<form onSubmit="window.open(this.url.value); return false">
Address
<input type=text name=url size=40 value="http://" onfocus="this.select()">
&nbsp;
<input type=submit value=" Go ">
</form>

• Links In A Table

for the Table-script or have a look at this Tutorial about 'making' Tables:

www.network54.com/Login	www.network54.com/Login	www.network54.com/Login
www.network54.com/Login	www.network54.com/Login	www.network54.com/Login
www.network54.com/Login	www.network54.com/Login	www.network54.com/Login

• Links In A Table With Background-Graphic

www.network54.com

www.network54.com/

• Links In A List

• One Page Back

This one was posted by JIIM at the Network54 Forum
He wrote:
"Place the following Javascript in the "return to index" box near the bottom of the "edit options" page..."

<a href="JavaScript:history.back();">Back one step</a>

When do you need such script?
Imagine a forum where you have to scroll down to the threads at the bottom of the page, and after reading a message you want to go back to exact that position - which could be done easily by hitting the browser's back-button, or you have choosen to open a new page from your context-menu to read - but when you hit "Back To Index" you will go back to the top of the page, and have to scroll down again.
History.back has the same function as if using the browser-back-button.

Could be modified by using an image between the <a > + </a > - tags. Adding a TITLE-tag would be nice (the little tooltip-box which appears when mouse-cursor hovers the link).

Links, Tutorials And Scripts