<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="nkh-grid-container"> <div class="nkh-grid-item" data-grid-href= "/en/Nikon-Products/Product/Digital-SLR-Cameras/1526/Nikon-Df.html" data-grid-image-prefix="df" data-grid-item-id="Nikon Df" id= "nkh-grid-item-0"> <div class="nkh-grid-item-media"><img class= "nkh-grid-default-image" src= "//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/df.jpg"></div> </div> <div class="nkh-grid-item" data-grid-href= "/en/Nikon-Products/Product/Nikon1/27695/Nikon-1-V3.html" data-grid-image-prefix="nikon-v3ft1" data-grid-item-id= "Nikon V3 + FT-1" id="nkh-grid-item-1"> <div class="nkh-grid-item-media"><img class= "nkh-grid-default-image" src= "//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/nikon-v3ft1.jpg"></div> </div> <div class="nkh-grid-item" data-grid-href= "/en/Nikon-Products/Photography-Accessories/Videos-And-DVDs.page#!/tag:7WA:VIDEO" data-grid-image-prefix="nikon-books" data-grid-item-id="Nikon Books" id="nkh-grid-item-2"> <div class="nkh-grid-item-media"><img class= "nkh-grid-default-image" src= "//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/nikon-books2.jpg"></div> </div> <div class="nkh-grid-item" data-grid-href= "/en/Nikon-Store/Logo-Items.page?cid=web-0514-logo-items-hp" data-grid-image-prefix="nikon-merchandise" data-grid-item-id= "Nikon Merchandise" id="nkh-grid-item-3"> <div class="nkh-grid-item-media"><img class= "nkh-grid-default-image" src= "//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/nikon-merchandise.jpg"></div> </div> <div class="nkh-grid-item nkh-new-win" data-grid-href= "http://cinema.nikonusa.com/" data-grid-image-prefix="nikon-cinema" data-grid-item-id="Nikon Cinema" id="nkh-grid-item-4"> <div class="nkh-grid-item-media"><img class= "nkh-grid-default-image" src= "//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/nikon-cinema.jpg"></div> </div> <div class="nkh-grid-item nkh-new-win" data-grid-href= "https://www.youtube.com/watch?v=-aqt_cTjZd8&list=UUjmEbz8wosl__h2opGT5k2w" data-grid-image-prefix="behind-the-scenes" data-grid-item-id= "Behind the Scenes" id="nkh-grid-item-5"> <div class="nkh-grid-item-media"><img class= "nkh-grid-default-image" src= "//cdn-7.nikon-cdn.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/behind-the-scenes.jpg"></div> </div> </div>

#nkh-grid-container { height: 670px; margin: 0 auto; position: relative; width: 900px; } .nkh-grid-item { background-color: #fff; border: solid 1px #e4e4e4 !important; cursor: pointer; overflow: hidden; position: absolute; } .nkh-grid-item-media { position: relative; height: 100%; width: 100%; } .nkh-grid-item-media img { position: absolute; top: 0; left: 0; } #nkh-grid-item-0 { height: 208px; left: 0; top: 0; width: 438px; } #nkh-grid-item-1 { height: 208px; right: 0; top: 0; width: 438px; } #nkh-grid-item-1 .nkh-grid-item-img-replacement { top: 0; left: auto; right: 0; } #nkh-grid-item-2 { bottom:0; height:438px; left:0; width:208px; } #nkh-grid-item-2 .nkh-grid-item-img-replacement { bottom: 0; top: auto; left: 0; right: auto; } #nkh-grid-item-3 { height: 208px; top: 230px; right: 0; width: 668px; } #nkh-grid-item-3 .nkh-grid-item-img-replacement { bottom: 50%; top: 50%; left: auto; margin-top: -334px; right: 0; } #nkh-grid-item-4 { bottom: 0; height: 208px; left: 230px; width: 438px; } #nkh-grid-item-4 .nkh-grid-item-img-replacement { bottom: 0; top: auto; left: 50%; margin-left: -449px; right: 50%; } #nkh-grid-item-5 { bottom: 0; height: 208px; right: 0; width: 208px; } #nkh-grid-item-5 .nkh-grid-item-img-replacement { bottom: 0; top: auto; left: auto; right: 0; } .nkh-grid-item-img-replacement { display: none; }

var hideItems = 0; function hideItemF() { $('.nkh-grid-item').each(function(){ $('.nkh-grid-item-img-replacement', this).fadeOut(250, function(){ $(this).remove(); }); }); } $('.nkh-grid-item').hover( function(){ var imgSetId = $(this).attr('data-grid-image-prefix'); if(hideItems) { clearTimeout(hideItems); } $('.nkh-grid-item').each(function(step){ var par = $(this); if(step == 0) { bgPos = 'top left'; } else if(step == 1) { bgPos = 'top right'; } else if(step == 2) { bgPos = 'bottom left'; } else if(step == 3) { bgPos = 'center right'; } else if(step == 4) { bgPos = 'bottom center'; } else if(step == 5) { bgPos = 'bottom right'; } $('<img/>').addClass('nkh-grid-item-img-replacement').attr({ src: '//nikonusa.com/en_US/IMG/Images/CPCAssets/homepage/img/grid/' + imgSetId + '-full.jpg'}).appendTo($('.nkh-grid-item-media', $(par))).delay(step * 100).fadeIn(250); }); }, function(){ hideItems = setTimeout(hideItemF, 350); }); $('.nkh-grid-item').click(function(){ var gridItemId = $(this).attr('data-grid-item-id'); var gridHref = $(this).attr('data-grid-href'); s.linkTrackVars = 'prop19,eVar32,events'; s.linkTrackEvents = s.events = 'event47'; s.prop19 = s.eVar32 = 'mid-page-banner>' + gridItemId; s.tl(this, 'o', 'Home Page – Mid-Page Banner'); s.linkTrackEvents = s.linkTrackVars = 'None'; if($(this).hasClass('nkh-new-win')) { window.open(gridHref); } else { window.location = gridHref; } });