{"id":129134,"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":"2021-12-30T16:16:34","modified_gmt":"2021-12-30T15:16:34","slug":"how-to-create-interactive-images","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/prototypen-interaktive-bilder","title":{"rendered":"Wie man interaktive Bilder prototypisiert"},"content":{"rendered":"<p>In diesem Artikel lernen Sie, wie Sie einen Prototyp f\u00fcr ein interaktives Bild erstellen. Sie werden einen Bereich auf einem Bild definieren, so dass Text erscheint, wenn Sie die Maus dar\u00fcber bewegen. <\/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>So bauen Sie es auf:<\/p>\n<h3>Siehe<\/h3>\n<ul>\n<li>Klicken Sie auf &#8222;Bild&#8220; (wenn Sie auf dieses Werkzeug klicken, wird ein Datei-Explorer angezeigt, mit dem Sie eine Bilddatei ausw\u00e4hlen k\u00f6nnen). Nachdem Sie eine Datei ausgew\u00e4hlt haben, k\u00f6nnen Sie w\u00e4hlen, wo sie im Canvas platziert werden soll. Sie k\u00f6nnen auch das Widget &#8222;Bild&#8220; aus der Bibliothek &#8222;Basis-Widget&#8220; auf den Canvas ziehen und darauf doppelklicken, um Ihr Bild zu laden. <\/li>\n<li>W\u00e4hlen Sie &#8222;Hotspot&#8220; und legen Sie es \u00fcber Ihr Bild. Sie k\u00f6nnen das Widget &#8222;Hotspot&#8220; auch aus der Registerkarte &#8222;Navigation&#8220; unter der Bibliothek &#8222;Basis-Widget&#8220; ziehen; passen Sie die Position an, um den Bereich abzudecken, in dem Sie die Aktion anbringen m\u00f6chten.<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\">Ziehen Sie den &#8222;Text&#8220;, platzieren Sie ihn auf der Leinwand und gehen Sie in die Eigenschaften-Palette, um ihn auszublenden, indem Sie auf das Symbol &#8222;In der Simulation ausgeblendet&#8220; klicken.<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>Ereignisse<\/h3>\n<p>W\u00e4hlen Sie den &#8222;Hotspot&#8220;, gehen Sie zur Palette &#8222;Ereignisse&#8220; und klicken Sie auf &#8222;Ereignis hinzuf\u00fcgen&#8220;.<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>Klicken Sie im Dialogfeld auf das Dropdown-Men\u00fc &#8222;Ausl\u00f6ser w\u00e4hlen&#8220;, bewegen Sie den Mauszeiger \u00fcber den Abschnitt &#8222;Maus&#8220; und w\u00e4hlen Sie &#8222;bei Mauskontakt&#8220;.<\/li>\n<li>W\u00e4hlen Sie unter &#8222;Aktion w\u00e4hlen&#8220; die Option &#8222;Ausgeblendetes Element anzeigen&#8220; und w\u00e4hlen Sie den &#8222;Text&#8220;. Klicken Sie auf &#8222;Ok&#8220;, um die Erstellung des Ereignisses abzuschlie\u00dfen.<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>Simulieren Sie Ihren Prototyp.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Artikel lernen Sie, wie Sie einen Prototyp f\u00fcr ein interaktives Bild erstellen. Sie werden einen Bereich auf einem Bild definieren, so dass Text erscheint,&#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":[8553,8548],"tags":[],"class_list":["post-129134","post","type-post","status-publish","format-standard","hentry","category-erweiterte-interaktionen","category-erweiterte-anleitungen"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129134"}],"collection":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/comments?post=129134"}],"version-history":[{"count":0,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/posts\/129134\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/media?parent=129134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/categories?post=129134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/de\/wp-json\/wp\/v2\/tags?post=129134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}