HTML + JS
Kod
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body onload="">
<div class="mapka">
<script type='text/javascript'>
if(document.images) {
imagemap_default = new Image();
imagemap_default.src = 'malopolska_mapa.png';
imagemap_1 = new Image();
imagemap_1.src = 'bochenski.png';
imagemap_2 = new Image();
imagemap_2.src = 'olkuski.png';
imagemap_3 = new Image();
imagemap_3.src = 'dabrowski.png';
imagemap_4 = new Image();
imagemap_4.src = 'proszowicki.png';
imagemap_5 = new Image();
imagemap_5.src = 'krakowski.png';
imagemap_6 = new Image();
imagemap_6.src = 'chrzanowski.png';
imagemap_7 = new Image();
imagemap_7.src = 'oswiecimski.png';
imagemap_8 = new Image();
imagemap_8.src = 'wadowicki.png';
imagemap_9 = new Image();
imagemap_9.src = 'suski.png';
imagemap_10 = new Image();
imagemap_10.src = 'nowatorski.png';
imagemap_11 = new Image();
imagemap_11.src = 'tarzanski.png';
imagemap_12 = new Image();
imagemap_12.src = 'nowosadecki.png';
imagemap_13 = new Image();
imagemap_13.src = 'gorlicki.png';
imagemap_14 = new Image();
imagemap_14.src = 'tarnowski.png';
imagemap_15 = new Image();
imagemap_15.src = 'brzeski.png';
imagemap_16 = new Image();
imagemap_16.src = 'bochenski.png';
imagemap_17 = new Image();
imagemap_17.src = 'wielicki.png';
imagemap_18 = new Image();
imagemap_18.src = 'myslenicki.png';
imagemap_19 = new Image();
imagemap_19.src = 'limanowski.png';
}
function rollOver(iName,iState) {
if(document.images) {
document.images[iName].src = eval(iName + '_' + iState + '.src');
}
}
</script>
<div><img src="malopolska_mapa.png" alt="" /><img src="malopolska_mapa.png" style=" z-index: 2; position: relative; left:-220px; " usemap="#map" name="imagemap" alt="" /></div>
<map name="map">
<area shape="poly" coords="134,67,133,63,132,63,131,59,130,59,129,60,126,59,125,59,123,59,123,61,118,62
,118,68,121,71,122,78,120,80,120,82,115,82,115,90,110,95,110,98,109,98,109,100,10
9,103,111,103,112,104,113,106,115,104,118,104,120,107,121,109,131,108,131,106,134
,105,134,101,139,100,137,96,138,90,136,89,134,85,136,84,136,78,138,78,140,71,142,
71,142,69,139,68,138,67,134,67" href="#" onmouseover="rollOver('imagemap','bochenski')" onmouseout="rollOver('imagemap','default')" alt="" />
<area shape="poly" coords="149,55,149,51,148,50,142,57,140,57,139,58,134,58,132,59,133,62,133,63,134,64
,134,66,139,66,144,68,143,71,141,72,139,79,137,79,137,83,137,84,136,85,134,86,137
,89,138,89,138,93,137,95,138,96,138,97,139,99,139,101,134,101,135,104,135,104,135
,106,135,107,141,110,143,109,143,107,144,107,144,106,146,106,146,105,152,105,151,
101,152,97,152,91,155,91,156,91,156,90,155,90,155,85,157,84,155,83,156,79,154,77,
154,75,156,74,157,76,158,74,158,74,154,73,154,70,156,69,156,67,156,64,154,62,152,
62,152,61,154,61,154,58,153,56,150,56,149,55" href="#" onmouseover="rollOver('imagemap','brzeski')" onmouseout="rollOver('imagemap','default')" alt="" />
</map>
</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body onload="">
<div class="mapka">
<script type='text/javascript'>
if(document.images) {
imagemap_default = new Image();
imagemap_default.src = 'malopolska_mapa.png';
imagemap_1 = new Image();
imagemap_1.src = 'bochenski.png';
imagemap_2 = new Image();
imagemap_2.src = 'olkuski.png';
imagemap_3 = new Image();
imagemap_3.src = 'dabrowski.png';
imagemap_4 = new Image();
imagemap_4.src = 'proszowicki.png';
imagemap_5 = new Image();
imagemap_5.src = 'krakowski.png';
imagemap_6 = new Image();
imagemap_6.src = 'chrzanowski.png';
imagemap_7 = new Image();
imagemap_7.src = 'oswiecimski.png';
imagemap_8 = new Image();
imagemap_8.src = 'wadowicki.png';
imagemap_9 = new Image();
imagemap_9.src = 'suski.png';
imagemap_10 = new Image();
imagemap_10.src = 'nowatorski.png';
imagemap_11 = new Image();
imagemap_11.src = 'tarzanski.png';
imagemap_12 = new Image();
imagemap_12.src = 'nowosadecki.png';
imagemap_13 = new Image();
imagemap_13.src = 'gorlicki.png';
imagemap_14 = new Image();
imagemap_14.src = 'tarnowski.png';
imagemap_15 = new Image();
imagemap_15.src = 'brzeski.png';
imagemap_16 = new Image();
imagemap_16.src = 'bochenski.png';
imagemap_17 = new Image();
imagemap_17.src = 'wielicki.png';
imagemap_18 = new Image();
imagemap_18.src = 'myslenicki.png';
imagemap_19 = new Image();
imagemap_19.src = 'limanowski.png';
}
function rollOver(iName,iState) {
if(document.images) {
document.images[iName].src = eval(iName + '_' + iState + '.src');
}
}
</script>
<div><img src="malopolska_mapa.png" alt="" /><img src="malopolska_mapa.png" style=" z-index: 2; position: relative; left:-220px; " usemap="#map" name="imagemap" alt="" /></div>
<map name="map">
<area shape="poly" coords="134,67,133,63,132,63,131,59,130,59,129,60,126,59,125,59,123,59,123,61,118,62
,118,68,121,71,122,78,120,80,120,82,115,82,115,90,110,95,110,98,109,98,109,100,10
9,103,111,103,112,104,113,106,115,104,118,104,120,107,121,109,131,108,131,106,134
,105,134,101,139,100,137,96,138,90,136,89,134,85,136,84,136,78,138,78,140,71,142,
71,142,69,139,68,138,67,134,67" href="#" onmouseover="rollOver('imagemap','bochenski')" onmouseout="rollOver('imagemap','default')" alt="" />
<area shape="poly" coords="149,55,149,51,148,50,142,57,140,57,139,58,134,58,132,59,133,62,133,63,134,64
,134,66,139,66,144,68,143,71,141,72,139,79,137,79,137,83,137,84,136,85,134,86,137
,89,138,89,138,93,137,95,138,96,138,97,139,99,139,101,134,101,135,104,135,104,135
,106,135,107,141,110,143,109,143,107,144,107,144,106,146,106,146,105,152,105,151,
101,152,97,152,91,155,91,156,91,156,90,155,90,155,85,157,84,155,83,156,79,154,77,
154,75,156,74,157,76,158,74,158,74,154,73,154,70,156,69,156,67,156,64,154,62,152,
62,152,61,154,61,154,58,153,56,150,56,149,55" href="#" onmouseover="rollOver('imagemap','brzeski')" onmouseout="rollOver('imagemap','default')" alt="" />
</map>
</div>
</body>
</html>
CSS
Kod
.mapka {
width:220px;
overflow: hidden;
}
.mapka > div{
width:440px;
margin-top:5px;
}
.mapka > div > img {
width: 220px;
}
width:220px;
overflow: hidden;
}
.mapka > div{
width:440px;
margin-top:5px;
}
.mapka > div > img {
width: 220px;
}
