PPC> Web building> Design  

Enhancing Your Web Site’s navigation

You may have noticed “screen tips” popping up on the PPC site – they’re a great way of increasing the information available to your readers

One of the things we’ve discovered over the years we’ve spent, as a team, involved in creating online magazines, is that an awful lot of surfers don’t like to scroll down great long tracts of information. This is especially true of “home” pages – the gateway into a Web site.

What they do like, though, is to see plenty of information in an easy to read format. Now, most people that will come to your Web site will be used to Microsoft applications and Operating Systems, and one thing we’ve noticed about them is that, increasingly, the “Tooltip” has grown and grown. A Tooltip is the yellow box that pops up and tells you what a button does – like the one here.

 You can use a very similar effect to make your links much more informative – at least in Internet Explorer 4.0 and higher, which accounts for well over 90% of the browsers in use out there in the real world.

If you use FrontPage 2002, it’s an absolute doddle. When you  go to edit a hyperlink, you’ll see, in the new dialogue box, a button for what Microsoft is calling “ScreenTips”, which allows you to type in the text you want to see pop up as a tooltip when a surfer hovers over a hyperlink.

Hover your cursor over this link, to see what happens - don't click on it - it takes you nowhere. Clever, eh?

The actual code for that hyperlink (to save you reading the source code for the whole page) is as follows:

<a title="Hello! This is a &quot; Screen Tip &quot; - the box will close when you move your cursor away. Don't click the link - it only comes back here! Keep reading, there's lots more you can do with this!" href="screentips.htm">
this link</a>

 So, it uses the <a> tag - the (a)nchor - which usually denotes a hyperlink, and which can have all sorts of modifiers. The interesting one, of course, it the "title", which takes the form :

title="any text you fancy goes here"

and which shows up in Internet Explorer 4.0 and later as a screen tip. 

Did you spot that unlinked (almost) highlight? Here's the code for that this time in a text box:

Note that I've defined the phrase "Internet Explorer 4.0" as an anchor (the "a") named it as "ie1" to define it, and set the link target to "#ie1" so that it it's clicked on, nothing happens. The "title=" bit gives the tooltip, while the "<span style="text-decoration: none"> bit removes the normal underline from the hyperlink.

So, you can define a term within the body of your document using that little trick. That's quite clever, and it ought to give your site an air of professionalism. Indeed, even if you only ever use Screen Tips on hyperlinks, the potential for adding more information without using up more screen is immense. As ever, though, don't over-use it!