{"id":114,"date":"2022-12-01T13:38:53","date_gmt":"2022-12-01T13:38:53","guid":{"rendered":"https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/?page_id=114"},"modified":"2023-03-07T07:33:10","modified_gmt":"2023-03-07T07:33:10","slug":"image-hotspots","status":"publish","type":"page","link":"https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/image-hotspots\/","title":{"rendered":"Image Hotspots"},"content":{"rendered":"<div id=\"yui_3_17_2_1_1669896416198_1692\">\n<h1>&nbsp;<\/h1>\n<div id=\"content\">\n<section id=\"post-content\" role=\"main\">\n<div id=\"yui_3_17_2_1_1669896416198_1695\">\n<div id=\"block-system-main\">\n<div id=\"yui_3_17_2_1_1669896416198_1696\">\n<div id=\"yui_3_17_2_1_1669896416198_1697\">\n<div id=\"yui_3_17_2_1_1669896416198_1698\">\n<div id=\"yui_3_17_2_1_1669896416198_1699\">\n<div id=\"yui_3_17_2_1_1669896416198_1700\">\n<p><iframe loading=\"lazy\" title=\"Tutorial Image Hotspots\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/DnHvbEwP2_0?feature=oembed&#038;wmode=opaque\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/p>\n<p id=\"yui_3_17_2_1_1669896416198_1701\">&nbsp;Image hotspots te permite colocar&nbsp; zonas interactivas sobre im\u00e1genes y gr\u00e1ficos. Al hacer click sobre los puntos, aparecer\u00e1 un texto, imagen o v\u00eddeo. Con esta actividad puedes crear infograf\u00edas interactivas atrayentes de forma r\u00e1pida&nbsp; sin depender de terceras aplicaciones.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"yui_3_17_2_1_1669896416198_1710\">\n<div id=\"yui_3_17_2_1_1669896416198_1711\">\n<div id=\"yui_3_17_2_1_1669896416198_1712\">\n<p><code><div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-21\" class=\"h5p-iframe\" data-content-id=\"21\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Parts of the plant\"><\/iframe><\/div><\/code><\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"guides-header-3\">Paso 1. Crea una actividad de Image Hotspots<\/h2>\n<p id=\"yui_3_17_2_1_1669896416198_1732\">Selecciona la opci\u00f3n <strong id=\"yui_3_17_2_1_1669896416198_1733\">Nuevo contenido&nbsp; y elije&nbsp; <\/strong><strong id=\"yui_3_17_2_1_1669896416198_1734\">Image Hotspots<\/strong> &nbsp;de la lista de tipos de contenido:<\/p>\n<p id=\"yui_3_17_2_1_1669896416198_1735\"><img loading=\"lazy\" decoding=\"async\" id=\"yui_3_17_2_1_1669896416198_1736\" src=\"https:\/\/h5p.org\/sites\/default\/files\/image-hotspots.png\" alt=\"\" width=\"1377\" height=\"1203\"><\/p>\n<h2 id=\"guides-header-4\">Paso 2: Editor de Image Hotspots<\/h2>\n<h3 id=\"guides-header-4\">La parte superior del editor se ve as\u00ed:<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/075.png\" alt=\"\" width=\"1440\" height=\"1070\"><\/p>\n<h2 id=\"guides-header-5\">Paso 3. Imagen de fondo<\/h2>\n<p>Ten en cuenta dos cosas al seleccionar una imagen de fondo:<\/p>\n<ul>\n<li>La imagen se escalar\u00e1 (proporcionalmente) para ajustarse al ancho m\u00e1ximo del contenedor en el que se coloca.&nbsp;<\/li>\n<li>Es posible ver los puntos de acceso de la imagen en pantalla completa.<\/li>\n<\/ul>\n<p>Por lo tanto, elije una imagen con una resoluci\u00f3n adecuada.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-278 size-full\" src=\"https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/files\/2023\/03\/imagen-fondo.png\" alt=\"\" width=\"881\" height=\"370\" srcset=\"https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/files\/2023\/03\/imagen-fondo.png 881w, https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/files\/2023\/03\/imagen-fondo-300x126.png 300w, https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/files\/2023\/03\/imagen-fondo-768x323.png 768w\" sizes=\"(max-width: 881px) 100vw, 881px\" \/><\/p>\n<h2 id=\"guides-header-6\">Paso 4. Iconos y Color<\/h2>\n<p>Elige el tipo de icono que quieres que aparezca y el color del mismo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/02_6.png\" alt=\"\" width=\"295\" height=\"294\"><\/p>\n<p>Puedes elegir de la lista de <strong>iconos predefinidos<\/strong> o cargar un icono personalizado:<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/h5p.org\/sites\/default\/files\/icons.png\" alt=\"\" width=\"348\" height=\"339\"><\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"guides-header-7\">Paso 5. Crea un punto de acceso<\/h2>\n<p>Cada punto de acceso tiene los siguientes atributos:<\/p>\n<ul>\n<li>Encabezamiento<\/li>\n<li>Posici\u00f3n del punto de acceso<\/li>\n<li>Contenido emergente<\/li>\n<\/ul>\n<p>Puedes agregar tantos puntos de acceso como desees.<\/p>\n<p>El <strong>encabezado&nbsp;<\/strong> es el t\u00edtulo del punto de acceso y se revelar\u00e1 cuando el usuario haga click en&nbsp; el bot\u00f3n.<\/p>\n<p>Haz clic en cualquier parte de la imagen donde desees establecer un punto de acceso. Aparecer\u00e1 el c\u00edrculo verde para indicar <strong>la posici\u00f3n<\/strong> de un nuevo punto de acceso. El punto de acceso se puede cambiar de posici\u00f3n haciendo clic nuevamente en un lugar diferente de la imagen.<\/p>\n<p><strong>El contenido emergente<\/strong> puede ser:<\/p>\n<ul>\n<li>Texto<\/li>\n<li>v\u00eddeo<\/li>\n<li>Imagen<\/li>\n<\/ul>\n<h2 id=\"guides-header-8\">Paso 6<strong>. Terminando<\/strong><\/h2>\n<p>Presiona el bot\u00f3n <strong>Agregar punto de acceso<\/strong> para agregar los puntos de acceso que necesites<\/p>\n<p><strong>Recuerda siempre guardar<\/strong><strong> la actividad.<br \/>\n<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; &nbsp;Image hotspots te permite colocar&nbsp; zonas interactivas sobre im\u00e1genes y gr\u00e1ficos. Al hacer click sobre los puntos, aparecer\u00e1 un texto, imagen o v\u00eddeo. Con esta actividad puedes crear infograf\u00edas interactivas atrayentes de forma&#46;&#46;&#46;<\/p>\n","protected":false},"author":10977,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ngg_post_thumbnail":0,"footnotes":""},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/wp-json\/wp\/v2\/pages\/114"}],"collection":[{"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/wp-json\/wp\/v2\/users\/10977"}],"replies":[{"embeddable":true,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":6,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/wp-json\/wp\/v2\/pages\/114\/revisions"}],"predecessor-version":[{"id":282,"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/wp-json\/wp\/v2\/pages\/114\/revisions\/282"}],"wp:attachment":[{"href":"https:\/\/blogsaverroes.juntadeandalucia.es\/creah5p\/wp-json\/wp\/v2\/media?parent=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}