Word Count Total ~   ___1285___

How article actually appeared in Net4TV Voice
Vox Populi, Vox Dei - Vol 2, Issue 4 (#30) - May 9, 1999

ADH-HH Tips & Tools


Tamer Backgrounds & MouseOvers for easier viewing

We gather info from other users & each issue discuss one or more of the submissions. The info covers any aspect of tips, shortcuts, pitfalls &/or cautions in home page design & construction. For example, have you ever revised your home page by taking a chunk of text, etc. from one page & moving it to another page? You may already know to select the text with shift[arrow-key] to highlight/select the text. Then you should use cmd[C] to copy the selected text. Do not use cmd[X] to cut-out the text yet. You should then use the "back" key to exit the editor. From there, go to the page where you want to place the copied text, select the proper point & use cmd[V] to paste it into the new page. Then use the tab key to exit the editor & save the edited page. Then you can go back to the page from where you copied the text & select & delete the original text. This is a bit more work but it insures that you do not lose a big chunk of text/coding because your terminal freezes up, you inadvertantly lose power or accidentally do another cmd[C] before you paste the text into it's new location. This is a definite headache saver. At the bottom of this article you should find a link to make submissions. Here are some more tips submitted from other users.

Basic Tip : Use Tamer Backgrounds
   ~~~  submitted by: 
Ruth  [ email ]  ~~~
"I have found while visiting home pages that backgrounds and music are so very important in web design. A very busy loud background can be a real turn-off...the same with the wrong type of music. This can really hurt a site and cause people to back right out of it and miss all the hard work you've put into it. Softer backs or borders will not detract the reader from your text."

A lot of web site designers have taken up the habit of placing a "stop music" &/or "play music" button(s) on their pages [note: Example of such can be found in next tip.]. Some people just do not like hearing music while they surf, or they may just be uncomfortable with the music you have selected for whatever reason. And you have to admit, we each have our own tastes. Of course, the option of whether to make the music optional or not is entirely up to the web site creator. In some or a lot of cases, the music may be an integral part of the theme, makeup, or effectiveness of the page. This is still a point to think about when considering your home page visitors.

Intermediate Tip : MouseOver Coding
   ~~~  submitted by: 
ericB  [ email ]  ~~~
Here's a tip to make your home page a bit more user friendly. Even though we view home pages on a larger screen than computer users we can still have trouble making out the labels on menus &/or links. Various reasons for this may be either our own limited eyesight, small lettering, or the choice of background & text colors. One way to rectify this or avoid this possibility & still maintain your selected design choices is to use what is called a "MouseOver" code.

ADDITIONAL INFO   The name for the code, I believe, stems from computer users & how the mouse functions. On a computer, when you use the mouse to move the cursor, as it passes over a specifically formatted spot, text will display telling something about that spot. That spot would be either a linked image or text link, etc. WebTV does not have a mouse, but the code functions whenever the cursor is on the link. On WebTV the text (of your choice & that you code in) is displayed at the bottom of the screen in the status window. As you go through the following examples, check out the status window below.

On one of my pages, for example, I have linked each letter of my hometown to a different site about my home town, Louisville. As you can see, when you place the cursor over the "L" you see in the status window that it takes you to a page where you can check the weather in Louisville, the "ou" takes you to the official Louisville home page, the "is" takes you to the a local periodical's home page, etc. That was a text link example. The format for that code is:

<a href="http://weather.yahoo.com/forecast/Louisville_KY_US_f.html" onMouseOver="window.status='Check the weather in my hometown...'; return true" onMouseOut="window.status=''; return true">L</a>, etc.

But, you can just as easily have a "MouseOver" code for a linked image, and even for a <form> button. Examples are below. [note: As you place the cursor over some of the buttons below, it's corresponding "buttonborder_.bif" will also be displayed in the status window.]

Kentucky State Flag Animated
Hollywood
Chamber of Commerce

The above linked image & the linked "Hollywood Chamber of Commerce" <td> follow the same format as the linked text code.
Linked image  
<a href=http://www.hometownusa.com/ky/ onMouseOver="window.status='Infolink: State of Ky (Hometown, USA) Homepage'; return true" onMouseOUt="window.status=' '; return true"><img transparency="10" src="ken-flag1.gif" border="0" width="142" height="90" align="center" alt="Kentucky State Flag Animated"></a>
Linked <td>  
<tr align=center><td align="center" width="250" bgcolor="#33333" colspan="2"> <a href="http://chamber.hollywood.com/" onmouseover="window.status='Infolink: Hollywood*s Chamber of Commerce'; return true" onMouseOUT="window.status=' '; return true"> <font color=cyan>Hollywood
Chamber of Commerce</font> </a> </td> </tr>

The remaining <form> buttons above have a slightly different format. Instead of using onMouseOver & onMouseOut, you would use onFocus & onBlur attributes.
<form action="http://www.ballyfitness.com/"> <input onFocus="window.status='Bally Total Fitness Centers~...border2.bif'; return true" onBlur="window.status=''; return true" type="submit" value="Bally's Total Fitness" width="280" text="cyan" borderimage="file://rom/borders/buttonborder2.bif"> </form>

There are three things to note in the above examples. One most important thing is that you cannot use apostrophes (') or quote marks (") within your "MouseOver" code or your "MouseOver" text. If you do, the editor will interpret that as a closing apostrophe or quote mark & your "MouseOver" will not work. [note: Notice the location of the punctuation marks, including the quote mark which comes before the words    "window.status=   && comes after the words   return true". The text that you want to appear in the status window begins & ends with an apostrophe.] What I've found is if you use the asterisk (*) the meaning & effect of an apostrophe will generally get across (check out the "Hollywood" & "Reload Music" "MouseOver's" above).

Secondly, remember there is only a limited amount of text that can be placed in the status box. If you place too much text for it to be displayed completely, it will be truncated & the end words will be replaced by the ellipsis (...).

The third piece of info to know is the capitalization in the onMouseOver, onMouseOut, onFocus, & onBlur are not required. For ease in detection & coding, I selected the capitalizations I use to make it easier on me, or for my personal taste. For example: onMouseOver, onmouseover, or onMouseOVER will all work."

About Alt.Discuss.Homepage-Homepage Helpers

The alt.discuss.homepage newsgroup is a great source of help if you are just beginning or run into a snag when creating your home page. Each issue, we will focus on one or more tips that will help your home page design. You can visit our home page at http://members.tripod.com/adhhh/ & request more one-on-one assistance. Our Help Teams include: Tutor Team; Construction Crew [if you have a particularly complex design problem]; & Image Researchers.

Have a tip, idea, tool, or shortcut you'd like to share & see featured in the next or subsequent article? Submit your tip to our ADH-HH Tips & Tools Committee.