Little Tips and Tricks Page 1

We have compiled the below pages on little tips and tricks for you to use in adding spice to your pages that are extremely easy to achieve. Some of these codes will not work with some browsers. They work with Internet Explorer 4.0 or higher. The older Netscape browsers will also not be able to see some of these effects.

Glowing Text

This bit of code is quite versatile. You can change the color, size and even the position of it. All you need to do is play with the code a bit. Here it is:
This Is Called Glowing Text

Changing Text Color On Mouseover

This little effect will change the color of "Text" when you place your cursor on the text. All you have to do is replace the 'colors' with either hex code or word color.

Some Text

Status Bar Message

Have you ever noticed the status bar on your browser? You know, the strip at the bottom of the window that shows you the status of current document transfers and connections to remote sites. Did you know you can code a message to appear in that box in place of the default on mousing over hyperlinks? This is very easy to do and can entice the user to click if the right message is used. Here's how it all works:
[ Place Your Cursor Here Then Remove It ]

<A HREF="Your URL Link Address Here>" onMouseOver="self.status='Welcome To The Consigliere\'s™ Web Design!' ; return true;">Home</A>

Notice the \' within the message in the script and how it is used. The reason being is that the script makes use of the single '. If you need to use it within the message, you must write it as in the example or you will receive an error message
which will be Error Expected ';'.

Alt Tag Mouseover On Text Links

Often you'll see an "alt" text description when you pass your mouse over an image. These should always be in place for any image; while almost all browsers will support images, some people still turn their images off to surf faster and having an alt attribute to your pix will give these visitors at least some information. To supply text infor for images on mouseover, you simply add a simple attribute to the img src tag:
<image src="cat.gif" alt="write your description here">

Now, did you know you can also add alt tags to hyperlinks? When you pass your mouse over a text link, an alt tag with a text description of the link appears. Just place your cursor over the hyperlink to see it work.
Alphabet Index

This is very simple to do! Add this command to the hyperlink tag:

<a href="Your URL Link Address Here" title="Place Your Message Here">
Alphabet Index</a>

Disabled Links

These next 2 effects are how to make either a hyperlink or image link non-functioning. All you need to do is add this little attribute to the tag.

onClick="return false;"

Non-Working HyperLink

<a href="URL Link Address Goes Here" onClick="return false;">
Non-Working HyperLink</a>

Marquee Tag ~ IE Only~

This next effect is to make a <marquee> tag to be positioned and also stop after the set number of cycles.

Scroll this text

<center>
<marquee loop=15 width=40% behavior=slide>Scroll this text</marquee>
</center>

We have this configured to loop=15 times in the <center> and use 40% of the page. After 15 "loops" (cycles) it will stop.

Meta Refresh Tag

The below is called a "Meta Refresh" tag. This is used to autojump to another page after a preset number of seconds.

The number just before the word URL is for how many seconds before the page is redirected. You can put whatever number you need to. This example is for "6" seconds. You need to put this tag in the <HEAD> section of your document.

Hover Effect On Mouseover

Click the below link to see the next effect which is call a "Hover" effect on hyperlinks. What is does is change the size and color of the link when you place your cursor on it.
[ Hover Effect ]

Border In A Box

This is called a Border in a Box. The syntax for this dotted border effect is:

Border In A Box

As you can see there are two configurations you can make. One is the color and the other is the border-width; 2px

Colored Slide Bar ~ IE Only ~

This next effect is a colored slide bar or scroll bar. If you can see the slide bar in only black and white, then your browser is able to view this CSS effect. Just copy and paste the below code in the <HEAD> secton and reconfigure the colors for your site. This script you need Hex codes. If you would like a color chart that you can print, go to the below link. If you can't print a copy, then go to the other below link and you can bookmark the color code chart.
[ Printable Hex Code Chart ]
[ Hex Chart ]

Locked In Someone's Frames?

Want to avoid having your web page getting caught in someone else's frames page. Just copy and paste the script below and place it between the <HEAD> and </HEAD> tags of your Html document. The script will automatically break your web page out of the other person's frames page. We have already added this script to this page for you in case you are locked in someone elses' frames.

Text Change On Mouseover

Put Mouse Here

Cool, huh?! The text changed form! How did this happen? Easy ...

First place the below <style> tag in the <HEAD> section in your HTML document. This tells the browser that it needs to ready this code, because something is about to use it. This is where you make your configurations. Color, size etc. Everything below that is color coded can be reconfigured. Just play around with it until it fits your site.

<style>
.navoff {
border : 1px solid #EAEAEA;
font : 12px Verdana;
}
.navon {
border : 1px dotted #808080;
background : #FFFFFF;
font : 12px Verdana;
}
</style>

Next, paste the below little sniplet of code in the <BODY> section of your document where you want it to appear.

<span class="navoff" id="a3" onMouseOver="a3.className='navon'"
onMouseOut="a3.className='navoff'">Your Text Goes Here</span>

Style Sheet Text Effects

This next effect makes use of style sheets that allow you to format specific text effects for shadows, drop shadows and glowing characters. Play with the variables to see which works best for you. Filter effect names are "shadow" "dropshadow" and "glow".

THIS IS A SHADOW EFFECT

THIS IS A DROPSHADOW EFFECT

THIS IS A GLOW EFFECT

The below is the little sniplet of code that you would use to get this effect. Be advised that these effects will look different on different colored backgrounds. The below link will take you to a script tester where you can see the effects on different colored backgrounds. Just copy and paste the below two codes into the script tester and change the backgound and effects to see how it looks.

<body bgcolor="#000000" text="#ba55dc" link="#ffa500" alink="#ffff00" vlink="#ffa500">
<basefont size="3">

<TABLE STYLE="filter:shadow(color=yellow)">
<TR><TD> THIS IS A SHADOW EFFECT </TD></TR>
</TABLE>

The two above codes are only to be used if you want to see how these effects will work on different color backgrounds. The second of the two is what you would paste into your document. The above bgcolor is set for #000000 which is black. #FFFFFF would be white. If you also need a hex color chart for reference, We have also included a link to a color chart.
[ Script Tester ]
[ Color Chart ]

Predefine Subject And Body Message In Email

Just about everyone (we hope) knows how to code an email address into a Web site so that visitors can click a hyperlink to send a message. If not, see the below examples. It's simple and effective and lets the user define his or her mail message without having to fill in any tedious forms.

As you probably know, the HTML for the mailto: anchor tag is used like this:

<a href="mailto:Your Email Address">Contact Me</a>

However, did you know that you can pre-assign both the subject and the body text using the mailto tag? It's really easy and can help you quickly identify messages as they come in.

This creates a hyperlink that, when clicked, will launch the user's default mail program with the coded address in the "to" line. Now, you can take this a step further by introducing the "Subject" variable. For example, if you want people to submit a job application, you can pre-code the subject. This is important if you get lots of mail as it will quickly let you know the subject of these messages.

So, we would code the mailto like this:

<a href="mailto:Your Email Address?Subject=Job Application">Contact Me</A>

You also will notice the ? after the .com..... Be sure you include this character or it will not work.

Now, what if you wanted to pre-determine the Body Message as well? You may wish to do this if you have an offer that is always the same, such as a request for information. Let's say you're offering a free brochure. You can code the subject as "Free_Brochure" and the Body Message as "Please send me your brochure."

We code the mailto this way:

<a href="mailto:Your Email Address?Subject=Free Brochure&Body=Please send me your brochure.">Contact Me</A>

There you go, now you can save your visitors some time, and save yourself the anguish of strange email inquires by pre-coding your mailto expressions. The below email link will work if you want to try it and see how it looks.
[ Contact Me ]

Forms And Elements

If you use forms on your site, you should know that there is a very simple method to change the "default" appearance of your form elements. Using CSS, you can assign attributes to the various form elements on our pages to conform to an overall design. Just about every element can be assigned styles for fonts, background colors, etc. Here's an example and below that is the reconfigurations on howto.