Using an Animated Gif in HTML.
I opened this thread very much as a novice with the full knowledge and expectation that it will be critiqued but also with the anticipation that those with more expertise than I, will later explain how they build animations, for example: 800x600 px, where motion is not as subtle as what I employed here.

Enough.

Quite some years ago JIMMYJOHN and I engaged in a discussion on animation. He sent me the image below. Those of you who have followed the Tamara and Natasha series at “Contributions” will recognise Tam.

At the time I had been experimenting with animated gifs, my background was HTML and I had no idea how animations were added into FLASH.

In short, I presented JIMMYJOHN access to a webpage which opened with that image; see the prompt at the bottom of the image above? I decided to play a ‘game’ with him, but let this come later.

Before I proceed further I’m going to assume that my reader has basic understandings of the type of software which I used.

My available software was an HTML editor, a Gif animator, an image slicer, an Image mapper and a version of Photoshop. While I own those, there is free software available (which I’ll mention later).

Firstly I took the image into my Image Slicer and divided it into 9 with the hand in the mirror being my focus.

On saving, my Image Slicer kindly delivered an HTML listing identical to Listing 1 with one exception. Note that “4 MIRROR.gif” does not exist because I edited and replaced it.

In Photoshop I edited the pixels around the left hand moving it so slightly and then saved it as a new image. After repeating this three more times I had five images to take to my Animator to compile into an animated Gif.

I set a 0.3 sec delay between images. My editor offered me a choice of repetitions, finite or continuous. For JIMMYJOHN I used 9 loops but for this exercise I have set the gif to loop continuously.

After saving I replaced ‘4 MIRROR.gif’in my HTML listing with “Tammy.gif”.

Listing 1


To make that all work actually required the creation of a prior HTML page which is Listing 2.
Before opening the listing notice that there is only one image. I called it “mirror.jpg”; it was the one which I earlier mentioned was sliced into 9 new images.

My Image Mapper created the listing from inputs.
The <map></map> tag allows area attributes to be set.
On this image I wanted to address two specific locations.
For my “Jimmy tease” I set a not-so-hotspot on Tam’s breast, upper right. Passing the mouse over it brought up an error message for him. The lower left, being the true target, brought up another message to prompt the triggering of the second HTML page, and the animation.

Listing 2

Software? I used CoffeeCup software and PhotoShop 7.0.

I also have Arachnophilia, a “careware” HTML editor; can you afford it?
I understand GIMP provides for image slicing and mapping as well as animation.
A search engine will provide others.


In summary, I’ve taken an image, split it to access one element which became the foundation for an animation, built two pages, one which maps some potential events, and another which leads into the second where things work.

Yes, I know this is primitive but it demonstrates and explains some important principles.

While not necessarily related to animations, some of the above is handled in tlaero’s Adventure Creator.

Perfectly valid solution to the problem at hand, even if a tad bit more complicated than necessary. A few things to note: the static images would be better off as jpegs instead of gifs, and in this particular scenario there's no need to split the top and bottom rows - so that's immediately four less images required, for a total of five instead of nine.
The html for that would be something like the following (haven't tested it, and the images obviously would need to be generated):

Code: Select all

<table border="0" cellpadding="0" cellspacing="0" width="800" height="600">
<tr>
  <td width="800" height="143"><img src="BG_TOP .jpg" width="800" height="143" border="0"></td>
</tr>
<tr>
  <td width="448" height="77"><img src="BG_LEFT.jpg" width="448" height="77" border="0"></td>
  <td width= "88" height="77"><img src="Tammy.gif" width="88" height="77" border="0"></td>
  <td width="264" height="77"><img src="BG_RIGHT .jpg" width="264" height="77" border="0"></td></tr>
<tr>
  <td width="800" height="380"><img src="BG_BOTTOM.jpg" width="800" height="380" border="0"></td>
</tr>
</table>


But this can be further optimized so that it only requires two images, the original jpeg and the small animated gif. Simply set the background of the table to "Tam.jpg" and set the background of the single cell in the table that contains the animated gif in the original example to "Tammy1.gif" - all the others can remain empty. Something like this (should work if saved as a html file in the same directory as the two mentioned images):

Code: Select all

<html>
<head>
<title>Tammy Animation Test</title>
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="800" height="600" background="Tam.jpg">
<tr width="800" height="143"></tr>
<tr>
  <td width="448" height="77"></td>
  <td width= "88" height="77" background="Tammy1.gif"></td>
  <td width="264" height="77"></td>
</tr>
<tr width="800" height="380"></tr>
</table>
</center>
</body>
</html>


Now, if one wants to leave 1999 behind and leap forward to the present day then the same effect can be achieved with a bit of CSS-magic and absolute-positioning. Simply position the animated image over the static image, at coordinates (448, 143). Like so (the important bit is at the line starting with #TammyAnim):

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>Tammy Animation Test</title>
<meta charset="utf-8">
<style>
html, body { width: 100%; }
body { text-align: center; margin: 0; }
.content { display: inline-block; position: relative; }
#TammyBase { position: relative; }
#TammyAnim { position: absolute; top: 143px; left: 448px; }
</style>
</head>
<body>
<div class="content">
  <img id="TammyBase" src="Tam.jpg" alt="">
  <img id="TammyAnim" src="Tammy1.gif" alt="">
<div>
</body>
</html>


And as a bonus, here's a version which only animates if the player hovers over the animated-region. (And some super-extra-bonus CSS-only text-changing.)

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>Tammy Animation Test</title>
<meta charset="utf-8">
<style>
html, body { width: 100%; }
body { text-align: center; margin: 0; }
p { text-align: center; }
.content { display: inline-block; position: relative; }
#TammyBase { position: relative; width: 800px; height: 600px; background-image: url('Tam.jpg'); }
#TammyAnim { position: absolute; top: 143px; left: 448px; width: 88px; height: 77px; background-image: none;  }
#TammyAnim:hover { background-image: url('Tammy1.gif'); cursor: none; }
#TammyAnim + p:after { content: 'Jimmy, tickle my fancy. Please? Yeah, please?'; }
#TammyBase:hover + div + p:after { content: 'Jimmy, that\'s not it!'; }
#TammyAnim:hover + p:after { content: 'Mm, yeah!'; }
</style>
</head>
<body>
<div class="content">
  <div id="TammyBase"></div>
  <div id="TammyAnim"></div>
  <p></p>
<div>
</body>
</html>


Lastly, just for convenience, here are the above examples in a single archive: http://www.mediafire.com/download/y0k3jsxbsmpfzd9/tammy-examples.zip

Those three Animation Tests are quite interesting, and yes, the coding is much simpler.

Um? Looking at the CSS listing, I'd have to know the 'coordinates' 143 and 448 beforehand so as to locate the GIF the correct place;
but then I'd get them from the HTML code generated by the Image Slicer.

Now, looking at my Photoshop I do see that I can generate those, this image tells the story.
By selecting the image slicer tool and using CTRL + 'drag mouse' to create a rectangle, the Slice Options button gave me the necessary stats.

Applying the marquee tool allows me to select the image that I want to be the foundation for my GIF.
Looks good.

Thank you Squeeky and kexter both for starting me on the road of understanding how to. Now I must start to work again.
Hey Chief.