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

pbolduc

Dec 28 2004, 10:52 AM

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"></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=""></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

Dec 28 2004, 02:29 PM

QUOTE(pbolduc @ Dec 28 2004, 05:52 AM)

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.

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://example.com/index.asp because I can't visualize where the link itself go... Maybe it's to early or I'm to blind

Nils

pbolduc

Dec 28 2004, 05:28 PM

QUOTE(NilsC @ Dec 28 2004, 07:29 AM)

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://66.78.26.94/~ruidoso/

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

Dec 28 2004, 05:52 PM

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

QUOTE

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

Dec 28 2004, 06:43 PM

QUOTE(NilsC @ Dec 28 2004, 10:52 AM)

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

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

r3d

Dec 29 2004, 12:05 AM

CODE

same as above and should be used in this way

CODE

pbolduc

Dec 29 2004, 12:37 AM

QUOTE(r3d @ Dec 28 2004, 05:05 PM)

CODE

same as above and should be used in this way

CODE

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

r3d

Dec 29 2004, 01:11 AM

darn, another mistake

here is a class version

CODE

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

pbolduc

Dec 29 2004, 01:47 AM

QUOTE(r3d @ Dec 28 2004, 06:11 PM)

darn, another mistake

here is a class version

CODE

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

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

<style type="text/css"></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 tit 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

r3d

Dec 29 2004, 02:34 AM

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

Latest Entries

r3d

Dec 29 2004, 04:37 AM

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

Recent Queries:-

4f2aeb83fe7403a48a92a72d3e560ac6 - 115.50 hr back. (1)
visual basics verses vb.net - 310.19 hr back. (1)

Similar Topics

Keywords : creating text bandwidth scripting

Creating Your Own Simple But Effective Site - To be resumed soon (26)
Creating Tooltips - DHTML, HTML, CSS, Javascript... (7)
Here is a little tutorial to make those small yellow-background boxes (tootltips) that pop-up for
some links that describe them when you hover the mouse over them, it uses DHTML, CSS, HTML, and
Javascript, so it gives us a much more wide range than my previous tutorials that just where on
HTML. OK, so here we go... Put this right under CODE <div
id="dhtmltooltip"></div> <script type="text/javascript"> var
offsetxpoint=-60 //Customize x offset of tooltip var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all...

Creating A Color Combination - Guide to color combinations (17)

Ever been to a website that is barely readable because of the bad color design? Well here's some
tips to make sure that you don't fall into the same trap. * Black text on a white background,
while not exciting, is the most practical color combination. * Try and not use more then four
colors on your website, too many can be disorientating for the user. * Find out what each color
represents to the users mind. For example green represents wealth while red represents daring. *
Don't use yellow for web page backgrounds. * Take a look at Visibone or get a...

Add Favicon To Your Site - Creating, Converting to icon, Setup (38)

Have you ever wondered how to get those icons displayed in your address bar for your own site? If
you do not know what I mean, you could possibly have a browser that does not support favicon.ico or
you just have not noticed. If you visit Google they should have a favicon in their address bar,
if it's not displaying just goto this place to get the idea of what it would look like, but in
your address bar, it should show just before the http part but sometimes it does not show so what I
want to do is show you how you can force it to be shown on browsers that sup...

Creating Rollover Images With Css - Eliminate the need for Javascript (12)

I have seen it reported that 10% of Internet users have Javascript disabled. Whether for security
concerns or to curtail annoyances like pop-up windows, it seriously limits your ability, as a web
designer, to mold your website into something creative and novel. This is where CSS rollovers come
in. You know that effect you get when you roll the cursor over an image, and then the image changes?
Traditionally, that effect has been accomplished by using Javascript to swap out images. I present
here my own index page which has been made only with CSS and html. If you are u...

Creating A Simple But Effective Website - Part 1 - Design (10)

WARNING: This is a VERY image heavy tutorial and will take time to complete Topic closed
until I can find the time to complete it, and I am getting mad with the large scale plagrism of
other articles. Also, the images will no longer work, as I have changed domain name and also
removed the images to make space. Creating a basic but effective website For beginners
Introduction: Ok, so maybe you want to make a website that is “worthy” of the web. That is to say,
you have made small taster sites before in FrontPage or something basic like it. And realised t...

Creating A Css Rollover Menu (with Table Cells) - for those bandwidthed challenged (9)

Ive found this code very usefull when it comes to clients who cant afford Flash (and I hate
JavaScript rollovers as they only work half the time and when you hold the mouse over the button for
5 seconds) When your done here you should be able to create a menu that looks like the following:
click here to see what it looks like Step 1: setting up the framework Get the framework in
there for the script to work , I generally link to my stylesheets externally so I will show you how.
Now open a simple text editor such as Notepad. set up your page with the following bas...

The Big Guide To Web Design Part 2 Of 4 - The Language and text of a site (0)

Author: Michael Land (me) Date: 13 May 2005 Introduction: I've decided to put all
the information I know that is relevant into one compendium. The following parts to this guide have
been designed in different stages. Each stage looks at the four crucial parts to a website. The SLIP
method (Structure and Layout, Language and text, Imagery and the Producer's Intentions). By
following the SLIP method, everyone should be able to produce a site that is of excellent standards,
no matter how good or bad they are at certain areas. If you have not read part ...

Css Rollover Menu (with Background) - bandwidth friendly rollover (0)

Ive found this code very usefull when it comes to clients who cant afford Flash (and I hate
JavaScript rollovers as they only work half the time and when you hold the mouse over the button for
5 seconds) When your done here you should be able to create a menu that looks like the following:
click here to see what it looks like Step 1: setting up the framework Get the framework in
there for the script to work , I generally link to my stylesheets externally so I will show you how.
Now open a simple text editor such as Notepad. set up your page with the following bas...

Creating A Webpage Using Photoshop - (0)

I've read that this can be done with greater ease by using Ready Image, but since I'm more
familiar with PS, I shall use PS as the guide. This guide does make a few assumptions :: 1) You
already knew how to use Photoshop. 2) You already knew how to write HTML codes 3) You knew both of
the above but did not ralise that it can be done .. Thus, I shall not touch on those 2 topics, as
books a thousand pages thick have been written on them. So, I would wanna waste my time and yours
and all the disksapce that could be used to host some useful stuff. 01:. Open the...

Looking for creating, roll, effect, text, save, time, bandwidth, simple, scripting

ADD REPLY / Got an Opinion!	a humble request :-)	RAPID SEARCH!	Free Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE