{"id":7818,"date":"2012-07-18T16:34:22","date_gmt":"2012-07-18T14:34:22","guid":{"rendered":"http:\/\/flaven.fr\/?p=7818"},"modified":"2012-07-18T16:34:22","modified_gmt":"2012-07-18T14:34:22","slug":"exemple-realiser-un-menu-interactif","status":"publish","type":"post","link":"https:\/\/flaven.fr\/2012\/07\/exemple-realiser-un-menu-interactif\/","title":{"rendered":"Exemple &#8211; R\u00e9aliser un menu interactif"},"content":{"rendered":"<p><iframe loading=\"lazy\" style=\"box-shadow:0px 0px 5px #bbb;\" width=\"960\" height=\"540\" scrolling=\"no\" frameborder=\"0\" name=\"3wdoc-embed\" src=\"http:\/\/story.3wdoc.com\/cb6c4c2fad07ad2d52469550411ab7460d3d46da98b7af0680e626e7dd5eb88575\/9\/index.html\"><\/iframe><\/p>\n<h4>D\u00e9finitions<\/h4>\n<p>Nous avons r\u00e9alis\u00e9 un menu interactif simple mais efficace, avec en arri\u00e8re-plan une vid\u00e9o.<br \/>\nVous pouvez aller voir le projet sur <a href=\"http:\/\/story.3wdoc.com\/cb6c4c2fad07ad2d52469550411ab7460d3d46da98b7af0680e626e7dd5eb88575\/9\/index.html\">sa page de publication<\/a>.<\/p>\n<h4>La page M\u00e9dia manager<\/h4>\n<p>En premier lieu nous avons upload\u00e9 la vid\u00e9o n\u00e9cessaire.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_menuInteractif_media.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_menuInteractif_media.jpg\" alt=\"Exemple - R\u00e9aliser un menu interactif\" title=\"Exemple - R\u00e9aliser un menu interactif\" width=\"960\" height=\"314\" class=\"alignnone size-full wp-image-7825\" \/><\/a><\/p>\n<h4>La page Editor<\/h4>\n<p>Dans la timeline on peux voir la vid\u00e9o, les quatre points du menu qui sont des Articles, et les quatre \u00e9tiquettes, des Articles aussi, qui ont<strong> une dur\u00e9e de 0s car nous allons les appeler \u00e0 l&#8217;aide de l&#8217;\u00e9v\u00e8nement Show<\/strong>.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_menuInteractif_editor.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_menuInteractif_editor.jpg\" alt=\"Exemple - R\u00e9aliser un menu interactif\" title=\"Exemple - R\u00e9aliser un menu interactif\" width=\"960\" height=\"643\" class=\"alignnone size-full wp-image-7821\" \/><\/a><\/p>\n<p>L&#8217;\u00e9l\u00e9ment important de ce menu est l&#8217;utilisation de l&#8217;\u00e9v\u00e8nement Show. Au survol de la souris sur chaque point, une \u00e9tiquette avec un intitul\u00e9 de chapitre va appara\u00eetre.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_menuInteractif_editor2.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_menuInteractif_editor2.jpg\" alt=\"Exemple - R\u00e9aliser un menu interactif\" title=\"Exemple - R\u00e9aliser un menu interactif\" width=\"960\" height=\"212\" class=\"alignnone size-full wp-image-7822\" \/><\/a><\/p>\n<h4>La page Projet<\/h4>\n<p>Pour ce projet, nous avons gliss\u00e9 notre s\u00e9quence dans le Storybuilder, puis <strong>nous avons coch\u00e9 la case Autoplay <\/strong> par contre la case Plein \u00e9cran n&#8217;a pas \u00e9t\u00e9 coch\u00e9e.<\/p>\n<p><a href=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_menuInteractif_project.jpg\" rel=\"gallery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/flaven.fr\/wp-content\/uploads\/2012\/07\/exemple_menuInteractif_project.jpg\" alt=\"Exemple - R\u00e9aliser un menu interactif\" title=\"Exemple - R\u00e9aliser un menu interactif\" width=\"960\" height=\"606\" class=\"alignnone size-full wp-image-7824\" \/><\/a><\/p>\n<p>Le projet est maintenant publi\u00e9, nous pouvons le partager ou l&#8217;int\u00e9grer dans votre site gr\u00e2ce aux diff\u00e9rents du types d&#8217;exportation disponibles. <strong>Dans cette page par exemple, nous avons choisi d&#8217;ins\u00e9r\u00e9 cette cr\u00e9ation \u00e0 l&#8217;aide d&#8217;une iframe.<\/strong><br \/>\nPour en savoir plus sur l&#8217;utilisation de ces codes d&#8217;exportation, vous pouvez consulter <a href=\"https:\/\/flaven.fr\/2012\/06\/27\/inserer-une-creation-3wdoc-dans-une-page-html-profiter-de-la-fonction-dexport-et-de-partage-de-3wdoc\/\">cet article<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>D\u00e9finitions Nous avons r\u00e9alis\u00e9 un menu interactif simple mais efficace, avec en arri\u00e8re-plan une vid\u00e9o. Vous pouvez aller voir le projet sur sa page de&hellip; <\/p>\n<p class=\"text-center\"><a href=\"https:\/\/flaven.fr\/2012\/07\/exemple-realiser-un-menu-interactif\/\" class=\"more-link\">Continue reading &rarr; <span class=\"screen-reader-text\">Exemple &#8211; R\u00e9aliser un menu interactif<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bf_ai_meta_description":"Un menu interactif avec vid\u00e9o de fond. Utilisation de l\u2019\u00e9v\u00e9nement Show pour afficher des chapitres au survol. Outils et r\u00e9sultats d\u00e9taill\u00e9s.","bf_ai_og_title":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[3433,1],"tags":[1691,2185,285,2267,799,337,1692,2261,154,1110,606,2243,1660,2213],"class_list":["post-7818","post","type-post","status-publish","format-standard","hentry","category-3wdoc-tutorials","category-miscellaneous-other","tag-duree","tag-html5","tag-image","tag-interactif","tag-interactives","tag-media","tag-menu","tag-narration","tag-photos","tag-sequence","tag-storytelling","tag-technique","tag-timeline","tag-video"],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3Vuhl-226","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/7818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/comments?post=7818"}],"version-history":[{"count":0,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/posts\/7818\/revisions"}],"wp:attachment":[{"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/media?parent=7818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/categories?post=7818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flaven.fr\/happy-api\/wp\/v2\/tags?post=7818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}