Description

There are thousands of scripts that deal with image animation, rollover images, image buttons, etc. This module aim to offer a large variety of image automations with some eye-candy effects, such as crossfading (or image morphing). The core of this module manipulate a set of images and perform transitions between them, based on specified stimuli (time, mouseover, clicks).

Examples

Images as buttons

Well, you don't need this plugin for doing just that, but it's possible, and you can combine this with any other feature of autoimage. It simply consists of attaching a link to an image, just like if it was wrapped in a <a> tag.

HTML & JavaScript UI 
<img id=image src="button.png">

$('#image').aiButton(
  {
    href:"javascript:hello()"
  });

Buttons with over state

To become a little nicer, you can set an over state version of the button. It'll be shown whenever the mouse goes over the image.

HTML & JavaScript UI 
<img id=image src="button.png">

$('#image').aiButton(
  {
    href:    "javascript:hello()",
    oversrc: "button_over.png"
  });

Overstate with smooth transitions

This is the eye candy part. By specifying the "fade" parameter with the true value, you instruct autoimage to implement morphing between the image and its over state version. It only takes two images, the smooth transition is done by a combination of the css opacity and z-level attributes.

HTML & JavaScript UI 
<img id=image src="button.png">

$('#image').aiButton(
  {
    href:    "javascript:hello()",
    oversrc: "button_over.png",
    fade:    true
  });

Animated images - blinking sign

This example uses the core method of the autoimage module. It uses two images and fade from one to the other, continously. The 'loop' parameter tells autoimage to run the animation forever between the two images; the "speed' parameter represents the duration of one transition, in milliseconds. Obviously, you could use more than two images.

HTML & JavaScript UI 
<img id=image src="warning.png">

('#image').autoimage(
  {
    images: [ "warning_over.png" ],
    fade:   true,
    speed:  500,
    loop:   'bounce',
  }

Animated images - spinning arrows

This example uses more than two images, and cycle them in a circular way (last image is followed by the first image) via the "loop" parameter.

HTML & JavaScript UI 
<img id=image src="spin1.png">

$('#image').autoimage(
  {
    images:
        [
         "spin2.png",
         "spin3.png",
         "spin4.png",
         "spin5.png",
         "spin6.png",
         "spin7.png",
         "spin8.png",
        ],
       speed:  300,
       loop:   'cycle',
   });

Combining smooth transitions and stable images (slideshow animation)

The example above show continous smooth transitions between images. This is done by using a true value for the "fade" option. We can also use a numerical value for this option, which tells how long the transition lasts, in percentage, compared to the time interval between two images. For example, if the option is set to "30", the image will stay fixed 70% of the time, and transitions will last the remaining 30% ; this can be useful for animated slideshows for example.

Note that a value of 0 disable smooth transitions, while a value of 100 means that the image is never stable (except for first and last images when not in loop mode).

HTML & JavaScript UI 
<img id=image src="spin1.png">

$('#image').autoimage(
  {
    images:
        [
         "spin2.png",
         "spin3.png",
         "spin4.png",
         "spin5.png",
         "spin6.png",
         "spin7.png",
         "spin8.png",
        ],
       speed:  30000,
       fade:   10,
       loop:   'cycle',
   });

Usage

Loading the code

Nothing special here. You may want to also load the jprintf.printf.js module before, so that you see autoimage errors on the console (this help troubleshooting problems with your parameters for example).

<script language="javascript" src=".../jquery.js"></script>
<script language="javascript" src=".../jquery.printf.js"></script>
<script language="javascript" src=".../jquery.autoimage.js"></script>

Using markup extensions - custom HTML attributes

There is really two ways of creating autoimage buttons: either you define some javascript code associated with your page elements (as demonstrated in the examples above), or you stay on the HTML side entirely using IMG tags with custom (non standard) attributes.

The second approach is much simpler to use in my opinion, but you would have to accept to take some distance with strict HTML compliance. IMHO, this is more a "cosmetic" problem than a technical issue; all browser handle this properly. If you don't know a bit about javascript, you'll likely prefer this approach.

JavaScript code Using HTML extensions 
$(function()
{
    $('#imageID').aiButton(
    {
        href:    [href style parameter],
        oversrc: [src of the overstate image],
        fade:    true|false
    });
})
 
<IMG src="someimage.png"
   href="[href style attribute]"
   oversrc="someoverimage.png"
   fade="true|false">