HAniS Example 1e - Two HAniS animations on one page

Example 1e: Two HAniS animations on one page with one controlling the other

Like the previous example, only here we have the animation controls on the left image also control the animation on the right. Note that only the animation controls impact both images. The "zoom" is still independent.

Yes, you do need a bit of JavaScript to accomplish this!

The HTML inside the <body> first sets up two <div> element for the two animations, and then defines two "instances" of HAniS for the animations, followed by the JavaScript functions needed to connect the two animations::

<div id="handiv" style="display:inline-block;width:500px;"> </div>
<div id="handiv22" style="display:inline-block;width:500px;"> </div>

<script>
var b = new HAniSF();
var a = new HAniSF();

function aready() {
   a.frameChanged(changb);
}
function changb(frm) {
  b.showFrame(frm);
}
function init() {

  a.setup('hanist1.txt','handiv', aready )

  b.setup('filenames = TIR1.GIF, TIR2.GIF, TIR3.GIF \n imagecan_style=border-radius:30px; \n start_looping=false \n' + 
  'overlay_nonewdiv=t \n overlay_filenames=TMAP.GIF \n controls = zoom, overlay \n' + 
  ' overlay_labels=Map \n buttons_style = flex:auto;margin:2px;' , 
  'handiv22'); 
} 

window.onload = init();
</script>

(Note also in the 2nd instance, the overlay_filename need only be given once, since it applies to all frames.)

Go To Front Page
Next Example