Canvas Constructor with Maphilight

In this example below you will see how to do a Canvas Constructor with Maphilight with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by llgruff, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright llgruff ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Canvas Constructor with Maphilight</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section class="price">
	<div class="wrap">
		<div class="price_a pa1 hood_btn noselect">Капот</div>
		<div class="price_a pa2 roof_btn noselect">Крыша</div>
		<div class="price_a pa3 wing1_btn noselect">Крыло</div>
		<div class="price_a pa4 door_btn noselect">Двери</div>
		<div class="price_a pa5 wing2_btn noselect">Крыло</div>
		<div class="price_a pa6 lights_btn noselect">Фара</div>
		<div class="price_a pa7 bumper2_btn noselect">Бампер</div>
		<div class="pr1">
			<div class="price_descr hood_desc">
				Покраска капота — ...<br />
				Ремонт капота — ...<br />
				<a id="go" name="makeorder" href="#makeorder">оставить заявку</a>
				<div class="pd"></div>
			</div>
		</div>
		<div class="pr2">
			<div class="price_descr roof_desc">
				Покраска крыши — ...<br />
				Ремонт крыши от — ...<br />
				<a id="go" name="makeorder" href="#makeorder">оставить заявку</a>
				<div class="pd"></div>
			</div>
		</div>
		<div class="pr3">
			<div class="price_descr wing1_desc">
				Покраска переднего крыла — ...<br />
				Ремонт переднего крыла от — ...<br />
				<a id="go" name="makeorder" href="#makeorder">оставить заявку</a>
				<div class="pd"></div>
			</div>
		</div>
		<div class="pr4">
			<div class="price_descr door_desc">
				Покраска двери — ...<br />
				Ремонт двери от — ...<br />
				Сборка-разборка двери — ...<br />
				<a id="go" name="makeorder" href="#makeorder">оставить заявку</a>
				<div class="pd"></div>
			</div>
		</div>
		<div class="pr5">
			<div class="price_descr wing2_desc">
				Покраска заднего крыла — ...<br />
				Ремонт заднего крыла от — ...<br />
				Замена заднего крыла от — ...<br />
				<a id="go" name="makeorder" href="#makeorder">оставить заявку</a>
				<div class="pd"></div>
			</div>
		</div>
		<div class="pr6">
			<div class="price_descr lights_desc">
				Полировка фары — ...<br />
				<a id="go" name="makeorder" href="#makeorder">оставить заявку</a>
				<div class="pd"></div>
			</div>
		</div>
		<div class="pr7">
			<div class="price_descr bumper1_desc">
				Покраска бампера — ...<br />
				Ремонт бампера от — ...<br />
				<a id="go" name="makeorder" href="#makeorder">оставить заявку</a>
				<div class="pd"></div>
			</div>
		</div>
		<div class="pr8">
			<div class="price_descr bumper2_desc">
				Покраска бампера — ...<br />
				Ремонт бампера от — ...<br />
				<a id="go" name="makeorder" href="#makeorder">оставить заявку</a>
				<div class="pd"></div>
			</div>
		</div>
		<img src="http://pokras24.ru/a/images/price.jpg" class="map" width="714" height="482" usemap="#navigation">
		<map id="navigation" name="navigation">
			<area shape="poly" id="hood" coords="188,28,175,28,161,31,133,36,110,42,93,50,76,61,55,76,43,86,31,97,23,108,20,114,19,119,19,127,19,135,22,142,23,142,27,141,34,142,41,143,51,144,63,147,73,150,82,153,92,157,105,162,111,163,115,164,124,164,133,162,141,159,147,157,149,156,148,152,147,149,147,144,148,138,151,131,155,123,161,115,169,107,179,96,189,88,200,80,212,71,227,63,236,58,246,55,255,52,260,50,265,49,271,49,274,49,270,47,261,44,247,40,227,35,207,31">
			<area shape="poly" id="lights" coords="18,123,14,131,11,139,11,147,12,153,15,157,18,151,23,148,23,146,20,140,19,136,19,136">
			<area shape="poly" id="bumper1" coords="30,208,30,204,29,200,28,195,28,189,29,184,33,178,40,172,42,171,31,159,27,153,23,146,18,152,15,157,13,153,11,148,9,143,7,149,7,156,7,162,8,167,9,169,13,172,14,174,14,182,14,194,21,201,26,206">
			<area shape="poly" id="wing1" coords="138,197,139,187,141,181,144,176,150,171,158,165,153,161,149,156,142,159,130,162,122,163,116,164,109,163,93,157,74,150,59,146,43,142,30,141,21,142,25,150,29,156,34,162,43,172,50,171,57,172,68,175,74,178,83,183,91,190,100,199,108,210,113,217,117,226,121,235,125,245,134,248,147,253,142,246,140,237,138,214">
			<area shape="poly" id="roof" coords="548,121,524,109,491,93,466,82,442,72,422,65,397,57,380,53,358,48,345,45,332,50,321,56,309,64,298,71,289,78,279,87,273,94,264,104,259,111,252,121,246,133,256,133,274,134,289,136,308,139,323,144,341,150,361,157,380,166,407,179,426,189,442,197,457,206,465,211,473,204,483,196,494,186,505,175,515,165,524,157,532,147,540,135,544,127">
			<area shape="poly" id="door" coords="138,203,138,215,139,225,140,233,141,241,141,245,145,251,148,254,180,266,210,278,248,293,293,309,320,319,345,327,362,333,370,334,380,331,385,328,397,315,403,308,413,297,418,292,424,283,427,276,427,265,427,258,396,248,358,236,319,223,269,206,229,192,207,185,188,179,175,174,165,170,159,166,158,166,152,169,147,173,143,177,140,183,139,190,138,195">
			<area shape="poly" id="wing2" coords="470,216,504,239,521,252,541,266,552,273,564,279,568,286,576,297,580,301,596,309,616,318,615,320,603,326,583,335,572,349,561,363,552,374,547,377,543,378,536,378,516,375,505,373,497,358,486,345,478,336,466,327,456,322,446,319,437,317,426,316,417,317,411,319,407,321,402,325,400,329,398,334,397,339,398,343,399,347,400,353,397,352,387,348,376,344,376,341,378,337,381,332,386,327,392,321,400,312,408,303,416,295,421,288,424,282,426,277,427,270,427,258,432,259,442,262,453,262,463,261,476,259,487,256,490,253,489,249,477,240,453,222,445,216,447,213,452,208,455,205">
			<area shape="poly" id="bumper2" coords="534,377,523,376,513,374,508,374,505,375,507,380,510,388,511,391,512,396,520,398,530,399,541,401,558,403,571,404,583,404,587,403,591,403,599,402,608,401,613,397,626,388,637,379,649,368,656,359,667,346,675,336,682,325,689,314,694,305,697,297,700,288,701,282,703,274,704,264,703,256,702,250,700,246,699,244,697,241,696,246,693,246,692,247,688,252,684,259,681,263,682,267,686,275,682,284,677,293,671,302,663,311,656,319,647,328,640,335,632,341,632,341,627,337,626,338,619,341,607,346,600,348,592,351,584,352,575,353,570,353,565,359,559,366,554,371,550,375,547,377,543,378">
		</map>
	</div>
</section>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/maphilight/1.3.1/jquery.maphilight.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/llgruff/canvas-constructor-with-maphilight-akRpwY */
body{font-family:Arial;width:1200;margin:50px auto;}
*,:focus{outline:0!important;}
a{text-decoration:none;color:inherit;cursor:pointer;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s}
.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}

.price{background:#fff;padding:50px 0 15px}
.price .wrap{position:relative;margin:0 auto;width:714px;height:550px;line-height:0;position:relative}
.price div.price_a{display:block;width:86px;height:40px;line-height:35px;font-size:14px;text-transform:uppercase;cursor:pointer;text-shadow:0 1px 0 #a86f05;text-align:center;color:#fff;letter-spacing:1px;background:url(http://pokras24.ru/a/images/auto_bttns.png) no-repeat 0 0;position:absolute;z-index:4}

.pa1{left:85px;top:60px}
.pa2{left:390px;top:110px}
.pa3{left:60px;top:142px}
.pa4{left:240px;top:242px}
.pa5{left:450px;top:287px}
.pa6{left:-20px;top:107px}
.pa7{right:60px;bottom:152px}
.price_descr{position:absolute;padding:10px 0 5px 20px;font-size:18px;color:#000;line-height:24px;border-radius:5px;background:url(http://pokras24.ru/a/images/price_descr.png);text-shadow:0 1px 1px #fff;z-index:10}
.price_descr a{border-bottom:#065c99 dashed 1px;color:#065c99;-webkit-transition:all .4s;-moz-transition:all .4s;transition:all .4s}
.price_descr a:hover {   border-color: transparent;}

.pr1 .price_descr{width:225px;top:-75px;left:12px;display:none}
.pr2 .price_descr{width:225px;top:-53px;left:382px;display:none}
.pr3 .price_descr{width:305px;top:264px;left:-104px;display:none}
.pr4 .price_descr{width:270px;top:330px;left:65px;display:none}
.pr5 .price_descr{width:280px;top:367px;left:172px;display:none}
.pr6 .price_descr{width:230px;top:-30px;left:-138px;display:none}
.pr7 .price_descr{width:230px;top:-12px;left:-135px;display:none}
.pr8 .price_descr{width:230px;top:466px;left:398px;display:none}

.pd{position:absolute}
.pr1 .pd{width:inherit;height:41px;bottom:-41px;left:-10px;background:url(http://pokras24.ru/a/images/pd1.png) no-repeat center}
.pr2 .pd{width:inherit;height:68px;bottom:-68px;left:-20px;background:url(http://pokras24.ru/a/images/pd2.png) no-repeat center}
.pr3 .pd{width:inherit;height:91px;top:-91px;left:10px;background:url(http://pokras24.ru/a/images/pd3.png) no-repeat center}
.pr4 .pd{width:inherit;height:54px;top:-54px;left:78px;background:url(http://pokras24.ru/a/images/pd4.png) no-repeat center}
.pr5 .pd{width:inherit;height:61px;top:-61px;right:-105px;background:url(http://pokras24.ru/a/images/pd5.png) no-repeat center}
.pr6 .pd{width:inherit;height:78px;bottom:-78px;left:38px;background:url(http://pokras24.ru/a/images/pd6.png) no-repeat center}
.pr7 .pd{width:inherit;height:79px;bottom:-79px;left:13px;background:url(http://pokras24.ru/a/images/pd7.png) no-repeat center}
.pr8 .pd{width:inherit;height:79px;top:-79px;left:52px;background:url(http://pokras24.ru/a/images/pd8.png) no-repeat center}
map{width:714px;height:482px;display:block}



/*Downloaded from https://www.codeseek.co/llgruff/canvas-constructor-with-maphilight-akRpwY */
$(document).ready(function() {
	$('.map').maphilight();
	first();
	$(function() {
		$('#hood, .hood_btn, .hood_desc, #lights, .lights_btn, .lights_desc, #bumper1, .bumper1_desc, #wing1, .wing1_btn, .wing1_desc, #door, .door_btn, .door_desc, #roof, .roof_btn, .roof_desc, #bumper2, .bumper2_btn, .bumper2_desc, #wing2, .wing2_btn, .wing2_desc').hover(function() {
			var first1 = $('.first_thumb').val();
			if(first1 == 'true') {
				first();		
				$('.first_thumb').val('false');
				$('.hood_desc').hide();
			}
		});
		$('#hood, .hood_btn, .hood_desc').hover(function(e) {
			e.preventDefault();
			var data = $('#hood').data('maphilight') || {};
			data.alwaysOn = !data.alwaysOn;
			data.fillColor = 'ffca00';
			data.stroke = true;
			data.strokeColor = 'ffca00';
			data.strokeWidth = 2;
			$('#hood').data('maphilight', data).trigger('alwaysOn.maphilight');
		});
		$('#hood, .hood_btn, .hood_desc').mouseenter(function(){$('.hood_desc').show();});
		$('#hood, .hood_btn, .hood_desc').mouseleave(function(){$('.hood_desc').hide();});
	
		$('#lights, .lights_btn, .lights_desc').hover(function(e) {
			e.preventDefault();
			var data = $('#lights').data('maphilight') || {};
			data.alwaysOn = !data.alwaysOn;
			data.fillColor = 'ffca00';
			data.stroke = true;
			data.strokeColor = 'ffca00';
			data.strokeWidth = 2;
			$('#lights').data('maphilight', data).trigger('alwaysOn.maphilight');
		});
		$('#lights, .lights_btn, .lights_desc').mouseenter(function(){$('.lights_desc').show();});
		$('#lights, .lights_btn, .lights_desc').mouseleave(function(){$('.lights_desc').hide();});

		$('#bumper1, .bumper1_desc').hover(function(e) {
			e.preventDefault();
			var data = $('#bumper1').data('maphilight') || {};
			data.alwaysOn = !data.alwaysOn;
			data.fillColor = 'ffca00';
			data.stroke = true;
			data.strokeColor = 'ffca00';
			data.strokeWidth = 2;
			$('#bumper1').data('maphilight', data).trigger('alwaysOn.maphilight');
		});
		$('#bumper1, .bumper1_desc').mouseenter(function(){$('.bumper1_desc').show();});
		$('#bumper1, .bumper1_desc').mouseleave(function(){$('.bumper1_desc').hide();});

		$('#wing1, .wing1_btn, .wing1_desc').hover(function(e) {
			e.preventDefault();
			var data = $('#wing1').data('maphilight') || {};
			data.alwaysOn = !data.alwaysOn;
			data.fillColor = 'ffca00';
			data.stroke = true;
			data.strokeColor = 'ffca00';
			data.strokeWidth = 2;
			$('#wing1').data('maphilight', data).trigger('alwaysOn.maphilight');
		});
		$('#wing1, .wing1_btn, .wing1_desc').mouseenter(function(){$('.wing1_desc').show();});
		$('#wing1, .wing1_btn, .wing1_desc').mouseleave(function(){$('.wing1_desc').hide();});

		$('#door, .door_btn, .door_desc').hover(function(e) {
			e.preventDefault();
			var data = $('#door').data('maphilight') || {};
			data.alwaysOn = !data.alwaysOn;
			data.fillColor = 'ffca00';
			data.stroke = true;
			data.strokeColor = 'ffca00';
			data.strokeWidth = 2;
			$('#door').data('maphilight', data).trigger('alwaysOn.maphilight');
		});
		$('#door, .door_btn, .door_desc').mouseenter(function(){$('.door_desc').show();});
		$('#door, .door_btn, .door_desc').mouseleave(function(){$('.door_desc').hide();});

		$('#roof, .roof_btn, .roof_desc').hover(function(e) {
			e.preventDefault();
			var data = $('#roof').data('maphilight') || {};
			data.alwaysOn = !data.alwaysOn;
			data.fillColor = 'ffca00';
			data.stroke = true;
			data.strokeColor = 'ffca00';
			data.strokeWidth = 2;
			$('#roof').data('maphilight', data).trigger('alwaysOn.maphilight');
		});
		$('#roof, .roof_btn, .roof_desc').mouseenter(function(){$('.roof_desc').show();});
		$('#roof, .roof_btn, .roof_desc').mouseleave(function(){$('.roof_desc').hide();});
				$('#bumper2, .bumper2_btn, .bumper2_desc').hover(function(e) {
			e.preventDefault();
			var data = $('#bumper2').data('maphilight') || {};
			data.alwaysOn = !data.alwaysOn;
			data.fillColor = 'ffca00';
			data.stroke = true;
			data.strokeColor = 'ffca00';
			data.strokeWidth = 2;
			$('#bumper2').data('maphilight', data).trigger('alwaysOn.maphilight');
		});
		$('#bumper2, .bumper2_btn, .bumper2_desc').mouseenter(function(){$('.bumper2_desc').show();});
		$('#bumper2, .bumper2_btn, .bumper2_desc').mouseleave(function(){$('.bumper2_desc').hide();});

		$('#wing2, .wing2_btn, .wing2_desc').hover(function(e) {
			e.preventDefault();
			var data = $('#wing2').data('maphilight') || {};
			data.alwaysOn = !data.alwaysOn;
			data.fillColor = 'ffca00';
			data.stroke = true;
			data.strokeColor = 'ffca00';
			data.strokeWidth = 2;
			$('#wing2').data('maphilight', data).trigger('alwaysOn.maphilight');
		});
		$('#wing2, .wing2_btn, .wing2_desc').mouseenter(function(){$('.wing2_desc').show();});
		$('#wing2, .wing2_btn, .wing2_desc').mouseleave(function(){$('.wing2_desc').hide();});
	});

	
});


function first(){
	var first1 = $('.first_thumb').val();
	if(first1 == 'true') {
		$(function() {
			var data = $('#hood').data('maphilight') || {};
			data.alwaysOn = !data.alwaysOn;
			data.fillColor = 'ffca00';
			data.stroke = true;
			data.strokeColor = 'ffca00';
			data.strokeWidth = 2;
			$('#hood').data('maphilight', data).trigger('alwaysOn.maphilight');
			$('.hood_desc').show();
		});
	}
}

Comments