Example 11a: Hotzones and Hoverzones in a Scaled Window

This is an example of using hotspots, hotzones, and hoverzones, but in a scaled window. The original images are 800x400, and here we set the window_size = 400,200

Two SSEC logos have been added as icon hotspots-- one is set to pan so it will roam around with the zoomed image; the other is set to nopan so it will stay in a fixed position on the screen. Both are clickable...

In the file_of_filenames, the following entries are made for these hotspots: hotspot=400,20,icon,ssec_logo.png,nopan,link,http://www.ssec.wisc.edu,Icon 'nopan' hotspot -- click to go to the SSEC web site hotspot=350,300,icon,ssec_logo.png,pan,link,http://www.ssec.wisc.edu,Icon 'pan' hotspot -- click to go to the SSEC web site

Be sure to click the Zoom button and then zoom in and roam around...

And we added a little more "styling" using:
imagecan_style = border-radius:50px;
divcan_style = background:linear-gradient(green,pink);


Go To Front Page
Next Example
This webapp Copyright© 2014-2017 by Tom Whittaker