Link Definitions Block

brianjw · February 10, 2007, 11:39:17 PM

Demo
DEMO: http://javascript.internet.com/navigation/indent-menu.html
The block labled Links. You cant miss it

Code

<head>

<style>
<!-- Begin
.BorderOnÃ,Â  { width:90px;
Ã,Â  Ã,Â  Ã,Â  Ã,Â  Ã,Â  Ã,Â Ã,Â  margin-left:10px;
Ã,Â  Ã,Â  Ã,Â  Ã,Â  Ã,Â  Ã,Â Ã,Â  border:1px solid #456789 }
.BorderOff { width:90px;
Ã,Â  Ã,Â  Ã,Â  Ã,Â  Ã,Â  Ã,Â Ã,Â  margin-left:0px;
Ã,Â  Ã,Â  Ã,Â  Ã,Â  Ã,Â  Ã,Â Ã,Â  border:1px solid #444444 }
A.mBlue:linkÃ,Â  Ã,Â  Ã,Â  {color:#FFFFFF; text-decoration:none;}
A.mBlue:visitedÃ,Â Ã,Â  {color:#FFFFFF; text-decoration:none;}
A.mBlue:activeÃ,Â  Ã,Â  {color:#FFFFFF; text-decoration:none;}
A.mBlue:hoverÃ,Â  Ã,Â Ã,Â  {color:#FF0000; text-decoration:underline;}Ã,Â  Ã,Â  Ã,Â  Ã,Â  
A.mGreen:linkÃ,Â  Ã,Â Ã,Â  {color:#FFFFFF; text-decoration:none;}
A.mGreen:visitedÃ,Â  {color:#FFFFFF; text-decoration:none;}
A.mGreen:activeÃ,Â Ã,Â  {color:#FFFFFF; text-decoration:none;}
A.mGreen:hoverÃ,Â  Ã,Â  {color:#FF0000; text-decoration:underline;} 
A.mYellow:linkÃ,Â  Ã,Â  {color:#FFFFFF; text-decoration:none;}
A.mYellow:visited {color:#FFFFFF; text-decoration:none;}
A.mYellow:activeÃ,Â  {color:#FFFFFF; text-decoration:none;}
A.mYellow:hoverÃ,Â Ã,Â  {color:#FF0000; text-decoration:underline;}Ã,Â  Ã,Â  Ã,Â  Ã,Â  Ã,Â  
//-->Ã,Â  Ã,Â  Ã,Â  Ã,Â  Ã,Â  Ã,Â Ã,Â  
</style>
<script language="JavaScript1.2">
<!-- Begin
offMessage = ""
function boxOn(which,message) {
if (document.all||document.getElementById) {
which.className = 'BorderOn';
if (document.getElementById) {
document.getElementById("Message").innerHTML = message
}
else {
Message.innerHTML = message;
Ã,Â  Ã,Â  Ã,Â  }
Ã,Â Ã,Â  }
}
function boxOff(which) {
if (document.all||document.getElementById) {
which.className = 'BorderOff';
if (document.getElementById) {
document.getElementById("Message").innerHTML = offMessage
}
else {
Message.innerHTML = offMessage;
Ã,Â  Ã,Â  Ã,Â  }
Ã,Â Ã,Â  }
}
//Ã,Â  End -->
</script>

</head>

<center><!-- Outer Container Table //-->
<table cellpadding="0" cellspacing="0" width="100">
<tr>
<td align="center">
<!-- Header Table // -->
<table cellpadding="3" cellspacing="0" bgcolor="#000000" class="BorderOff">
<tr>
<td>
<font color="#FEDCBA" size="2" face="Arial"><b>Links</b></font>
</td>
</tr>
</table>
<!-- End Header Table //-->
<!-- Menu Items Tables
Ã,Â Ã,Â  - To add more, just follow the pattern
Ã,Â Ã,Â  - Note class= in each <a href> to attach link style colors
//-->
<!-- Menu Item One Table //-->
<table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'A person who has spent alot of time helping us!')" onMouseout="boxOff(this)">
<tr>
<td>
<font color="#000000" size="2" face="Arial"><a class="mBlue" href="http://www.path-to-peace.com" target="_blank">Aku</a></font>
</td>
</tr>
</table>Ã,Â  
<!-- Menu Item Two Table //-->
<table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'This is what our website runs on!')" onMouseout="boxOff(this)">
<tr>
<td>
<font color="#000000" size="2" face="Arial"><a class="mBlue" href="http://www.simplemachines.org" target="_blank">Simple Machines</a></font>
</td>
</tr>
</table>
<!-- Menu Item Three Table //-->
<table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'This is what our content of our website runs on!')" onMouseout="boxOff(this)">Ã,Â  
<tr>
<td>
<font color="#000000" size="2" face="Arial"><a class="mGreen" href="http://www.tinyportal.co.uk" target="_blank">Tiny Portal</a></font>
</td>
</tr>
</table>
<!-- Menu Item Four Table //-->
<table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'A really cool website and is one of our friends!')" onMouseout="boxOff(this)">Ã,Â  
<tr>
<td>
<font color="#000000" size="2" face="Arial"><a class="mYellow" href="http://www.avalanchestyle.com" target="_blank">Avalanche Style</a></font>
</td>
</tr>
</table>
<!-- End Menu Items Tables //-->
<!-- Message Table //-->
<!-- Set the width= of this table the same as the overall width in the <style> //-->
<table cellpadding="1" cellspacing="0" bgcolor="#444444" width="90">
<tr>
<td>
<!-- Set the width= of this table to the overall width
Ã,Â  Ã,Â Ã,Â  in the style table minus 2x the border width; set
Ã,Â  Ã,Â Ã,Â  the height= long (large) enough to accommodate your
Ã,Â  Ã,Â Ã,Â  longest message //-->
<table cellpadding="3" cellspacing="0" bgcolor="#000000" width="88" height="100">
<tr>
<td align="left" valign="top">
<font id="Message" color="#CBA987" size="2" face="Arial"> </font>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Message Table //-->
</td>
</tr>
</table>
<!-- End Outer Container Table //-->
<!-- END OF MENU //--></center>

That is the code I use. You modify it the way you want.
Change the CSS for different colors, change the text for different link text and title, change the urls so the links link to the right place.

Instructions - Use in scriptblock and remember to use on left or right blocks unless modified to work in Centerblock or frontpage.
1. Copy the code above.
2. Paste it in a "scriptblock".
3. Choose "Use frame, but not title".
4. Choose "Do not allow block to collapse".
5. Activate the block.
6. Go to your homepage, see how it works, modify what you want, and your all set to go!

Support
If you need help with the html and css let me know and I can help you with it.
The CSS uses hex colors which is pretty easy and the html text and link is the easiest!

Brianjw

brianjw · February 11, 2007, 12:09:57 AM

Add to this block
You can add the following code to the bottom of the code i gave above and it will look like the demo.

Code Select


<script language="JavaScript"> 

function openDir( form ) { 

	var newIndex = form.fieldname.selectedIndex; 

	if ( newIndex == 0 ) { 

		alert( "Please select a location!" ); 

	} else { 

		cururl = form.fieldname.options[ newIndex ].value; 

		window.location.assign( cururl ); 

	} 

} 

</script> 

 

<table width=100% cellpadding=4 cellspacing=0 border=0>
<center><font size="1pt"><b>Visit pages on our website:</b></font>

<form name=form> 

	<tr> 

		<td nowrap> 

			<select name="fieldname" size="1" 

				onChange="openDir( this.form )"> 

				<option><b>Go to</b></option> 

				<option value=http://www.brianjwilson.com/index.php?action=arcade>Arcade</option> 

				<option value=http://www.brianjwilson.com/index.php?action=gallery>Gallery</option> 
				<option value=http://www.brianjwilson.com/index.php?action=shop>Shop</option>
				<option value=http://www.brianjwilson.com/index.php?action=links>Links</option> 
				<option value=http://www.brianjwilson.com/index.php?action=contact>Contact</option> 
				<option value=http://www.brianjwilson.com/index.php?action=tpmod;dl>Downloads</option>
				<option value=http://www.brianjwilson.com/index.php?action=usercp>User CP</option>
				<option value=http://brianjwilson.mail.everyone.net>E-mail</option> 
				<option value=http://www.brianjwilson.com/index.php?action=chat>Chat</option>
				<option value=http://www.brianjwilson.com/index.php?page=13>My Page</option> 
				<option value=http://www.brianjwilson.com/index.php?page=9>Comics</option> 
				<option value=http://www.brianjwilson.com/index.php?action=team>BWA Team</option> 
				<option value=http://www.brianjwilson.com/index.php?action=forum>Forum</option> 
				<option value=http://www.brianjwilson.com/index.php?action=Calendar>Calendar</option> 
				<option value=http://www.brianjwilson.com/index.php?action=pm>Inbox</option> 

			</select> 

		</td> 

	</tr> 

</form> 

</table></center>

To add just copy those codes to take away you delete some of those codes. Edit the titles and the urls and you're good to go!

Brianjw

brianjw · February 11, 2007, 01:02:33 AM

Change to block
You can change the code in the first post to the following code... I have done this so you will no longer see the above demo, a new demo link has been added.

Code Select


<head>
<style type="text/css">
<!--
#hotlist {
  border: 1px solid #dfdfdf;
  padding: 10px;
  width: 130px;
  text-align: left;
  color: gray;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

#hotlist a {
  color: gray;
  text-decoration: none;
}

#preview {
  text-align: center;
  display: none; /* do not change */
}

img.thumbnail {
  border: 1px solid #cccccc;
  cursor: pointer;
  width: 120px; /* change to your picture width */
  height: 90px; /* change to your picture height */
}

div#caption {
  font-size: 8pt;
}

.arrow {
  visibility: hidden; /* do not change */
  color: red;
  font-family: Times New Roman, Times, serif; /* do not change */
}
-->
</style>

<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Cat Arriola :: http://astrodiva.journalspace.com */

/* ------- begin edit -------- */

var listName='Links'; // the title of your list between single quotes
var mpic=new Array();

/* Edit link info in this order: name, image file, site title, URL
Insert each info between single quote marks, followed by a comma
(Replace '#' with the URL but leave the two quotes, i.e.
'http://www.theURL.com')
Do not edit after the URL. Add or remove lines as required */

mpic[mpic.length] = new info('Path-To-Peace', 'p2p.png', 'Aku', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('Simple Machines', 'smf.png', 'Our forum software.', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('Tiny Portal', 'tp.png', 'Our content software.', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('Avalanche Style', 'avs.png', 'A friend from another website.', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('Godaddy', 'gd.png', 'Our host.', '#', 'm' + mpic.length);
mpic[mpic.length] = new info('SMFHacks', 'smfhacks.png', 'A lot of our mods our made from this site.', '#', 'm' + mpic.length);

/* ------ Do not edit below this line ------ */

var minArr=new Array();
for (i=0; i<mpic.length; i++) {
  minArr[i]=new Image();
  minArr[i].src=mpic[i].thumb;
}

function info(nam, thumb, Title, web, markID) {
  this.nam = nam;
  this.thumb = thumb;
  this.Title = Title;
  this.web = web;
  this.markID = markID;
}

function codeIt() {
  document.write('<div id="hotlist"><b>' + listName + '<\/b>');
  document.write('<hr width="100%" size="1">');
  for (j=0; j<mpic.length; j++) {
    document.write('<a target="offsite" href="');
    document.write(mpic[j].web);
    document.write('" onMouseover="preview(' + j + ',\'' + mpic[j].markID + '\')">');
    document.write(mpic[j].nam);
    document.write('<\/a><span class="arrow" id="' + mpic[j].markID + '">&nbsp;◄<\/span><br>');
  }
  document.write('<br>');
  document.write('<div id="preview">');
  document.write('<img class="thumbnail" alt="" name="screenshot" src="' + minArr[0].src + '" onClick="dest()">');
  document.write('<div id="caption"><\/div>');
  document.write('<P><input type="button" value="Hide preview" onClick="hide()"><\/p>');
  document.write('<\/div><\/div>');
}

function preview(t,a) {
  unmarkAll();
  document.getElementById(a).style.visibility='visible';
  document.getElementById('preview').style.display='block';
  document.getElementById('caption').innerHTML=mpic[t].Title;
  document.images.screenshot.src=minArr[t].src;
  document.images.screenshot.title='Click to visit ' + mpic[t].nam + '\'s site';
}

function dest() {
  for (x=0; x<mpic.length; x++) {
    if (document.images.screenshot.src==minArr[x].src) {
      window.open(mpic[x].web, 'offsite');
    }
  }
}

function hide() {
  document.getElementById('preview').style.display='none';
  unmarkAll();
}

function unmarkAll() {
  for (c=0; c<mpic.length; c++) document.getElementById(mpic[c].markID).style.visibility='hidden';
}
// End -->
</script>
</head>

<div align="center">
<script type="text/javascript">
<!-- Begin
  codeIt()
// End -->
</script>
</div>

Editing Code
The width of the image/color of text/width of table/etc is in the css part.
The links and text are in there.... You will find it....
I attached the images i used and i formatted mine by save as the pictures below by right clicking on the small version of it and saving it as png...

Brianjw

Demo
http://www.brianjwilson.com
The block labled links. You can't miss it.

Brianjw

Brianjw

RoarinRow · February 11, 2007, 01:32:39 AM

Hey, that's pretty cool!

Recent

User

Stats

Members

Stats

Users Online

Link Definitions Block

brianjw

brianjw

brianjw

RoarinRow