كود بناء خريطة جافا سكريبت JavaScript
-------------------------------------------------------------------------------------------------------
html
--------------------------------------------------------------------------------------------------------
<div class="container">
<h1>Interactive Map</h1>
<div class="title">
<ul>
<li><a class="title-blue" href="#">Offices</a></li>
<li><a class="title-red" href="#">Countryside</a></li>
<li><a class="title-green" href="#">Playground</a></li>
<li><a class="title-yellow" href="#">House</a></li>
<li><a class="title-pink" href="#">Industries</a></li>
</ul>
</div>
<img id="map" src="http://www.sarabianchi.it/code-images/mappa-interattiva/img/map-original.png">
<map name="map">
<area onmouseover onmouseout shape="poly" coords="206,133, 223,123, 287,86, 295,86, 315,98, 322,102, 329,99, 331,102, 341,113, 354,120, 383,137, 367,145, 363,147, 363,151, 360,167, 347,177, 338,181, 328,181, 314,181, 300,187, 294,187, 261,168, 248,161, 236,153, 206,133" href="#">
<area onmouseover onmouseout shape="poly" coords="384,181, 382,201, 379,209, 363,224, 358,219, 355,218, 351,220, 347,217, 341,212, 347,208, 352,198, 347,188, 342,184, 342,181, 348,177, 361,168, 363,152, 364,148, 367,145, 379,139, 387,137, 395,139, 412,149, 416,149, 417,146, 416,111, 417,102, 424,96, 441,86, 447,86,
465,95, 470,103, 470,182,
471,187, 475,192, 548,234, 567,245, 569,247, 547,260, 533,268, 529,270, 526,267, 519,254, 510,269, 504,278, 497,288, 486,295, 478,294, 434,269, 413,255, 411,250, 410,236, 406,226, 393,213, 388,206, 386,198, 385,181, 384,181" href="#">
<area onmouseover onmouseout shape="poly" coords="342,379, 369,364, 373,360, 374,354, 374,316, 375,312, 379,311, 392,312, 403,318, 410,327, 416,304, 418,296, 423,287, 432,284, 442,288, 471,303, 477,302, 498,290, 501,286, 519,256, 526,268, 529,271, 533,270, 567,249, 575,249, 592,259, 593,251, 594,245, 599,241, 638,218,
645,218, 665,229,
669,236, 669,297, 671,303, 675,307, 683,312, 667,322, 563,382, 460,442, 450,442, 348,383, 342,379" href="#">
<area onmouseover onmouseout shape="poly" coords="183,286, 204,274, 301,217, 315,215, 333,215, 337,215, 342,216, 346,219, 351,222, 356,219, 358,219, 363,224, 369,220, 369,219, 379,210, 383,202, 385,188, 385,203, 388,210, 405,227, 409,232, 410,238, 410,242, 410,252, 413,257, 421,262, 475,293, 481,297, 474,301, 466,299,
440,284, 431,282,
422,286, 416,295, 410,322, 393,311, 373,310, 373,315, 373,356, 369,363, 344,376, 339,377, 261,332, 184,288, 183,286" href="#">
<area onmouseover onmouseout shape="poly" coords="61,217, 102,192, 106,189, 107,184, 107,82, 108,76, 112,73, 117,70, 120,64, 120,23, 124,17, 130,14, 134,7, 137,3, 141,6, 143,8, 151,14, 153,23, 154,51, 155,55, 157,57, 168,66, 170,81, 170,135, 170,140, 179,141, 186,137, 197,132, 208,136, 221,144, 234,153, 248,162,
263,170, 292,187, 295,190,
295,194, 294,201, 299,208, 306,213, 303,215, 184,284, 177,284, 63,218, 61,217" href="#">
</map>
</div>
---------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
csc
---------------------------------------------------------------------------------------------------------
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,300italic,500);
*{
margin: 0px;
padding: 0px;
}
body {
background: rgb(18, 181, 231);
}
.container{
overflow: hidden;
text-align: center;
background: -moz-linear-gradient(top, rgba(169,228,247,1) 0%, rgba(15,180,231,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(169,228,247,1) 0%,rgba(15,180,231,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9e4f7', endColorstr='#0fb4e7',GradientType=0 ); /* IE6-9 */
}
h1 {
font-family: 'Ubuntu', sans-serif;
color: rgba(255, 255, 255, 0.65);
font-size: 120px;
margin: 20px 0px;
font-weight: 100;
}
@media screen and (max-width: 480px){
h1{
font-size: 48px;
}
#map{
width: 100%;
margin-top: 25px !important;
}
.title ul li{
padding: 8px 0px !important;
}
li a{
padding: 9px 10px !important;
}
.title {
margin-top: 30px;
}
}
.title ul li {
list-style: none;
font-family: 'Ubuntu', sans-serif;
display: inline-block;
border: #fff solid 2px;
border-radius: 50px;
padding: 10px 0px;
margin: 5px;
}
li a{
text-decoration: none;
color: #fff;
-webkit-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
-moz-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
-o-transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
transition: all 300ms cubic-bezier(0.455, 0.030, 0.515, 0.955);
padding: 10px 20px
}
li a:hover{
background: #fff;
color: #1db8e8;
border-radius: 50px;
}
#map{
margin-top: 40px;
}
--------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------