LTI - H5P - Image Hotspots

Open

Create an image with multiple information hotspots.

This is a free HTML5 based content type allowing creatives to add hotspots to images. Hotspots may reveal texts, images and videos when clicked. All you need to create this content type is the H5P plugin for WordPress, Moodle or Drupal.

This functions as a presentation and includes the following interactivity(s): – multimedia.

Use

A stand alone content type, this cannot be incorporated into others. For more information on how H5P types work and how they interact, see http://humtech.ucla.edu/instructional-support/ccle-activities-resources/h5p/.

Image hotspots can be useful for creating infographics quickly and simply. Use any image and enrich it with points of interest and in-depth information about the details depicted. The user is engaged by interacting with the image.

Instructions

1. Navigate to the “Pages” section in the lefthand navigation panel of your course site.

2. Click the blue “+Page” button on the upper righthand corner of the screen.

3. After entering a title, locate the plug-in icon in the menu bar of the editor. Select “Interactive Content - H5P” or “View All” if it does not show up as an option. Should you have to click “View All,” a window will appear. Click “Interactive Content - H5P.”

   Open

   

4. Click the blue “+Add content” button.

   Open

   

5. Wait a few seconds for the options to load. Scroll and select “Image Hotspots.” Enter a title, upload a background image, and create the hotspots. Click “Save and Insert.” Your content should now display.

Sample

Help and Resources

• Video tutorial – Image Hotspots Tutorial

• Text tutorial – Image Hotspots Tutorial

• How to add H5P interactive content to your course site – (http://humtech.ucla.edu/instructional-support/ccle-activities-resources/h5p/adding-h5p-interactive-content-ccle-course/)

• H5P – (H5P)

  • Content author guide – (https://h5p.org/documentation/for-authors)

  • Tutorials for authors – (https://h5p.org/documentation/for-authors/tutorials)

  • Multilingual content – (https://h5p.org/multilingual-content)

Logo and sample from https://h5p.org/documentation/for-authors/tutorials.