{"id":269,"date":"2018-06-06T18:21:24","date_gmt":"2018-06-06T18:21:24","guid":{"rendered":"http:\/\/pressbooks.library.ryerson.ca\/h5pbook\/?post_type=chapter&#038;p=269"},"modified":"2018-06-07T20:31:55","modified_gmt":"2018-06-07T20:31:55","slug":"image-hotspots","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/chapter\/image-hotspots\/","title":{"raw":"Image Hotspots","rendered":"Image Hotspots"},"content":{"raw":"<a href=\"http:\/\/pressbooks.library.ryerson.ca\/h5pbook\/wp-content\/uploads\/sites\/27\/2018\/06\/image-hotspots-icon-color.png\"><img src=\"http:\/\/pressbooks.library.ryerson.ca\/h5pbook\/wp-content\/uploads\/sites\/27\/2018\/06\/image-hotspots-icon-color.png\" alt=\"\" width=\"240\" height=\"180\" class=\"alignleft size-full wp-image-270\" \/><\/a>Image hotspots makes it possible to create an image with interactive hotspots. When the user clicks on a\u00a0 hotspot, a popup containing a header and text or video is displayed. Using the H5P editor, you may add as many hotspots as you like. You can configure:\r\n<ul>\r\n \t<li>The number of hotspots<\/li>\r\n \t<li>The placement of each hotspot, and the associated popup content<\/li>\r\n \t<li>The colour of the hotspot<\/li>\r\n<\/ul>\r\n<h2>Example of Image Hotspots Content Type<\/h2>\r\n<span>[h5p id=\"22\"]<\/span>","rendered":"<p><a href=\"http:\/\/pressbooks.library.ryerson.ca\/h5pbook\/wp-content\/uploads\/sites\/27\/2018\/06\/image-hotspots-icon-color.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/pressbooks.library.ryerson.ca\/h5pbook\/wp-content\/uploads\/sites\/27\/2018\/06\/image-hotspots-icon-color.png\" alt=\"\" width=\"240\" height=\"180\" class=\"alignleft size-full wp-image-270\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-content\/uploads\/sites\/27\/2018\/06\/image-hotspots-icon-color.png 240w, https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-content\/uploads\/sites\/27\/2018\/06\/image-hotspots-icon-color-65x49.png 65w, https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-content\/uploads\/sites\/27\/2018\/06\/image-hotspots-icon-color-225x169.png 225w\" sizes=\"auto, (max-width: 240px) 100vw, 240px\" \/><\/a>Image hotspots makes it possible to create an image with interactive hotspots. When the user clicks on a\u00a0 hotspot, a popup containing a header and text or video is displayed. Using the H5P editor, you may add as many hotspots as you like. You can configure:<\/p>\n<ul>\n<li>The number of hotspots<\/li>\n<li>The placement of each hotspot, and the associated popup content<\/li>\n<li>The colour of the hotspot<\/li>\n<\/ul>\n<h2>Example of Image Hotspots Content Type<\/h2>\n<p><span><\/p>\n<div id=\"h5p-22\">\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-22\" class=\"h5p-iframe\" data-content-id=\"22\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Provinces\/Territories of Canada\"><\/iframe><\/div>\n<\/div>\n<p><\/span><\/p>\n","protected":false},"author":2,"menu_order":22,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-269","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-json\/pressbooks\/v2\/chapters\/269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-json\/wp\/v2\/users\/2"}],"version-history":[{"count":2,"href":"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-json\/pressbooks\/v2\/chapters\/269\/revisions"}],"predecessor-version":[{"id":317,"href":"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-json\/pressbooks\/v2\/chapters\/269\/revisions\/317"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-json\/pressbooks\/v2\/chapters\/269\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-json\/wp\/v2\/media?parent=269"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-json\/pressbooks\/v2\/chapter-type?post=269"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-json\/wp\/v2\/contributor?post=269"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/h5pbook\/wp-json\/wp\/v2\/license?post=269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}