Print Dialog

index.html

<div class="print-diagram">
  <div class="area front" data-areaName="Front">
    <a href="#" class="location highlight right-sleeve" data-locationName="right-sleeve">Select</a>
    <span class="location label right-sleeve">Right Sleeve</span>
    
    <a href="#" class="location highlight left-sleeve" data-locationName="left-sleeve">Select</a>
    <span class="location label left-sleeve">Left Sleeve</span>
    
    <a href="#" class="location highlight right-chest" data-locationName="right-chest">Select</a>
    <span class="location label right-chest">Right Chest</span>
    
    <a href="#" class="location highlight left-chest" data-locationName="left-chest">Select</a>
    <span class="location label left-chest">Left Chest</span>
    
    <a href="#" class="location highlight center-chest" data-locationName="center-chest">Select</a>
    <span class="location label center-chest">Center Chest</span>
    
    <a href="#" class="location highlight full-front" data-locationName="full-front">Select</a>
    <span class="location label full-front">Full Front</span>
  </div>
  <div class="area back" data-areaName="Back">
    <a href="#" class="location highlight full-back" data-locationName="Full Back">Select</a>
    <span class="location label full-back">Full Back</span>
    
    <a href="#" class="location highlight nape" data-locationName="Nape">Select</a>
    <span class="location label nape">Nape</span>
  </div>
</div>

Print Dialog.markdown

Print Dialog

A Pen by Matt Johnson on CodePen.

License.

style.css

.print-diagram { 
  background-color: #AAAAAA;
  display: inline-block;
}
.print-diagram .area {
  position: relative;
  background-color: pink;
  margin: 20px;
  float: left;
  display: block;
}
.print-diagram .location.highlight {
  position: absolute;
  border: solid;
  border-color: red;
  line-height: 0;
  font-size: 0;
  color: transparent;
  display: block;
  width: 5px;
  height: 5px;
}
.print-diagram .location.label {
  position: absolute;
  background-color: #CCCCCC;
  font-size: 10px;
}




.print-diagram .area.back {
  width: 200px;
  height: 200px;
}

.print-diagram .location.highlight.full-back {
  top: 60px;
  left: 60px;
  width: 75px;
  height: 75px;
}
.print-diagram .location.label.full-back {
  top: 150px;
  left: 80px;
}
.print-diagram .location.highlight.nape {
  top: 40px;
  left: 85px;
  width: 30px;
  height: 30px;
}
.print-diagram .location.label.nape {
  top: 20px;
  left: 92px;
}



.print-diagram .area.front {
  width: 200px;
  height: 200px;
}

.print-diagram .location.highlight.right-sleeve {
  top: 60px;
  left: 10px;
  width: 20px;
  height: 90px;
}
.print-diagram .location.label.right-sleeve {
  top: 25px;
  left: 10px;
  width: 30px;
}
.print-diagram .location.highlight.left-sleeve {
  top: 60px;
  left: 160px;
  width: 20px;
  height: 90px;
}
.print-diagram .location.label.left-sleeve {
  top: 25px;
  left: 160px;
  width: 30px;
}
.print-diagram .location.highlight.right-chest {
  top: 50px;
  left: 50px;
  width: 30px;
  height: 30px;
}
.print-diagram .location.label.right-chest {
  top: 20px;
  left: 50px;
  width: 30px;
}
.print-diagram .location.highlight.left-chest {
  top: 50px;
  left: 115px;
  width: 30px;
  height: 30px;
}
.print-diagram .location.label.left-chest {
  top: 20px;
  left: 117px;
  width: 30px;
}
.print-diagram .location.highlight.center-chest {
  top: 65px;
  left: 70px;
  width: 50px;
  height: 50px;
}
.print-diagram .location.label.center-chest {
  top: 105px;
  left: 72px;
}
.print-diagram .location.highlight.full-front {
  top: 60px;
  left: 60px;
  width: 75px;
  height: 75px;
}
.print-diagram .location.label.full-front {
  top: 150px;
  left: 70px;
}