HTML5 eLearning Content Development with H5P – Open Source and Free to Use!
H5P Roadmap
H5P Documentation
A site for demonstrating H5P content and applications

25 HTML5 e-Learning Authoring Tools





有關H5P的Image Hotspots功能(而且另外還有可安裝在Wordpress、Moodle、Drupal的套件喔)，非常適合用來製作圖說，下列是用湖心亭的照片做了一個範例:

https://h5p.org/node/125733



其建立方式如下(參閱Image Hotspots Tutorial):



Step 1: Create New Content




Step 2: 輸入Title，並選擇建立類型為 Image Hotspots




Step 3: 先上傳一張Background image




Step 4: 再一一建立每個Hotspot的內容。先指定Hotspot position，並勾選"Cover entire background image"。然後建立第一個item為Text類型，輸入要說明的文字。再建立第二個item為Image類型，上傳照片。 依此類推，用ADD HOTSPOT將每個特寫照片都逐一建立起來.....





Step 5:  在Options勾選要顯示哪些按鈕，最後按下Save儲存。如果有勾選Embed button，就能複製其語法，嵌入到其他網頁。