Skip to content

Instantly share code, notes, and snippets.

@mttjohnson
Created February 24, 2016 15:29
Show Gist options
  • Save mttjohnson/7aa91cb8810446df5863 to your computer and use it in GitHub Desktop.
Save mttjohnson/7aa91cb8810446df5863 to your computer and use it in GitHub Desktop.
Print Dialog
<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-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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment