{"id":124676,"date":"2021-12-30T16:16:34","date_gmt":"2021-12-30T15:16:34","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-interactive-images\/"},"modified":"2025-02-03T16:44:37","modified_gmt":"2025-02-03T15:44:37","slug":"how-to-create-interactive-images","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/es\/soporte\/como-prototipar-imagenes-interactivas","title":{"rendered":"C\u00f3mo crear prototipos de im\u00e1genes interactivas"},"content":{"rendered":"<p>En este art\u00edculo aprender\u00e1s a crear el prototipo de una imagen interactiva. Definir\u00e1s una regi\u00f3n en una imagen para que aparezca texto cuando pases el rat\u00f3n por encima. <\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73249312\/index.html\" width=\"820px\" height=\"310px\" frameborder=\"0\"><\/iframe><\/p>\n<p>As\u00ed es como se construye:<\/p>\n<h3>Ver<\/h3>\n<ul>\n<li>Haz clic en \u00abImagen\u00bb (al hacer clic en esta herramienta aparecer\u00e1 un explorador de archivos para seleccionar un archivo de imagen). Despu\u00e9s de seleccionar un archivo, puedes elegir d\u00f3nde colocarlo en el lienzo; tambi\u00e9n puedes arrastrar el widget \u00abImagen\u00bb de la biblioteca \u00abWidget b\u00e1sico\u00bb al lienzo y hacer doble clic en \u00e9l para cargar tu imagen. <\/li>\n<li>Selecciona \u00abHotspot\u00bb y col\u00f3calo encima de tu imagen; tambi\u00e9n puedes arrastrar el widget \u00abHotspot\u00bb desde la pesta\u00f1a de navegaci\u00f3n de la biblioteca \u00abWidget b\u00e1sico\u00bb; ajusta la posici\u00f3n para que cubra la zona donde quieras fijar la acci\u00f3n.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/interactive-images-1.png\" alt=\"eyeicon3\" width=\"301\" height=\"438\"><\/li>\n<li><span data-preserver-spaces=\"true\">Arrastra el \u00abTexto\u00bb, col\u00f3calo en el lienzo y ve a la paleta Propiedades para ocultarlo haciendo clic en el icono \u00abOculto en simulaci\u00f3n\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/interactive-images-2.png\" alt=\"eyeicon3\" width=\"301\" height=\"438\"><\/span><\/li>\n<\/ul>\n<h3>Eventos<\/h3>\n<p>Selecciona el \u00abHotspot\u00bb, ve a la paleta Eventos, haz clic en \u00abA\u00f1adir evento\u00bb.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/interactive-images-3.png\" alt=\"eyeicon3\" width=\"301\" height=\"438\"><\/p>\n<ol>\n<li>En el cuadro de di\u00e1logo, haz clic en el men\u00fa desplegable \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abal pasar el rat\u00f3n\u00bb.<\/li>\n<li>En \u00abElegir Acci\u00f3n\u00bb selecciona \u00abMostrar elemento oculto\u00bb y selecciona el \u00abTexto\u00bb. Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-71802\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/interactive-images-4.png\" alt=\"eyeicon3\" width=\"301\" height=\"438\"><\/li>\n<\/ol>\n<p>Simula tu prototipo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo aprender\u00e1s a crear el prototipo de una imagen interactiva. Definir\u00e1s una regi\u00f3n en una imagen para que aparezca texto cuando pases el rat\u00f3n&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8434,8424],"tags":[],"class_list":["post-124676","post","type-post","status-publish","format-standard","hentry","category-interacciones-avanzadas","category-trucos-avanzados"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124676"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124676"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124676\/revisions"}],"predecessor-version":[{"id":126171,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124676\/revisions\/126171"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}