There is more to links than <A HREF=>. In this edition of the Lazy Webmaster we will look at some ways to make your links and page transitions jazzier. Opening a link in a new window: You can code your links so that the new page opens in a new browser window. Some Webmasters believe that this technique, especially when used for a link to another site, helps keep visitors committed to your site. I disagree. I think many Web users are confused by multiple open windows and are frustrated when they can’t use the back button to return to a previous page. If you do find a use for this it is easy to code: <A HREF="http://www.yourdomain.com/" TARGET="_blank">Your Link</a> The secret is in adding the blank target. Make sure to include the underline. Targets and Names: The target attribute can be useful in other ways. Most often you will see it associated with a name. You can give any spot on your Web page a name. This can be handy if you have a long list of items and want to include a table of contents at the top. Let’s use a monthly events listing as an example. You can type all the months – January, February, etc. — and name each month. The code for this would be: <a name="aug">August</A> The month of August is now named “aug.” This will be invisible on the screen. Next, you want to create a link to the events page that will automatically jump to the page right to the month of August. If you are creating the link from within the events page, the code will look like this: <A HREF=”#aug”>Jump to August</A> If you are on a different page, the link will look like this: <A HREF=”events.html#aug”>See August events</A> Using graphics as links: I often use graphics as links, especially for top-level categories that aren’t going to change frequently. I have a couple of suggestions: When using a graphic for a link ALWAYS use the “alt” attribute in the image tag. This is essential for vision-impaired visitors who may use a screen reader program and for others who turn off ‘autoload images” in their browser. The “alt” attribute is easy: <IMG SRC=“graphic.jpg” alt=”calendar”> When you link an image it will have a border around it to indicate that it is a link. If you want your image to float on the screen you need to get rid of the border. The code for this is: <IMG SRC=“graphic.jpg” border=“0”>  Fancy link tricks: In past column I’ve covered how to eliminate the underlines from links (June, 2003 – Cascading Style Sheets) and pointed you to a Web site that will make a slick dropdown menu (July, 2003.) Here’s another code for a simpler dropdown menu: <form name="sitemap"> <select style="font-size:12px;color:#006699;font-family: verdana;background-color:#ffffff;" name="menu"> <option value=" lazy/lazy503.html">June 2003 Lazy Webmaster</option> <option value=" lazy/lazy703.html">July 2003 Lazy Webmaster</option> <option value="http://www.susanives.com">susanives.com</option> </select> <input style="font-size:12px;color:#ffffff;font-family: verdana;background-color:#006699;" type="button" onClick="location=document.sitemap.menu.options[document.sitemap.menu. selectedIndex].value;" value="GO"> </form> This uses a combination of HTML, JavaScript and CSS, Cascading Style Sheets. The text in italics is the CSS stuff and can be omitted. It changed the colors of the text and the submit button and the family and style of the font.  The word “GO” on the next to the last line is the text that will appear on the button. The key line of code is: <option value="lazy/lazy503.html">June 2003 Lazy Webmaster</option> Duplicate this, by cutting and pasting, as many times as you need it. The size of the selection box will expand to accommodate your longest line of text. You only need use the HTTP:// protocol if the page is outside your site. Links change color You can make the links change color when a mouse hovers over them. This has no redeeming value beyond cuteness. Here is one way to do it with CSS: <STYLE type="text/css"> <!--A:hover {color: #FF0000;}//--> </STYLE> This will change a link from the normal blue to red when the mouse hovers over it. Just change the color code to change the hover color. Meta Refresh: You can have your Web page pop over to another page automatically. This is done with a META tag, nested in the <HEAD> tag. Put it right after the <TITLE> tag. You see this often when a site has moved to a new location. The code for this is: <META http-equiv="refresh" content="5;URL=lazy1103.html”> Note that there is no quote mark before the URL. The number, 5 in this instance, is the number of seconds before the page redirects to the new one. Page transitions: You can have a fancy transition from one page to another, just like you do with a PowerPoint presentation. The code for this is: <meta http-equiv="Page-Enter" content="revealTrans(Duration=3.0,Transition=0)"> There are three variables in this. Enter will apply the transition when you go to the page; Exit will apply it when you leave. Duration is the number of seconds the transition will last. There are 24 transitions, indicated by number. They are: 0 Square Closing 1 Square Opening 2 Circle Closing 3 Circle Opening 4 Scroll Up 5 Scroll Down 6 Scroll left to right 7 Scroll right to left 8 Multiple scroll left to right 9 Multiple scroll top to bottom 10 Little square scroll left to right 11 Little square scroll top to bottom 12 Noise fade in 13 Scroll meets in the middle 14 Scroll starts in the middle 15 Horizontal scroll meets in middle 16 Horizontal scroll starts in middle 17 Diagonal scroll from top right corner 18 Diagonal scroll from bottom right corner 19 Diagonal scroll from top left corner 20 Diagonal scroll from bottom left corner 21 Horizontal bars fading in 22 Vertical bars fading in 23 Displays a random transition