Osoby pracujące jako web developer zapewne nieraz spotkały się z koniecznością stworzenia „klikalnej” mapy Polski. Większość map tworzonych jest z wykorzystaniem Flasha. Nie wszyscy zapewne wiedzą, że taką mapę można również stworzyć za pomocą HTML/CSS z dodatkiem JS.
Przygotowanie projektu mapy
Na początek musimy przygotować pliki graficzne z mapą. Wykorzystałem mapę Polski ze strony Wikipedii. Mapa będzie w odcieniach szarości, natomiast po najechaniu myszką województwo zmieni kolor.
Jako plik bazowy wykorzystamy mapę Polski w odcieniach szarości. Kolejnymi plikami są poszczególne województwa, które pojawią się po najechaniu myszką. Ważne jest, by wszystkie grafiki miały jednakowe wymiary (obszar poza danym województwem musi być przezroczysty).
Gotowe? No to kodujemy…
Na początek stwórzmy szkielet dokumentu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mapa</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<meta name="Description" content="" />
<meta http-equiv="Content-Language" content="pl" />
<meta name="Keywords" content="" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="area">
</div>
</body>
</html>
#area będzie kontenerem zawierającym całą mapę. Wrzućmy do niego obrazek z tłem mapy:
<img id="map_poland" usemap="#poland" src="mapa.png" />
Teraz dodajmy listę województw:
<ul>
<li id="lubelskie"><img src="lubelskie.png" usemap="#poland" /></li>
<li id="podkarpackie"><img src="podkarpackie.png" usemap="#poland" /></li>
<li id="podlaskie"><img src="podlaskie.png" usemap="#poland" /></li>
</ul>
Musimy jeszcze „zmapować” obrazek z mapą, żeby obszary do klikania miały mniej więcej kontury takie jak województwa. Służą do tego znaczniki map i area.
<map id="poland" name="poland" >
<area shape="poly" alt="lubelskie" title="lubelskie" coords="571,255,554,275,539,269,541,280,532,280,523,289,488,291,488,305,492,325,476,328,490,335,495,348,490,352,492,357,491,389,500,417,505,417,508,406,522,417,518,429,542,436,546,450,537,449,535,454,536,458,555,459,550,463,575,464,585,451,591,455,598,451,612,468,619,451,639,446,640,431,638,410,630,398,633,388,607,350,614,346,595,306,610,307,618,269" href="#lubelskie" />
<area shape="poly" alt="podkarpackie" title="podkarpackie" coords="608,465,555,546,563,562,561,579,575,595,570,593,554,593,512,576,506,565,477,554,467,562,464,525,455,519,461,513,452,509,455,464,452,461,471,449,483,443,486,433,494,428,495,414,498,416,510,413,514,413,516,423,534,433,542,432,544,447,534,455,545,456,551,462,571,462,583,451,588,451,599,448,602,456,607,462" href="#podkarpackie" />
<area shape="poly" alt="podlaskie" title="podlaskie" coords="537,40,543,32,552,36,555,46,569,51,569,51,577,53,592,76,582,77,614,159,620,187,621,218,594,227,576,256,567,255,552,245,535,247,526,215,523,201,513,208,518,193,500,204,501,183,488,180,478,173,476,148,467,134,484,139,494,132,513,121,536,103,540,87,530,79,530,62,519,57,539,49" href="#podlaskie" />
</map>
Kolejne obszary tworzone są znacznikiem area. Atrybut shape określa kształt zaznaczenia, mamy do wyboru: rect (prostokąt), circle (koło) oraz poly (wielokąt). Atrybut coords zawiera współrzędne obszaru (para liczb – oś X i Y). Trzeba pamiętać, że współrzędne liczone są od lewego, górnego wierzchołka obrazka. Do mapowania wykorzystałem Online Image Map Editor.
Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...
Zwiń
Czytaj na blogu autora...