SHARE
Facebook X Pinterest WhatsApp

HTML Time, Part 2

Written By
thumbnail
Joe Burns
Joe Burns
Jan 4, 2005

Appear in the Same Place

I will do this with text, but you can easily see how this can be used to run a slide show of images. It works just the same. Just replace the text that I am using with images. It’ll work just the same way.

See the Appear in the Same Place Example

Here’s the code that did it:

&lt:SPAN STYLE=”position:absolute;top:10;left:10″ CLASS=”time” BEGIN=”0″ DUR=”1″>Every second text will appear:</SPAN>

&lt:SPAN STYLE=”position:absolute;top:10;left:10″ CLASS=”time” BEGIN=”1″ DUR=”1″>One second</SPAN>

&lt:SPAN STYLE=”position:absolute;top:10;left:10″ CLASS=”time” BEGIN=”2″ DUR=”1″>Two seconds</SPAN>

&lt:SPAN STYLE=”position:absolute;top:10;left:10″ CLASS=”time” BEGIN=”3″ DUR=”1″>Three seconds</SPAN>

&lt:SPAN STYLE=”position:absolute;top:10;left:10″ CLASS=”time” BEGIN=”4″ DUR=”1″>Four seconds</SPAN>

&lt:SPAN STYLE=”position:absolute;top:10;left:10″ CLASS=”time” BEGIN=”5″ DUR=”1″>Five seconds</SPAN>

&lt:SPAN STYLE=”position:absolute;top:10;left:10″ CLASS=”time” BEGIN=”6″>Done!</SPAN>

I made a couple of changes. First off, I set the original text to stand for a limited duration so it’ll get out of the way for other text that is soon to come. I then set each SPAN to a specific position. Since all the positions are the same, they all appeared one right on top of the other.


That’s That

I really like this effect. I dislike that it is only available on IE 5.5. If you want to use it, feel free. Netscape renders the text perfectly. It just doesn’t have the delay as the seconds pass; everything displays straightaway.

Just make sure that the text you use doesn’t rely heavily on the fact that it pops in after a short amount of time.

 


 Enjoy!


[Make the Text Show Up]
[Appear and Go Away]
[Appear in the Same Place]

Recommended for you...

Best VR Game Development Platforms
Enrique Corrales
Jul 21, 2022
Best Online Courses to Learn HTML
Ronnie Payne
Jul 7, 2022
Working with HTML Images
Octavia Anghel
Jun 30, 2022
Web 3.0 and the Future Of Web Development
Rob Gravelle
Jun 23, 2022
HTML Goodies Logo

The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.

Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.