Creating A Roll-over Effect With Text Save time and bandwidth-simple scripting

[pbolduc 0]

This short, but consise tutorial presents how to create a dynamic navigation bar using simple scripting verses using an image roll-over script.

 

Using text instead of images offers 3 benefits while sacrificing only a little in design. The end resault is a navigation bar that looks great, dosen't bog the server down with images, loads fast, and is search engine friendly. In addition, you save time by not having to design two images for every link required.

 

Using simple combination of Html, CSS, and Javascript we are able to create links in which both the color of the link and the background of the table data cell change when the user interacts with the link.

 

To accomplish a text roll-over navbar there are three sections to the script

 

The first step is to write a CSS script to control the link's color, font, size, and decloration.

Here it is:

Change the property values to match your site and place this code in the head tags of your document.

 

 

<style type="text/css"><!--

a:link {color: #FFFFFF; font: arial; font-size: 13pt; text-decoration: none}

a:visited {color: #FFFFFF; font: arial; font-size: 13pt; text-decoration: none}

a:hover {color: #FFFFFF; font: arial; font-size: 13pt; text-decoration: none}

a:active {color: #FFFFFF; font: arial; font-size: 13pt; text-decoration: none}

--></style>

 

 

The "a:link" controls the link when the mouse is out.

The "a:visited" controls the link once it has been clicked.

The "a:hover" controls the link when the mouse is hovering over the link.

The "a:active" controls the link when the link has been clicked.

 

You will notice that you can control each property of the link in each phase.

 

The second step is to control the background color of the data cell the link is in. To do this we will need to place two variables inside of a script tag and place it in the head tag of the document as well.

 

Here it is:

 

Change the background variables to match your color scheme and place this code in the head tag of your document.

 

 

<script language=""><!-- {

var colorchange='#009C00';

var colorback='#074605';

}--></script>

 

The "colorchange" variable is set to the color we want the background color of the data cell to change to when the mouse is hovering over the link.

 

The "colorback" variable is the color of the background color of the data cell when the mouse is out. This must be the same as the bgcolor property value of the data cell the link is in.

 

 

The third step is to create the table with data cells for our links:

 

Here is the code:

Change the property values to match your site and place this code where you want your navbar to appear on your site. Remeber that the bgcolor property in the data cell and the "colorback" variable have to be the same.

 

 

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#009966">

<tr><td width="10%" height="20" id="link1" bgcolor="#074605" align="center" valign="middle">

<a href="http://example.com/" target="_blank" onmouseover="{link1.style.backgroundColor=colorchange};"

onmouseout="{link1.style.backgroundColor=colorback};">link 1

</a></td></tr>

 

<tr><td width="10%" height="20" id="link2" bgcolor="#074605" align="center" valign="middle">

<a href="http://example2.com/" target="_blank"onmouseover="{link2.style.backgroundColor=colorchange};"

onmouseout="{link2.style.backgroundColor=colorback};">link 2

</a></td></tr>

</table>

 

Also notice that the "id" property changes with each link. You can put the actual name of the link here if you desire so long as each "id" is different. You can add as many links as you want. The above code is for a vertical navbar, but you can go horizontal as well.

 

In the above example the target is set to open a new window, if you want the page to open in the same window change the target property to target="_top"

 

I hope this script will be useful to you. It is not as hard as it may seem. I will be uploading a new sub domain in the next few days that uses this script exclusively for all navbar if you need a visual.

[NilsC 0]

Here is the code:

Change the property values to match your site and place this code where you want your navbar to appear on your site. Remeber that the bgcolor property in the data cell and the "colorback" variable have to be the same.

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#009966">

<tr><td width="10%" height="20" id="link1" bgcolor="#074605" align="center" valign="middle">

<a href="" target="" onmouseover="{link1.style.backgroundColor=colorchange};"

onmouseout="{link1.style.backgroundColor=colorback};">link 1

</a></td></tr>

 

<tr><td width="10%" height="20" id="link2" bgcolor="#074605" align="center" valign="middle">

<a href="" target="" onmouseover="{link2.style.backgroundColor=colorchange};"

onmouseout="{link2.style.backgroundColor=colorback};">link 2

</a></td></tr>

</table>

 

Also notice that the "id" property changes with each link.  You can put the actual name of the link here if you desire so long as each "id" is different.  You can add as many links as you want.  The above code is for a vertical navbar, but you can go horizontal as well.

 

I hope this script will be useful to you.  It is not as hard as it may seem.  I will be uploading a new sub domain in the next few days that uses this script exclusively for all navbar if you need a visual.

<{POST_SNAPBACK}>

Great tutorial,

This is what I was looking for when joining. Some real life examples that are thought out. Now I just have to figure out how to make it work in real life

 

Can this be used with internal and external links? can you put an example there for a link to http://forums.xisto.com/no_longer_exists/ because I can't visualize where the link itself go... Maybe it's to early or I'm to blind

 

Nils

[pbolduc 0]

Can this be used with internal and external links? can you put an example there for a link to http://forums.xisto.com/no_longer_exists/ because I can't visualize where the link itself go... Maybe it's to early or I'm to blind 

Nils

 

I have edited the tutorial to include URL placement. I am sorry I didn't include it initially. It was 4 am when I posted.

 

Go to: http://forums.xisto.com/no_longer_exists/

 

This is a site that I am building for a local concern here in New Mexico. The script is in use both in the left vertical navbar and in the foot navbar. There are a number of ways to change the look and feel of this script simply by playing with the different property settings in your table. (i.e. cellpadding, cellspacing, table borders and the like) Play with it to become familiar with the scripts versitility,

 

If you need help, just ask

 

Pete

[NilsC 0]

I added a point to you, the comment are not mine. I wrote:

Very good tutorial. This is what makes the site great. I got it now You deserve a point for this one.
Nils

but it show something about "email ..." the script must be broken.

Great website, thanks for the link. The only thing are all the blank space around your website itself. I'm using a 21" monitor with the resolution set to 1280 x 1024 and the page occupies around 2/3 of the screen. I like the color scheme, looks great. I'm going to steal some of your ideas... hurry up and put a © copyright on it

Nils

[pbolduc 0]

I added a point to you, the comment are not mine. I wrote:

 

but it show something about "email ..." the script must be broken.

 

Great website, thanks for the link. The only thing are all the blank space around your website itself. I'm using a 21" monitor with the resolution set to 1280 x 1024 and the page occupies around 2/3 of the screen. I like the color scheme, looks great. I'm going to steal some of your ideas... hurry up and put a Š copyright on it

 

Nils

<{POST_SNAPBACK}>

The site is an on-going project as the client's money comes in. That is why it is still using the ip address and there are broken links.

 

If you go back to it you will notice that the images change each time the page loads. Refresh it a few time to see. Thats a great script, not my original, but modified.

 

The page is table-based designed to be functional with all monitors. Although there are not many left, there are still people using old monitors 800 x 600 and such.

 

Thanks for the point

 

Pete

[r3d1405241470 0]

<style type="text/css"><!--a#my_id:link {color: #074605; font: arial; font-size: 13pt; text-decoration: none}a#my_id:visited {color: #074605; font: arial; font-size: 13pt; text-decoration: none}a#my_id:hover {color: #009C00; font: arial; font-size: 13pt; text-decoration: none}a#my_id:active {color: #074605; font: arial; font-size: 13pt; text-decoration: none}--></style>

same as above and should be used in this way

<a href="..." id="my_id">link</a>

[pbolduc 0]

<style type="text/css"><!--a#my_id:link {color: #074605; font: arial; font-size: 13pt; text-decoration: none}a#my_id:visited {color: #074605; font: arial; font-size: 13pt; text-decoration: none}a#my_id:hover {color: #009C00; font: arial; font-size: 13pt; text-decoration: none}a#my_id:active {color: #074605; font: arial; font-size: 13pt; text-decoration: none}--></style>

same as above and should be used in this way

 

<a href="..." id="my_id">link</a>

<{POST_SNAPBACK}>

There are lots of way to skin a cat.

 

The code example above, provided by r3d, is set in the achor tag would control the link roll-over itself. It would allow for a different set of colors to be used on another set of links somewhere else on the page, providing you write another CSS script for the second set of links with different id's.

 

This is handy if you have links set on different color backgrounds on the same page which is common. If not, the original script will work just fine, or at least it has for me.

 

r3d's addition does not change the data cell background, however, which is the part of the script that would resemble an image roll-over. The data cell background roll-over part of the script would remain the same, but be sure not to use the same ids as the anchor tag ids.

 

Thanks for the input r3d, that's what these forums are all about,

pete

[r3d1405241470 0]

darn, another mistake

here is a class version

<style type="text/css"><!--a.my_id:link   {  color: #074605;  font: arial;  font-size: 13pt;  text-decoration: none}.... // same as above just replace '#' with '.'a.my_id2:link   {  color: #00F;  font: arial;  font-size: 13pt;  text-decoration: none}....a.my_id2:hover  {  color: #F00; ...  }....--></style><a href="..." class="my_id">link1</a><a href="..." class="my_id2">link2</a>

link1 and link2 should have a diff text and hover color.

[pbolduc 0]

darn, another mistake

 

here is a class version

<style type="text/css"><!--a.my_id:link   {  color: #074605;  font: arial;  font-size: 13pt;  text-decoration: none}.... // same as above just replace '#' with '.'a.my_id2:link   {  color: #00F;  font: arial;  font-size: 13pt;  text-decoration: none}....a.my_id2:hover  {  color: #F00; ...  }....--></style><a href="..." class="my_id">link1</a><a href="..." class="my_id2">link2</a>

link1 and link2 should have a diff text and hover color.

<{POST_SNAPBACK}>

Seems like alot of unecessary scripting. The above script is for just two links while the original:

 

<style type="text/css"><!--

a:link {color: #FFFFFF; font: arial; font-size: 13pt; text-decoration: none}

a:visited {color: #FFFFFF; font: arial; font-size: 13pt; text-decoration: none}

a:hover {color: #FFFFFF; font: arial; font-size: 13pt; text-decoration: none}

a:active {color: #FFFFFF; font: arial; font-size: 13pt; text-decoration: none}

--></style>

 

is short and quick and covers all links on the page. In addition r3d's script still doesn't address the data cell roll-over which is the base reason for the script in the first place.

 

This is not a *BLEEP* for tat situation here. I am not trying to defend my script. I am sure there is an easier way to accomplish the task. The important thing here is that the script presented is correct in order to prevent a newbie from spending countless hours trying to figure out a script that wasn't funtional in the first place.

 

No doubt, using three different languages (HTML, Javascript, & CSS) to accomlish a single task might seem to be a bit much, but each section is short and easily understood, even for a newbie, hell, I wrote it when I was a newbie.

 

pete

[r3d1405241470 0]

that one is just a fixed since you can't call an id twice or more, and i'm not working with tables anymore. same script i've used to achieve a table data effect but without tables.

 

and kindly use the [ code ] instead of bold, just to separate the code from text.

 

-thnx

 

*edit. f*** what data cells are you talking about? and besides the output of your code and a simple css rollovers don't even have diff. if you din't understand the.... your nob , if your talking about the data cell rollover effect for tables, you got the wrong code

[pbolduc 0]

that one is just a fixed since you can't call an id twice or more, and i'm not working with tables anymore. same script i've used to achieve a table data effect but without tables.

 

and kindly use the [ code ] instead of bold, just to separate the code from text.

 

-thnx

 

*edit. f*** what data cells are you talking about? and besides the output of your code and a simple css rollovers don't even have diff. if you din't understand the.... your nob  , if your talking about the data cell rollover effect for tables, you got the wrong code

<{POST_SNAPBACK}>

Have you read the entire tutorial, or did you get to the css and figured you had a better way? Not everyone out there is as advance as you apparently are in scripting.

 

As I stated, there most likely is a better, more efficient way to accomplish the intent of rolling the background of while at the same time rolling the link as well. If I have the wrong code, enlighten me. I do this for a living and time is money.

 

I didn't use the

 because it doesn't allow for color and I want to show where the changes needed to be made.   

 

Not everyone uses the same code to create sites, some of are self taought and have had learned to improvise to accomplish what we needed to. As stated, not everyone is as advanced as you must be. If an individual only knows html, then the script I posted is easily adapted to what they know and accomplishes the task.

 

If you know a better way post it so we all can learn. That is why we all come to this forum... to learn.

 

P.S. Don't swear at me again. How old are you anyway boy? About 19 or so and think you got the world by the tail. Grow up

[r3d1405241470 0]

what a waste of time, i'm expecting a better post than this