Main Content
Map Styles
Standard Wireframing Elements
Map Style 1
Close
HTML
<section class="map-style-1">
<div class="container">
<div class="map">
<img src="http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/transparent.png" alt="Transparent Image" id="transparent" width="400" height="511" usemap="#myMap" />
<map name="myMap">
<area shape="poly" coords="200,74,208,74,218,76,223,79,226,87,230,92,234,92,242,100,247,97,257,97,266,100,270,107,269,111,253,124,231,159,231,162,241,159,250,149,255,138,265,138,272,143,275,145,265,152,262,159,267,162,273,156,274,167,288,164,260,131,262,126,281,138,286,136,291,135,303,157,310,161,310,168,303,169,298,169,293,174,290,188,280,188,274,189,274,191,274,194,286,195,280,204,269,201,265,202,258,198,246,193,245,197,247,199,247,205,238,209,239,213,243,218,243,224,235,238,223,237,216,258,204,246,201,248,199,244,183,260,166,249,141,220,147,209,150,217,177,247,181,232,187,230,180,220,183,205,189,195,202,178,210,171,201,157,199,138,204,123,209,116,223,102,211,108,199,125,194,132,188,137,164,115,167,108,176,106,179,96,188,98,192,86" href="#" class="map-1"/>
</map>
<img src="http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/map-1.png" id="trueMap" alt="Map" />
<div class="hovers">
<div class="map-1">
<img src="http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/map-1-hover.png" alt="Map 1" />
</div>
</div>
</div>
</div>
</section> <!-- map style 1 -->CSS
/********************/
/*** Map Style 1 ***/
/*******************/
.map-style-1{
height: auto !important;
}
.map-style-1 .map {
position: relative;
max-width: 400px;
margin: 0 auto;
width: 100%;
}
.map-style-1 #transparent {
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.map-style-1 #trueMap {
z-index: 1;
}
.map-style-1 .map .hovers {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.map-style-1 .map .hovers div, .map .hovers div p {
position: absolute;
}
.map-style-1 .map .hovers div img {
display: none;
position: relative;
z-index: 1;
}
.map-style-1 .map .hovers div p {
font: 24px/26px Arial;
color: #141414;
text-align: center;
white-space: nowrap;
z-index: 2;
}
.map-style-1 .map-1{
left: 141px;
top: 74px;
}
/********************/
/*** Map Style 1 ***/
/*******************/CSS Mobile
Javascript
jQuery(document).ready(function(){
jQuery('.map-style-1 area').hover(function() {
jQuery('.' + jQuery(this).attr('class') + ' img').stop().fadeIn();
}, function() {
jQuery('.' + jQuery(this).attr('class') + ' img').stop().fadeOut();
});
mapresponsiveness();
jQuery(window).resize(mapresponsiveness);
function mapresponsiveness(){
var map = jQuery(".map");
var mapOrigWidth = 400;
var mapOrigHeight = 511;
var container = jQuery(".map-style-1");
var containerWidth = container.width();
var scale = containerWidth/mapOrigWidth;
scale = scale > 1 ? 1 : scale;
map.css({
transform:'scale('+scale+')',
transformOrigin:'0 0'
});
container.css({
height: (mapOrigHeight * scale)
})
}
})
Map Style 2
Close
HTML
<section class="map-style-2">
<div class="container">
<div class="map">
<img src="http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/transparent.png" alt="Transparent Image" id="transparent" width="400" height="511" usemap="#myMap" />
<map name="myMap">
<area shape="poly" coords="200,74,208,74,218,76,223,79,226,87,230,92,234,92,242,100,247,97,257,97,266,100,270,107,269,111,253,124,231,159,231,162,241,159,250,149,255,138,265,138,272,143,275,145,265,152,262,159,267,162,273,156,274,167,288,164,260,131,262,126,281,138,286,136,291,135,303,157,310,161,310,168,303,169,298,169,293,174,290,188,280,188,274,189,274,191,274,194,286,195,280,204,269,201,265,202,258,198,246,193,245,197,247,199,247,205,238,209,239,213,243,218,243,224,235,238,223,237,216,258,204,246,201,248,199,244,183,260,166,249,141,220,147,209,150,217,177,247,181,232,187,230,180,220,183,205,189,195,202,178,210,171,201,157,199,138,204,123,209,116,223,102,211,108,199,125,194,132,188,137,164,115,167,108,176,106,179,96,188,98,192,86" href="#" class="map-1"/>
</map>
<img src="http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/map-2.png" id="trueMap" alt="Map" />
<div class="hovers">
<div class="map-1">
<img src="http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/map-2-hover.png" alt="Map 1" />
</div>
</div>
</div>
</div>
</section> <!-- map style 2 -->CSS
.map-style-2{
height:auto !important;
}
/********************/
/*** Map Style 2 ***/
/*******************/
.map-style-2{
}
.map-style-2 .map {
position: relative;
max-width: 400px;
margin: 0 auto;
width: 100%;
}
.map-style-2 #transparent {
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.map-style-2 #trueMap {
z-index: 1;
}
.map-style-2 .map .hovers {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.map-style-2 .map .hovers div, .map .hovers div p {
position: absolute;
}
.map-style-2 .map .hovers div img {
display: none;
position: relative;
z-index: 1;
}
.map-style-2 .map .hovers div p {
font: 24px/26px Arial;
color: #141414;
text-align: center;
white-space: nowrap;
z-index: 2;
}
.map-style-2 .map-1{
left: 128px;
top: 60px;
}
/********************/
/*** Map Style 2 ***/
/*******************/CSS Mobile
Javascript
jQuery(document).ready(function(){
jQuery('.map-style-2 area').hover(function() {
jQuery('.' + jQuery(this).attr('class') + ' img').stop().fadeIn();
}, function() {
jQuery('.' + jQuery(this).attr('class') + ' img').stop().fadeOut();
});
mapresponsiveness();
jQuery(window).resize(mapresponsiveness);
function mapresponsiveness(){
var map = jQuery(".map");
var mapOrigWidth = 400;
var mapOrigHeight = 511;
var container = jQuery(".map-style-2");
var containerWidth = container.width();
var scale = containerWidth/mapOrigWidth;
scale = scale > 1 ? 1 : scale;
map.css({
transform:'scale('+scale+')',
transformOrigin:'0 0'
});
container.css({
height: (mapOrigHeight * scale)
})
}
})
Map Style 3
Close
HTML
<section class="map-style-3">
<div class="container">
<div class="map">
<img src="http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/transparent.png" alt="Transparent Image" id="transparent" width="400" height="511" usemap="#myMap" />
<map name="myMap">
<area shape="poly" coords="200,74,208,74,218,76,223,79,226,87,230,92,234,92,242,100,247,97,257,97,266,100,270,107,269,111,253,124,231,159,231,162,241,159,250,149,255,138,265,138,272,143,275,145,265,152,262,159,267,162,273,156,274,167,288,164,260,131,262,126,281,138,286,136,291,135,303,157,310,161,310,168,303,169,298,169,293,174,290,188,280,188,274,189,274,191,274,194,286,195,280,204,269,201,265,202,258,198,246,193,245,197,247,199,247,205,238,209,239,213,243,218,243,224,235,238,223,237,216,258,204,246,201,248,199,244,183,260,166,249,141,220,147,209,150,217,177,247,181,232,187,230,180,220,183,205,189,195,202,178,210,171,201,157,199,138,204,123,209,116,223,102,211,108,199,125,194,132,188,137,164,115,167,108,176,106,179,96,188,98,192,86" href="#" class="map-1"/>
</map>
<img src="http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/map-1.png" id="trueMap" alt="Map" />
<div class="hovers">
<div class="map-1">
<img src="http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/map-3-hover.png" alt="Map 1" />
</div>
</div>
</div>
</div>
</section> <!-- map style 3 -->CSS
.map-style-3{
height:auto !important;
}
/********************/
/*** Map Style 3 ***/
/*******************/
.map-style-3{
}
.map-style-3 .map {
position: relative;
max-width: 400px;
margin: 0 auto;
width: 100%;
}
.map-style-3 #transparent {
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.map-style-3 #trueMap {
z-index: 1;
}
.map-style-3 .map .hovers {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.map-style-3 .map .hovers div, .map .hovers div p {
position: absolute;
}
.map-style-3 .map .hovers div img {
display: none;
position: relative;
z-index: 1;
}
.map-style-3 .map .hovers div p {
font: 24px/26px Arial;
color: #141414;
text-align: center;
white-space: nowrap;
z-index: 2;
}
.map-style-3 .map-1{
left: 128px;
top: 60px;
}
/********************/
/*** Map Style 3 ***/
/*******************/CSS Mobile
Javascript
jQuery(document).ready(function(){
jQuery('.map-style-3 area').hover(function() {
jQuery('.' + jQuery(this).attr('class') + ' img').stop().fadeIn();
}, function() {
jQuery('.' + jQuery(this).attr('class') + ' img').stop().fadeOut();
});
mapresponsiveness();
jQuery(window).resize(mapresponsiveness);
function mapresponsiveness(){
var map = jQuery(".map");
var mapOrigWidth = 400;
var mapOrigHeight = 511;
var container = jQuery(".map-style-3");
var containerWidth = container.width();
var scale = containerWidth/mapOrigWidth;
scale = scale > 1 ? 1 : scale;
map.css({
transform:'scale('+scale+')',
transformOrigin:'0 0'
});
container.css({
height: (mapOrigHeight * scale)
})
}
})
Map Style 4
Close
HTML
<section class="map-style-4">
<div class="container">
<div class="map">
<img src="http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/transparent.png" alt="Transparent Image" id="transparent" width="400" height="511" usemap="#myMap" />
<map name="myMap">
<area shape="poly" coords="200,74,208,74,218,76,223,79,226,87,230,92,234,92,242,100,247,97,257,97,266,100,270,107,269,111,253,124,231,159,231,162,241,159,250,149,255,138,265,138,272,143,275,145,265,152,262,159,267,162,273,156,274,167,288,164,260,131,262,126,281,138,286,136,291,135,303,157,310,161,310,168,303,169,298,169,293,174,290,188,280,188,274,189,274,191,274,194,286,195,280,204,269,201,265,202,258,198,246,193,245,197,247,199,247,205,238,209,239,213,243,218,243,224,235,238,223,237,216,258,204,246,201,248,199,244,183,260,166,249,141,220,147,209,150,217,177,247,181,232,187,230,180,220,183,205,189,195,202,178,210,171,201,157,199,138,204,123,209,116,223,102,211,108,199,125,194,132,188,137,164,115,167,108,176,106,179,96,188,98,192,86" href="#" class="map-1"/>
</map>
<img src="http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/map-4.png" id="trueMap" alt="Map" />
<div class="hovers">
<div class="map-1">
<img src="http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/map-4-hover.png" alt="Map 1" />
</div>
</div>
</div>
</div>
</section> <!-- map style 3 -->CSS
/********************/
/*** Map Style 4 ***/
/*******************/
.map-style-4{
}
.map-style-4 .map {
position: relative;
max-width: 400px;
margin: 0 auto;
width: 100%;
}
.map-style-4 #transparent {
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.map-style-4 #trueMap {
z-index: 1;
}
.map-style-4 .map .hovers {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.map-style-4 .map .hovers div, .map .hovers div p {
position: absolute;
}
.map-style-4 .map .hovers div img {
display: none;
position: relative;
z-index: 1;
}
.map-style-4 .map .hovers div p {
font: 24px/26px Arial;
color: #141414;
text-align: center;
white-space: nowrap;
z-index: 2;
}
.map-style-4 .map-1{
left: 141px;
top: 74px;
}
/********************/
/*** Map Style 4 ***/
/*******************/CSS Mobile
Javascript
Map Style 5
Close
HTML
<section class="map-style-5">
<div class="container">
<div class="map-idx">
<img src="http://im-demos.agentimage.com/standard-wireframing/wp-content/uploads/sites/2/2018/08/map-5.png" alt="">
</div>
</div>
</section> <!-- map style 5 -->CSS
/********************/
/*** Map Style 5 ***/
/*******************/
.map-style-5{
}
.map-idx{
width: 100%;
max-width: 664px;
margin: 0 auto;
height: auto;
}
.map-idx img{
display: block;
width: 100%;
height: auto;
}
/********************/
/*** Map Style 5 ***/
/*******************/CSS Mobile
Javascript
