HTML Assistance

Main >> Business Park >> Web Design / Consulting

HTML Assistance

[Previous]
[Find]
[Next]

Royal Frazier's

- MIRROR sites: closer, faster, non-English -

[Home] [Home] [Introduction] [Find] [UrlMinder] [Viewing] [Software] [How to make GIF Animations] [HTML] [Smaller GIFs] [Common Problems] [GIF Bugs] [Technical] [Gallery] [About]

If you have a few minutes, please fill out the Visitor Survey. It will help in making this site better.

HTML Assistance

How do I include it in a page?

Here's the beautifully simple part. Insert it and use it the way you would any GIF image on your web page. No special instructions, no unusual tags. <IMG SRC="name.gif"> It's that simple! That's all that is absolutely required. Of course, doing it well requires a little more.

Tips & Tricks

Speed up your page!

Ever notice how when a page is loading, the tesxt will stop at one pooint and wait and waitm, then rush up to another point, and wait, and wait. Wel each of those places that it pauses at is an image. When the browser hits an IMG or FIG tag it needs to know how big the image is before it can continue on with the HTML coded text. The only way tp do this under HTML 2.0 was to load the image. This meant waiting for at least the grphic header of the GIF before continuing. To avoid this display, Netscape implemented the HEIGHT & WIDTH attributes of the IMG tag to reserve a specific amount of space on the page for the graphic so the browser can immediately continue rendering the HTML text. With this information Netscape and other browsers can set aside the right amount of space and render the text around it without ever trying to grab the file. Every image you insert, NO MATTER HOW SMALL, should hve a HEIGHT & WIDTH attribute that matches the logical screen header. It should look like this:

<IMG SRC="name.gif" ALT="Text-only display" WIDTH=59 HEIGHT=127>

Netscape submitted the HEIGHT & WIDTH attributes to W3C Consortium and they have since been incorporated into HTML 3.0.

I also suggest you always include an appropriate description in the ALT attribute. This text will show up if the image cannot be pulled across the net or if the user has opted for a text-only browser. In addition, Netscape, unlike most other browsers, automatically scales the downlaoded image to conform to the HEIGHT and WIDTH specified. I don't know if this "scaling" is supported in other browsers.

Double the animation

prince@atlas.odyssee.net suggested this trick. <IMG lowsrc="starroll.gif" SRC="starroll.gif" ALT="rollin star..." width="59" height="59"> Will play a single GIF animation twice. This can be used until Netscape supports a finite number of iterations in their looping. I don't know if this will work online. Offline (local on your hard drive) operation behave differently. Offline this will have the desired effect.

Animation on Demand

This linked image is an example of Animation On Demand. This HTML page has been saved twice. Once as GIFHTML.HTM: in this copy Animations are anchored to a named anchor in GIFHTML1.HTM. The HTML page is then resaved as GIFHTML1.HTM and all the GIFHTML1.HTM links are changed to GIFHTML.HTM. This means that the links will bounce between identical hyperlinks in two identical documents, essentially doing a reload from cache. This is a more elegant way of asking the user to hit reload. It also makes certain that the page is displayed at the right point when loaded. This is very importaqnt on pages longer than a screen-full. Many reloads place the user back at the top of the page, where they will never see animation down below. Here's an example:

GIFHTML1.HTM


<HTML><BODY>
<A NAME="positioning_named_anchor"></A>
<p>The start of this section.
<p><A HREF="gifhtml2.htm#positioning_named_anchor">
<IMG SRC="starroll.gif" ALIGN=left WIDTH=59 HEIGHT=59></A>
The animation to be clicked on to play.
</BODY><HTML>

GIFHTML2.HTM


<HTML><BODY>
<A NAME="positioning_named_anchor"></A>
<p>The start of this section.
<p><A HREF="gifhtml1.htm#positioning_named_anchor">
<IMG SRC="starroll.gif" ALIGN=left WIDTH=59 HEIGHT=59></A>
The animation to be clicked on to play.
</BODY><HTML>

The Netscape betas have a GPF problem with frames and running animations. If you hit an anchor to a "_top" targetted page (or BACK/FORWARD to one) you will hit a GPF if there is a running animation. If you stop the animation before hitting the anchor it will avoid the GPF. This problem is resolved in the final 2.0 version.

How to keep the Animation from ruining other browser displays

I am still looking into how to make a clean image in non-netscape browsers. Most browsers will show the first frame of your animation. AOL's & SUN's HotJava browser displays the LAST frame only. If this frame is presentable that may be fine (like the rolling stars). But if your first frame is not a complete image (Like the early version of Interconnections) it will look bad. AOL used to display only the word "forming links across the world" in a large transparent box for the Interconnections animation. I have since fixed that animation.

LOWSRC One-Time Trick

Click on image to replay... The first possibility I looked into was using the animation GIF in a LOWSRC tag, and the file's static frame in a SRC tag as a separate GIF. Only Netscape (that I know of) supports the Netscape extension of LOWSRC, so only NN will choose to display the animation. The SRC is displayed by all browsers and should be a regular static GIF.

EXAMPLE:

<IMG SRC="final_image.gif" LOWSRC="animated_gif.gif">

If you click on the image to reload, you will notice the image doesn't play a second time. That is because with the LOWSRC & SRC file cached, they are displayed so quickly that only the SRC is visible. This image has a timed-delay LOWSRC. When I run this locally off my hard drive the LOWSRC trick works, even on reloads, but not across a network or the internet.

LOWSRC does not pay attention to looping. If it did this would solve our problem. I am submitting this suggestion to Netscape.

I believe I read about a attribute ([being] added by Netscape?) regarding nocache. This might help. I will continue to look into this. Any suggestions appreciated.

Using Frames

Glenn David of World Wide Web Design suggested this solution.

You can use the FRAME tag, which is only recognized by 2.0 or better clients, to send browsers to 2.0 and non-2.0 pages. This means that you must have double pages, one animated, one not. If you have plenty of room on your server you could direct the client to a 2.0 and non-2.0 site. Same exact pages (no code change) simply have animated GIF in one site and non-animated GIFs in the other.

The following would be the home page, and index2.html would contain the same info, but without the frames tags info and with the animated gif referred to.

index.html


<html>
<head>
</head>

<frameset ROWS="*,0">
  <frame SRC="index2.html">
  <frame>

<noframe>

<body>
<img src="standard.gif">
</body>
</html>

</noframe>
</frameset>

index2.html


<html>
<head>
</head>

<body>
<img src="animated.gif">
</body>

</html>

If anyone comes up with any other ideas on how to best include the animation in HTML pages, please write them in.

(Go to the TOP of PAGE for MENUS)

LinkExchange Member

Last Updated: March 1997