Animated Images in HTML

Q

What Is an Animated Image?

✍: FYIcenter.com

A

An animated image is a special image file saved in animated GIF format. When an animated image is displayed in a browser window, multiple image frames will be displayed in sequence to form a simple animation.

Here is a tutorial example with a server-side image map:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Animated GIF Image</title>
 </head>
 <body>
  <h4>Animated GIF Image</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   Are you getting lots of emails these days?
   <img src="/lots_of_email.gif" alt="Lots of email"/>
   I am.</p>
 </body>
</html>

If you save the above document as animated_image.html, download this animated GIF image file and view it with Internet Explorer, you will see an animated image embedded inline in a text paragraph as shown below:

HTML img Element with Animated GIF Images

⇒ Server-Side Image Maps in HTML

⇐ Floating an Image to the Right Side in HTML

⇑ HTML Inline Images and Image Maps

⇑⇑ HTML Tutorials

2017-03-22, 1761🔥, 0💬

Client-Side Image Maps in HTML
What Is a Client-Side Image Map? A client-side image map is an image defined with the "ismap" attribute and the "usemap" attribute. When a client-side image map is clicked in a browser window, the browser will take mouse coordinates and map them to a predefined image map entry, to retrieve a target ... 2017-03-22, ∼1930🔥, 0💬

HTML Inline Images and Image Maps
Where to find tutorials of introduction to HTML Inline Images and Image Maps? Here is a list of tutorials to answer many frequently asked questions compiled by FYIcenter.com team in introduction to HTML Inline Images and Image Maps. Clear answers are provided with tutorial exercises on inline images... 2017-03-27, ∼1826🔥, 0💬

HTML 'img' Tag/Element
What Is an "img" Tag/Element? A "img" element is an inline element that you can use to define an inline image to be included in a XHTML document. Here are basic rules about an "img" element: "img" elements are inline elements. A "img" element must have empty content. A "img" element requires an attr... 2017-03-27, ∼1771🔥, 0💬

Animated Images in HTML
What Is an Animated Image? An animated image is a special image file saved in animated GIF format. When an animated image is displayed in a browser window, multiple image frames will be displayed in sequence to form a simple animation. Here is a tutorial example with a server-side image map: &lt... 2017-03-22, ∼1762🔥, 0💬

HTML 'div' Tag/Element
What Is a "div" Tag/Element? A "div" element is a block element that you can use a container of flow elements (flow elements are really the superset of both inline elements and block elements). By default, "div" elements will be treated as paragraphs by most browsers. Here are basic rules about an "... 2017-03-11, ∼1746🔥, 0💬

Attributes of an HTML 'img' Element
What Are the Attributes of an "img" Element? There are 4 commonly used attributes for an "img" element: "src" - Required attribute. Used to specify the URL of the image file. "alt" - Required attribute. Used to specify the name of the image. "width" - Optional attribute. Used to specify the width of... 2017-03-27, ∼1705🔥, 0💬

HTML 'div' and 'span' elements
Where to find tutorials of introduction to HTML "div" and "span" elements? Here is a list of tutorials to answer many frequently asked questions compiled by FYIcenter.com team in introduction to HTML "div" and "span" elements. Clear answers are provided with tutorial exercises on basic usages of "di... 2017-03-22, ∼1675🔥, 0💬

Floating an Image to the Right Side in HTML
How To Float an Image to the Right Side? If you want to float an image to the right side of the paragraph instead of inline within a text line, you have to use the CSS property "float" to do this. The "float" property takes two values: "float: left" - Specifies that the image to be floated to the le... 2017-03-27, ∼1609🔥, 0💬

Reducing the Display Size of an Image in HTML
How To Reduce the Display Size of an Image? If an image embedded inline is too big when displayed in a browser, you can use "width" and "height" attributes to reduce the image's display size. The display width and height should be proportional to the actual width and height of the image. Otherwise, ... 2017-03-27, ∼1593🔥, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.