Web_Designer_UK__May_2018

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