Views
2 weeks ago

Web_Designer_UK__May_2018

LightBox Brand Love

LightBox Brand Love Score Create an interactive navigation controlled image caption Employ the power of attributes to tell your story with the help of captions 1. Get started The first step is to define the document architecture that will be used to present the page content. This consists of a definition of the HTML document, which stores a head and body section. While the head section is used to load the JavaScript and CSS resources, the body section is used to store the content created in step 2. Picture Caption Navigationr *** STEP 2 HERE 2. Body content The page content consists of two child containers; an article container that stores a navigation and a figure for storing text corresponding to the navigation options. The navigation contains the interaction options, and each have a unique title attribute. The figure stores the caption text that corresponds to the equivalently positioned option located within the navigation container. Page 1 Page 2 Page 3 Caption 1 Caption 2 Caption 3 3. JavaScript listening Create a new file called 'code.js'. There’s a need to set the value of the article’s 'data-theme' attribute to match the navigation option being highlighted by the user. JavaScript will wait until the page has loaded, upon which it will find all of the navigation links in order to apply a 'mouseover' event listener. This listener will update the article’s 'data-theme' attribute to match the hovered navigation option’s title attribute. window.addEventListener("load", function() { var nodes = document. querySelectorAll("[data-theme] nav > *"); for(var i=0; i

NEW YORK | 25–27 APRIL 2018 DONNA LICHAW WES BOS ABBY COVERT DAN MALL VAL HEAD and more! TICKETS ON SALE NOW www.generateconf.com #generateconf