Example 1d: Two HAniS animations on one page using the "function" code (hanisf_min.js)

Here we again have two animations on one page, but unlike the previous example, we do not use <iframe>. Instead, we invoke HAniS as a function, thus creating two independent instances.

The HTML inside the <body> looks like this:

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

function init() {
  var a = (new HAniSF()).setup('hanist1.txt','handiv')
  var b = (new HAniSF()).setup('filenames = TIR1.GIF, TIR2.GIF, TIR3.GIF \n imagecan_style=border-radius:30px; \n'+ 
  'overlay_nonewdiv=t \n overlay_filenames=TMAP.GIF \n active_zoom=t \n controls = startstop, speed, step, looprock, overlay \n' + 
  ' overlay_labels=Map \n controls_style = display:flex;flex-flow:row; \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


This webapp Copyright© 2019 by Tom Whittaker