Differences

This shows you the differences between two versions of the page.

--- media_morph_images_page [2022/12/02 10:53] – removed - external edit (Unknown date) 127.0.0.1
+++ media_morph_images_page [2023/09/25 09:05] (current) – [Further Information] jsmith
@@ Line 1: / Line 1: @@
+====== Media > Morph Images ======
+This [[pagetypes|page]] allows an initial image to fade out as a second image fades in.  This can be done to;
+  * create the impression of zooming in, as the demo below illustrates
+  * or to create a kind of "before and after" effect.
+To create a zoom-in effect, you create a Zoom Region on the initial image; for the "before and after" effect the Zoom Region might be the __whole __of the initial image.
+===== Example demo =====
+{{url>https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#morphimages}}
+or view at [[https://xot.xerte.org.uk/xapi_launch.php?template_id=116&group=xertepagetypes#morphimages|Xerte Page Types - Media: Morph Images]] (opens in new tab)
+===== Editor interface =====
+{{:xerte-media-morphimages-editor.jpg|Screenshot of Media > Morph Images in editor}}
+==== Core Properties ====
+^ Property ^ Description ^ Type ^ Additional information ^
+| Page Title | Text that appears in the header of the published page.  | Text |   |
+| Page Text | Text and any other content you want to have displayed on the page. | Text+ (Toolbar) | You can add images, tables, sound, video and other content through the Page Text editor.  |
+| Image 1: File | Upload the initial image here, through the Media Browser. | Link to Media Browser |   |
+| Image 1: Description | Enter a Description for Accessibility. | Text |   |
+| Image 2: File | Upload the second image here, through the Media Browser. This is the image which fades in when the learner interacts with the page. | Link to Media Browser |   |
+| Image 2: Description | Enter a Description for Accessibility. | Text  |   |
+| Zoom Speed | The number of seconds for the transition from the initial image to the second image. | Number | Default - "3" |
+There are **no page-specific Optional Properties** for the Core Properties.
+See [[optional_properties#General optional properties|General Optional Properties]]
+==== Language Options ====
+^ Property ^ Description ^ Type ^ Additional information ^
+| Zoom Button Label | Text on the button which initiates the transition to the second image. | Text | Default - "Zoom"   You will need to change this if you want, for example, a "before and after" effect, with no zoom.  |
+==== Zoom Region ====
+If you want to create a zoom-in effect, you need to identify the region of the initial image to zoom in on.  In the Project structure click on the + icon next to your Morph Images page.
+{{ :xerte-media-morphimages-zoomregion.jpg?250 }}
+This will reveal the Zoom Region "nested page". Click on it to edit.
+{{ :xerte-media-morphimages-zoomregion2.jpg?250 }}
+^ Property ^ Description ^ Type ^ Additional information ^
+| Zoom Region Label | This is just a label which appears in the project structure in the authoring programme. It is not visible to learners. | Text |   |
+| Edit Hotspot. | This is used to create the zoom region. Click on the thumbnail to open the Hotspot Editor. | Link to Hotspot Editor |   |
+There is only one Optional Property, which allows you to add a Tooltip which is read aloud in screen readers.
+===== Further Information =====
+If you are creating the zoom-in effect, it can be fiddly to ensure  that Image 2 and the Zoom Region match up. You will probably have to display Image 2 in another application, for comparison as you edit the Hotspot, and adjust the borders accordingly.
+{{tag>pagetype media}}