Introduction-HTML Formatting

<<Index>>

This section describes how the formatting of HTML affects the output of what is displayed. I am including it because in order to use Animated Rollovers you are going to have to get your hands dirty and edit actual HTML code (until I come up with a program to do it for you). This will hopefully teach you how to recognize the parts of the HTML that need changing no matter how messed up the HTML code is. (Most visual page designers output unformatted or weirdly formatted HTML as they figure the user will never edit the code).

If you are using a visual editor then you can help yourself by defining a normal rollover first. Use the first frame of the animation as the off image and the last frame as the on image. This should create most of the HTML for you and you can just change the code to make it animated.

First, a word about gaps between HTML tags. If you know about how gaps effect the layout of a document, then you can create HTML code that is visually appealing when you view it in a text editor (such as notepad or wordpad) and does not affect the layout of the document. Take the following 4 images.

They are defined in the document by the HTML

<img src="../images/dhome/4.jpg" width="80" height="20">
<img src="../images/dhome/4.jpg" width="80" height="20">
<img src="../images/dhome/4.jpg" width="80" height="20">
<img src="../images/dhome/4.jpg" width="80" height="20">

Notice that the HTML is on separate lines, but the images display all on one line. This is a feature of HTML. A browser will format text/images from left to right unless you specifically want it to move to the next line. We can display them on different lines by

<img src="../images/dhome/4.jpg" width="80" height="20"><br>
<img src="../images/dhome/4.jpg" width="80" height="20"><br>
<img src="../images/dhome/4.jpg" width="80" height="20"><br>
<img src="../images/dhome/4.jpg" width="80" height="20">




The fact that the text is on 4 different lines is not what causes the images to be on 4 lines, it is the <br> tag. Consider the following HTML

<img src="../images/dhome/4.jpg" width="80" height="20"><br><img src="../images/dhome/4.jpg" width="80" height="20"><br><img src="../images/dhome/4.jpg" width="80" height="20"><br><img src="../images/dhome/4.jpg" width="80" height="20">

Which displays as




This displays exactly the same as before, even though the HTML is all scrunched up on one line (the text auto wraps at the right margin). View the source of this document if you don't believe me. (Try resizing the window as you view the source.)

Look at the first line of images above. Notice how there is a gap between the images? This is because there is a gap (known as whitespace) between one image tag and the next. To make the images touch each other you have to make sure there are no gaps between the image tags. You might think the way to do it is like this :-

<img src="../images/dhome/4.jpg" width="80" height="20"><img src="../images/dhome/4.jpg" width="80" height="20"><img src="../images/dhome/4.jpg" width="80" height="20"><img src="../images/dhome/4.jpg" width="80" height="20">

which produces

This gives us the desired effect, but the HTML is rather untidy. Even the best visual WEB page editors seem to produce this kind of output when you want images to align in this way (even Dreamweaver!).

What they don't seem to realize is that gaps do not matter WITHIN the HTML tags. If you know this then you can create nicely formatted HTML that still looks correct when displayed in a WEB browser.

Consider this HTML :-

<img src="../images/dhome/4.jpg" width="80" height="20"><img
        src="../images/dhome/4.jpg" width="80" height="20"><img
        src="../images/dhome/4.jpg" width="80" height="20"><img
        src="../images/dhome/4.jpg" width="80" height="20">

You might think this displays the images on 4 lines. But there are no <br> tags so we know they display on one line. You might think, OK they will display on one line but there will be gaps because the HTML is on separate lines. Well, because the gaps are INSIDE the tags, then the browser will display the images right next to each other.

You can extend this even further, consider

  <img src="../images/dhome/4.jpg" width="80" height="20"
><img src="../images/dhome/4.jpg" width="80" height="20"
><img src="../images/dhome/4.jpg" width="80" height="20"
><img src="../images/dhome/4.jpg" width="80" height="20">

Which displays as :-

In other words, exactly the same. (NOTE: although spaces can appear anywhere in the tag, do not separate the "<" from the tag name).

So how important is this? Look at the following 2 sets of HTML.

<img src="../images/dhome/4.jpg" width="80" height="20"> <img src="../images/dhome/4.jpg" width="80" height="20"><br><img src="../images/dhome/4.jpg" width="80" height="20"><img src="../images/dhome/4.jpg" width="80" height="20">

<img src="../images/dhome/4.jpg" width="80" height="20"><img src="../images/dhome/4.jpg" width="80" height="20"><br><img src="../images/dhome/4.jpg" width="80" height="20"><img src="../images/dhome/4.jpg" width="80" height="20">

Notice any difference? (You can view the source of this document if it helps).

Well, here is how they display :-



Notice how the first 4 images have gaps. A gap between the 2 images on the top line and a gap between the top 2 images and the bottom 2 images. So what is the difference? The only difference is A SINGLE SPACE between the HTML for the first image and the HTML for the second image. If you have ever tried to hand code an interface that consists of an image that has been cut into sections you might recognize how darn annoying something like that can be.


So now you know about how whitespace affects the visual appearance of your document, I am going to show you how to format HTML so you can easily recognize it and your browser displays it correctly. This is my own personal formatting method, you may wish to design your own but I would suggest, if you use a visual editor, reformatting the HTML before trying to add any JavaScript.

For text links with mouseOver/Out

<A HREF="someLink.html"
    onMouseOver="someFunction()"
    onMouseOut="someFunction()">Text Link</A>

For text links with mouseOver/Out that target another frame

<A HREF="someLink.html" TARGET="main"
    onMouseOver="someFunction()"
    onMouseOut="someFunction()">Text Link</A>

For named image links with mouseOver/Out

<A HREF="someLink.html"
    onMouseOver="turn_on('home')"
    onMouseOut="turn_off('home')"><IMG NAME="home"
        SRC="images/home/0.gif" WIDTH="80" HEIGHT="20" BORDER="0"></A>

For named image links with mouseOver/Out that target another frame

<A HREF="someLink.html" TARGET="main"
    onMouseOver="turn_on('home')"
    onMouseOut="turn_off('home')"><IMG NAME="home"
        SRC="images/home/0.gif" WIDTH="80" HEIGHT="20" BORDER="0"></A>

For Animated Rollovers that are all on one line

<A HREF="homeLink.html"
    onMouseOver="turn_on('home')"
    onMouseOut="turn_off('home')"><IMG NAME="home"
        SRC="images/home/0.gif" WIDTH="80" HEIGHT="20" BORDER="0"></A
><A HREF="emailLink.html"
    onMouseOver="turn_on('email')"
    onMouseOut="turn_off('email')"><IMG NAME="email"
        SRC="images/email/0.gif" WIDTH="80" HEIGHT="20" BORDER="0"></A>

For a column of Animated Rollovers

<A HREF="homeLink.html"
    onMouseOver="turn_on('home')"
    onMouseOut="turn_off('home')"><IMG NAME="home"
        SRC="images/home/0.gif" WIDTH="80" HEIGHT="20" BORDER="0"></A><br>
<A HREF="emailLink.html"
    onMouseOver="turn_on('email')"
    onMouseOut="turn_off('email')"><IMG NAME="email"
        SRC="images/email/0.gif" WIDTH="80" HEIGHT="20" BORDER="0"></A><br>


For Animated Rollovers defined in a TABLE cell. (Note, using this format makes sure there are no gaps around the image no matter how the rest of the <TR><TD> tags are used.

<TD><A HREF="homeLink.html"
              onMouseOver="turn_on('home')"
              onMouseOut="turn_off('home')"><IMG NAME="home"
                  SRC="images/home/0.gif" WIDTH="80" HEIGHT="20" BORDER="0"></A></TD>

A row of cells....

<TD><A HREF="homeLink.html"
              onMouseOver="turn_on('home')"
              onMouseOut="turn_off('home')"><IMG NAME="home"
                  SRC="images/home/0.gif" WIDTH="80" HEIGHT="20" BORDER="0"></A></TD>

<TD><A HREF="emailLink.html"
              onMouseOver="turn_on('email')"
              onMouseOut="turn_off('email')"><IMG NAME="email"
                  SRC="images/email/0.gif" WIDTH="80" HEIGHT="20" BORDER="0"></A></TD>

<TD><A HREF="linkslLink.html"
              onMouseOver="turn_on('links')"
              onMouseOut="turn_off('links')"><IMG NAME="links"
                  SRC="images/links/0.gif" WIDTH="80" HEIGHT="20" BORDER="0"></A></TD>

NOTICE: There are gaps between the lines of HTML but there won't be when the table is displayed. View the source of this document and look at the table below. The first 2 images are links. Notice how the HTML is spread out but the images are right next to each other.


A column of cells....

<TR>
<TD><A HREF="homeLink.html"
              onMouseOver="turn_on('home')"
              onMouseOut="turn_off('home')"><IMG NAME="home"
                  SRC="images/home/0.gif" WIDTH="80" HEIGHT="20" BORDER="0"></A></TD>
</TR>

<TR>
<TD><A HREF="emailLink.html"
              onMouseOver="turn_on('email')"
              onMouseOut="turn_off('email')"><IMG NAME="email"
                  SRC="images/email/0.gif" WIDTH="80" HEIGHT="20" BORDER="0"></A></TD>

</TR>

<TR>
<TD><A HREF="linkslLink.html"
              onMouseOver="turn_on('links')"
              onMouseOut="turn_off('links')"><IMG NAME="links"
                  SRC="images/links/0.gif" WIDTH="80" HEIGHT="20" BORDER="0"></A></TD>

NOTICE: There are gaps between the lines of HTML but there won't be when the table is displayed. View the source of this document and look at the table below. The first 2 images are links. Notice how the HTML is spread out but the images are right next to each other.


<<Index>>