Chart Table

Selecting a type of chart based on the data.

by Salvatore Criscione

HTML

<div class="main-content">

<img class="main-img" src="http://salcriscione.com/portfolio/Code/Charts/Chart%20Table.png" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area class="Row1Col1-shape" href="#" shape="poly" coords="318,49,438,50,438,100,317,101" />
    <area class="Row1Col2-shape" href="#" shape="poly" coords="440,50,559,50,559,101,440,100" />
    <area class="Row1Col3-shape" href="#" shape="poly" coords="561,50,681,49,681,101,561,102" />
    <area class="Row2Col1-shape" href="#" shape="poly" coords="317,103,439,102,438,191,318,191" />
    <area class="Row2Col2a-shape" href="#" shape="poly" coords="441,102,559,103,559,143,440,143" />
    <area class="Row2Col2b-shape" href="#" shape="poly" coords="561,144,559,192,440,191,440,145" />
    <area class="Row2Col3a-shape" href="#" shape="poly" coords="562,104,681,104,682,143,561,142" />
    <area class="Row2Col3b-shape" href="#" shape="poly" coords="563,145,682,145,682,191,561,192" />
    <area class="Row3Col1-shape" href="#" shape="poly" coords="318,193,438,194,437,283,317,282" />
    <area class="Row3Col2a-shape" href="#" shape="poly" coords="441,193,560,194,560,239,440,239" />
    <area class="Row3Col2b-shape" href="#" shape="poly" coords="441,241,560,241,560,282,439,283" />
    <area class="Row3Col3-shape" href="#" shape="poly" coords="562,194,682,193,682,283,563,282" />
    <area class="Row4Col1-shape" href="#" shape="poly" coords="319,283,439,286,438,373,318,374" />
    <area class="Row4Col2-shape" href="#" shape="poly" coords="441,283,561,284,560,373,440,375" />
    <area class="Row4Col3-shape" href="#" shape="poly" coords="563,284,681,285,681,373,563,373" />
    <area class="Row5Col1-shape" href="#" shape="poly" coords="317,376,436,374,438,504,317,505" />
    <area class="Row5Col2-shape" href="#" shape="poly" coords="440,377,560,376,560,503,440,504" />
    <area class="Row5Col3-shape" href="#" shape="poly" coords="563,376,682,375,681,504,562,504" />
</map>

<img class="chart-img Row1Col1-img"...

CSS

.main-img {
  opacity: 1;
}
.show {
  z-index: -1 !important;
}
.hide {
  opacity: 0;
}

.chart-img {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -10;
}

.main-content {
  position: relative;
  width: 700px;
  margin: 0 auto;
}
.main-content:before {
  position: absolute;
  z-index: 100;
  display: block;
  width: 100%;
  height: calc(100% - 200px);
  background: rgba(51, 51, 51, 0.7);
  content: "Hover to see Charts";
  color: #fff;
  text-align: center;
  padding-top: 200px;
  font-size: 48px;
  transition-delay: 4s;
}
.main-content:hover:before {
  z-index: -1;
  transition-delay: 0s;
}

JavaScript

$('.Row1Col1-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row1Col1-img').toggleClass('show');
});

$('.Row1Col2-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row1Col2-img').toggleClass('show');
});

$('.Row1Col3-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row1Col3-img').toggleClass('show');
});

$('.Row2Col1-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row2Col1-img').toggleClass('show');
});

$('.Row2Col2a-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row2Col2a-img').toggleClass('show');
});

$('.Row2Col2b-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row2Col2b-img').toggleClass('show');
});

$('.Row2Col3a-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row2Col3a-img').toggleClass('show');
});

$('.Row2Col3b-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row2Col3b-img').toggleClass('show');
});

$('.Row3Col1-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row3Col1-img').toggleClass('show');
});

$('.Row3Col2a-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row3Col2a-img').toggleClass('show');
});

$('.Row3Col2b-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row3Col2b-img').toggleClass('show');
});

$('.Row3Col3-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row3Col3-img').toggleClass('show');
});

$('.Row4Col1-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row4Col1-img').toggleClass('show');
});

$('.Row4Col2-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row4Col2-img').toggleClass('show');
});

$('.Row4Col3-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
  $('.Row4Col3-img').toggleClass('show');
});

$('.Row5Col1-shape').hover(function(e) {
  $('.main-img').toggleClass('hide');
 ...