automated maps and overlays in js

css/dist/main.css

@@ -18,12 +18,29 @@ html, body {
     float: right;
     background-position: left; }
   #main .page {
-    background-color: green;
+    position: relative;
     width: 227.41mm;
     height: 207.26mm;
     background-repeat: no-repeat;
     background-size: contain; }
-    #main .page .inner {
+    #main .page .overlay {
+      position: relative;
       width: 100%;
       height: 100%;
-      border: 1px solid blue; }
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      z-index: 1; }
+    #main .page .maps {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 2; }
+      #main .page .maps .map {
+        position: absolute;
+        background-color: rgba(50, 50, 50, 0.8);
+        cursor: pointer; }
+    #main .page.page-6 .overlay {
+      background-image: url("../../images/vectos/04_chance-RB.svg"); }

css/main.scss

@@ -3,7 +3,7 @@ html,body{
   background-color: #1A1A1A;
 }
 
-$debug:true;
+$debug:false;
 $pw:227.41mm;
 $ph:207.26mm;
 $mt:1cm;
@@ -33,6 +33,7 @@ $mi:1cm;
     background-position: left;
   }
   .page{
+    position: relative;
     @if $debug {
       background-color: green;
     }
@@ -42,13 +43,38 @@ $mi:1cm;
     background-repeat: no-repeat;
     background-size: contain;
 
-    .inner{
-      // display:none;
+    .overlay{
+      position: relative;
       width:100%; height:100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      z-index: 1;
+
       @if $debug {
         border: 1px solid blue;
       }
+
+      // img{max-width: 100%;}
+    }
+
+    .maps{
+      position:absolute;
+      top:0; left:0;
+      width:100%; height:100%;
+      z-index: 2;
+      .map{
+        position: absolute;
+        background-color: rgba(50, 50, 50, 0.8);
+        cursor: pointer;
+      }
+    }
+
+    &.page-6 .overlay{
+      background-image: url("../../images/vectos/04_chance-RB.svg")
     }
   }
 
+
+
 }

index.html

@@ -14,14 +14,12 @@
 
     <section id="main">
       <section id="page-left" class="page">
-        <div class="inner">
-
-        </div>
+        <div class="overlay"></div>
+        <div class="maps"></div>
       </section>
       <section id="page-right" class="page">
-        <div class="inner">
-
-        </div>
+        <div class="overlay"></div>
+        <div class="maps"></div>
       </section>
     </section>
 

js/main.js

@@ -1,9 +1,11 @@
 $(document).ready(function() {
   console.log("ready");
 
-  var _current_pages = -1,
+  var _current_pages = 0,
       _page_left_bg, _page_right_bg,
       _$page_left = $('#page-left'), _$page_right = $('#page-right'),
+      _$overlay_left = $('#page-left .overlay'), _$overlay_right = $('#page-right .overlay'),
+      _$maps_left = $('#page-left .maps'), _$maps_right = $('#page-right .maps'),
       _bgs_prefix = "images/pages/";
 
   //     ____      _ __
@@ -13,7 +15,7 @@ $(document).ready(function() {
   // /___/_/ /_/_/\__/
 
   function init(){
-    console.log("init", _$page_left);
+    console.log("init", _PAGES[0].bg);
     initkeyboard();
     changePages();
   };
@@ -41,13 +43,62 @@ $(document).ready(function() {
 
   function changePages(){
     console.log("changePages");
-    _page_left_bg  = _bgs_prefix+_PAGES[_current_pages];
-    _page_right_bg = _bgs_prefix+_PAGES[_current_pages+1];
+    _page_left_bg  = _bgs_prefix+_PAGES[_current_pages].bg;
+    _page_right_bg = _bgs_prefix+_PAGES[_current_pages+1].bg;
     console.log(_page_left_bg+" | "+_page_right_bg);
 
-    _$page_left.css({'background-image': "url("+_page_left_bg+")"});
-    _$page_right.css({'background-image': "url("+_page_right_bg+")"});
+    _$page_left
+      .css({'background-image': "url("+_page_left_bg+")"})
+      .removeClass(pageClassToRemove)
+      .addClass('page-'+_current_pages);
+    _$page_right
+      .css({'background-image': "url("+_page_right_bg+")"})
+      .removeClass(pageClassToRemove)
+      .addClass('page-'+(_current_pages+1));
 
+    updatePagesOverlays();
+  };
+
+  function pageClassToRemove(){
+    var c = $(this).attr('class').match(/page-+\d+/);
+    if(c && c.length)
+      return c[0];
+  };
+
+  function updatePagesOverlays(){
+    console.log("updatePagesOverlays");
+
+    // remove all pages overlays
+    $('.overlay, .maps',_$page_left).children().remove();
+    $('.overlay, .maps',_$page_right).children().remove();
+
+    console.log("Overlays", _PAGES[_current_pages].overlays);
+    // build page_left overlays
+    for (var map in _PAGES[_current_pages].overlays) {
+      if (_PAGES[_current_pages].overlays.hasOwnProperty(map)) {
+        map = _PAGES[_current_pages].overlays[map];
+        console.log("Map",map);
+        _$maps_left.append(
+          $('<div>')
+            .addClass("map")
+            .attr('overlay', map.over)
+            .css({
+              "left":map.x,
+              "top":map.y,
+              "width":map.w,
+              "height":map.h
+            })
+            .bind("mouseover", function(e){
+              $(this)
+                .parents('.page').find('.overlay')
+                  .css({
+                    // 'background-color':"red",
+                    'background-image':'url(images/vectos/'+$(this).attr('overlay')+')'
+                  });
+            })
+        );
+      }
+    }
   };
 
   //     __ __           __                         __

js/pages.json

@@ -1,38 +1,153 @@
 var _PAGES=[
-  "00_1couv.jpeg",
-  "00_1couvV.jpeg",
-  "01_anan.jpeg",
-  "02_TH.jpeg",
-  "03_ologyOf.jpeg",
-  "04_chance.jpeg",
-  "05_Stories.jpeg",
-  "06_byGeorge.jpeg",
-  "07_Copyright.jpeg",
-  "08_Brecht.jpeg",
-  "100_Williams.jpeg",
-  "104_Wolff.jpeg",
-  "108_Young.jpeg",
-  "110_StraightLine.jpeg",
-  "112_Portrait?.jpeg",
-  "113_4couv.jpeg",
-  "114_4couv.jpeg",
-  "12_Bremer.jpeg",
-  "14_Brown.jpeg",
-  "23_Byrd.jpeg",
-  "26_Cage.jpeg",
-  "28_deMaria.jpeg",
-  "32_Flynt.jpeg",
-  "37_Ono.jpeg",
-  "39_HIggins.jpeg",
-  "41_Ichiyanagi.jpeg",
-  "45_Jennings.jpeg",
-  "48_Dennis.jpeg",
-  "54_DingDong.jpeg",
-  "56_Johnson.jpeg",
-  "58_MacLow.jpeg",
-  "79_Maxfield.jpeg",
-  "90_Simone.jpeg",
-  "92_Paik.jpeg",
-  "94_Riley.jpeg",
-  "99_Rot.jpeg"
-]
+  {
+    "bg":"",
+    "overlays":[]
+  },
+  {
+    "bg":"00_1couv.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"00_1couvV.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"01_anan.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"02_TH.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"03_ologyOf.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"04_chance.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"05_Stories.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"06_byGeorge.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"07_Copyright.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"08_Brecht.jpeg",
+    "overlays":[
+      {"x":0,"y":0,"w":200,"h":200,"over":"04_chance-RB.svg"},
+      {"x":400,"y":400,"w":100,"h":100,"over":"04_chance-RB.svg"}
+    ]
+  },
+  {
+    "bg":"100_Williams.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"104_Wolff.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"108_Young.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"110_StraightLine.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"112_Portrait?.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"113_4couv.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"114_4couv.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"12_Bremer.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"14_Brown.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"23_Byrd.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"26_Cage.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"28_deMaria.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"32_Flynt.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"37_Ono.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"39_HIggins.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"41_Ichiyanagi.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"45_Jennings.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"48_Dennis.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"54_DingDong.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"56_Johnson.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"58_MacLow.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"79_Maxfield.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"90_Simone.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"92_Paik.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"94_Riley.jpeg",
+    "overlays":[]
+  },
+  {
+    "bg":"99_Rot.jpeg",
+    "overlays":[]
+  }
+];