Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Переход по сайту с помощью геогр. карты
 
 автор: sirov   (08.05.2007 в 13:03)   письмо автору
 
 

есть исходник, взятый с сайта http://www.dcz.gov.ua/sum/control/uk/index:



<HTML>
<BODY>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>

<SCRIPT language=JavaScript>
<!--

function active(arrea, status)
{
if (!status)
{
document.getElementById(arrea).style.visibility = "visible";
document.getElementById(arrea+'_text').style.visibility = "visible";
}
if (status == 1)
{
document.getElementById(arrea).style.visibility = "visible";
}

}

function inactive(arrea, status)
{
if (!status)
{
document.getElementById(arrea).style.visibility = "hidden";
document.getElementById(arrea+'_text').style.visibility = "hidden";
}
if (status == 1)
{
document.getElementById(arrea).style.visibility = "hidden";
}
}

function build_arrea(arrea, name_arrea, x, y)
{
var str='';
str+='<div id="'+arrea+'" style="visibility : hidden; position : absolute; margin-top: '+y+'px; margin-left: '+x+'px; ">';
str+='<img src="img/map/'+arrea+'.gif" border="0"></div>';
if ((arrea == 'kc') || (arrea == 'sv')) {y=y-12; x=x-10;};
if (x>=74) {x=x-90;} else {x=x-5;}; if (y<=35) {y=y+75;};
str+='<div id="'+arrea+'_text" style="visibility : hidden; position : absolute; margin-top: '+(y-35)+'px; margin-left: '+x+'px; "><table cellpadding="0" cellspacing="0" border="0">';
str+='<tr><td class="left"><img src="img/1x1.gif" width="1" height="1"></td><td bgcolor="#DDE2F5" class="content" style="padding: 2px">'+name_arrea+'</td><td class="right"><img src="img/1x1.gif" width="1" height="1"></td></tr>';
str+='<tr><td class="bottom_left_angle"><img src="img/1x1.gif" width="6" height="14"></td><td class="bottom"><img src="img/1x1.gif" width="1" height="1"></td><td class="bottom_right_angle"><img src="img/1x1.gif" width="6" height="14"></td></tr>';
str+='</table></div>'
str+='';
document.write(str);
}

//-->
</SCRIPT>

<TABLE cellSpacing=0 cellPadding=0 align=center border=0>
<TBODY>
<TR>
<TD><IMG height=1 src="index.files/1x1.gif" width=190 border=0><BR>
<DIV
style="MARGIN-TOP: 0px; MARGIN-LEFT: 0px; POSITION: absolute"><IMG
height=119 src="index.files/map.gif" width=175 border=0></DIV>
<SCRIPT>
build_arrea('lug','Луганська<br>область',153,30);
build_arrea('don','Донецька<br>область',142,43);
build_arrea('zap','Запорізька<br>область',120,61);
build_arrea('kha','Харківська<br>область',121,25);
build_arrea('arc','Автономна республіка<br>Крим',104,92);
build_arrea('khe','Херсонська<br>область',94,71);
build_arrea('dnp','Дніпропетровська<br>область',106,47);
build_arrea('pol','Полтавська<br>область',95,27);
build_arrea('sum','Сумська<br>область',102,0);
build_arrea('chg','Чернігівська<br>область',79,0);
build_arrea('mik','Миколаївська<br>область',78,63);
build_arrea('kir','Кіровоградська<br>область',73,50);
build_arrea('chk','Черкаська<br>область',71,33);
build_arrea('kiv','Київська<br>область',68,14);
build_arrea('vin','Вінницька<br>область',49,40);
build_arrea('zht','Житомирська<br>область',48,13);
build_arrea('hml','Хмельницька<br>область',38,29);
build_arrea('chn','Чернівецька<br>область',26,56);
build_arrea('ter','Тернопільська<br>область',24,32);
build_arrea('vol','Волинська<br>область',15,7);
build_arrea('lvv','Львівська<br>область',6,28);
build_arrea('ifr','Івано-Франківська<br>область',11,43);
build_arrea('zak','Закарпатська<br>область',0,49);
build_arrea('riv','Рівненська<br>область',28,8);
build_arrea('ods','Одеська<br>область',60,63);
build_arrea('kc','м. Київ',74,25);
build_arrea('sv','м. Севастополь',112,106);
</SCRIPT>

<DIV id=main
style="MARGIN-TOP: 0px; MARGIN-LEFT: 0px; POSITION: absolute"><IMG
height=120 src="index.files/1x1.gif" width=175 useMap=#Map border=0>
<MAP name=Map><AREA onmouseover="active('arc',0)"
onmouseout="inactive('arc',0)" shape=POLY
coords=104,104,119,94,129,101,138,101,145,105,128,113,119,117
href="http://www.dcz.gov.ua/cri"><AREA
onmouseover="active('vin',0)" onmouseout="inactive('vin',0)"
shape=POLY
coords=51,62,54,49,54,41,64,40,69,44,75,62,69,65,63,64,56,60
href="http://www.dcz.gov.ua/vin"><AREA
onmouseover="active('vol',0)" onmouseout="inactive('vol',0)"
shape=POLY coords=34,9,16,11,18,24,30,37,36,33,37,19
href="http://www.dcz.gov.ua/vol"><AREA
onmouseover="active('dnp',0)" onmouseout="inactive('dnp',0)"
shape=POLY coords=116,55,123,49,143,57,136,64,118,72,105,68,109,71
href="http://www.dcz.gov.ua/dnp"><AREA
onmouseover="active('don',0)" onmouseout="inactive('don',0)"
shape=POLY coords=151,43,141,54,143,66,149,75,156,71,165,60,156,49
href="http://www.dcz.gov.ua/don"><AREA
onmouseover="active('zht',0)" onmouseout="inactive('zht',0)"
shape=POLY coords=47,29,53,42,71,44,71,30,67,14,59,15,51,15
href="http://www.dcz.gov.ua/zhy"><AREA
onmouseover="active('zak',0)" onmouseout="inactive('zak',0)"
shape=POLY coords=4,50,1,61,7,64,20,66,13,56
href="http://www.dcz.gov.ua/zak"><AREA
onmouseover="active('zap',0)" onmouseout="inactive('zap',0)"
shape=POLY coords=122,75,128,89,144,80,142,64,127,62
href="http://www.dcz.gov.ua/zap"><AREA
onmouseover="active('ifr',0)" onmouseout="inactive('ifr',0)"
shape=POLY coords=24,43,28,53,34,59,26,68,20,60,12,54,12,53
href="http://www.dcz.gov.ua/ifr"><AREA
onmouseover="active('kiv',0)" onmouseout="inactive('kiv',0)"
shape=POLY
coords=80,28,76,33,81,36,84,32,81,27,74,16,66,16,68,43,73,52,84,45,93,34,82,31
href="http://www.dcz.gov.ua/kir"><AREA
onmouseover="active('kir',0)" onmouseout="inactive('kir',0)"
shape=POLY
coords=114,52,105,51,93,53,87,57,75,63,80,65,90,64,101,68,108,66,112,58,114,56
href="http://www.dcz.gov.ua/kid"><AREA
onmouseover="active('lug',0)" onmouseout="inactive('lug',0)"
shape=POLY
coords=151,45,154,31,165,33,176,39,174,49,176,61,170,62,159,54
href="http://www.dcz.gov.ua/lug"><AREA
onmouseover="active('lvv',0)" onmouseout="inactive('lvv',0)"
shape=POLY coords=21,29,6,42,9,50,14,53,25,42,31,37,23,32
href="http://www.dcz.gov.ua/lviv"><AREA
onmouseover="active('mik',0)" onmouseout="inactive('mik',0)"
shape=POLY coords=81,72,89,81,78,65,94,65,108,72,107,83,95,85
href="http://www.dcz.gov.ua/mik"><AREA
onmouseover="active('ods',0)" onmouseout="inactive('ods',0)"
shape=POLY
coords=68,66,73,80,75,87,67,91,62,107,75,100,89,85,83,73,73,64
href="http://www.dcz.gov.ua/ode"><AREA
onmouseover="active('pol',0)" onmouseout="inactive('pol',0)"
shape=POLY coords=96,33,107,28,116,28,126,41,118,54,106,50
href="http://www.dcz.gov.ua/pol"><AREA
onmouseover="active('riv',0)" onmouseout="inactive('riv',0)"
shape=POLY coords=33,36,38,9,41,10,51,15,44,33,43,32
href="http://www.dcz.gov.ua/rov"><AREA
onmouseover="active('sum',0)" onmouseout="inactive('sum',0)"
shape=POLY
coords=104,28,115,27,123,34,126,20,117,14,112,5,111,2,103,7,102,17
href="http://www.dcz.gov.ua/sum"><AREA
onmouseover="active('ter',0)" onmouseout="inactive('ter',0)"
shape=POLY coords=41,32,39,57,28,51,27,43,34,34
href="http://www.dcz.gov.ua/ter"><AREA
onmouseover="active('kha',0)" onmouseout="inactive('kha',0)"
shape=POLY coords=153,33,148,25,133,27,122,35,124,50,141,52,153,43
href="http://www.dcz.gov.ua/kha"><AREA
onmouseover="active('khe',0)" onmouseout="inactive('khe',0)"
shape=POLY
coords=95,88,102,88,103,86,99,84,107,82,109,72,112,72,114,71,121,75,124,80,129,88,123,91,113,93,103,95
href="http://www.dcz.gov.ua/khe"><AREA
onmouseover="active('hml',0)" onmouseout="inactive('hml',0)"
shape=POLY coords=40,33,53,41,55,52,51,60,43,58,38,45
href="http://www.dcz.gov.ua/khm"><AREA
onmouseover="active('chk',0)" onmouseout="inactive('chk',0)"
shape=POLY coords=75,60,72,51,79,48,85,46,88,41,96,33,106,50,92,53
href="http://www.dcz.gov.ua/chk"><AREA
onmouseover="active('chn',0)" onmouseout="inactive('chn',0)"
shape=POLY coords=26,68,33,66,50,58,40,61,34,58
href="http://www.dcz.gov.ua/chn"><AREA
onmouseover="active('chg',0)" onmouseout="inactive('chg',0)"
shape=POLY coords=105,29,103,17,105,2,94,4,84,5,78,18,86,29,96,32
href="http://www.dcz.gov.ua/chg"><AREA
onmouseover="active('kc',0)" onmouseout="inactive('kc',0)"
shape=CIRCLE coords=80,31,4 href="http://www.dcz.gov.ua/kie"><AREA
onmouseover="active('sv',0)" onmouseout="inactive('sv',0)"
shape=CIRCLE coords=118,114,4
href="http://www.dcz.gov.ua/sev"></MAP></DIV></TD></TR></TBODY></TABLE></TD></TR>

</BODY></HTML>



Ув. программеры все работает у меня на локальном серваке, только нет активных желтых рисунков областей. Где их взять и куда их вставить? Заранее благодарен!

   
 
 автор: Lelik   (08.05.2007 в 14:28)   письмо автору
 
   для: sirov   (08.05.2007 в 13:03)
 

можно сделать всплывающюю подсказку, вроде "Перейти до такої-то області" при наведении на область карты изображения.

   
 
 автор: ilyaILF   (08.05.2007 в 14:54)   письмо автору
 
   для: Lelik   (08.05.2007 в 14:28)
 

Построение активных желтых рисунков у вас идет в скрипте:
function build_arrea(arrea, name_arrea, x, y)
{
var str='';
str+='<div id="'+arrea+'" style="visibility : hidden; position : absolute; margin-top: '+y+'px; margin-left: '+x+'px; ">';
str+='<img src="img/map/'+arrea+'.gif" border="0"></div>';.........

с каждым индивидуальным именем "img/map/'+arrea+'.gif" идет вызов желтого рисунка из корневой папки, попробуйте к адресу сайта http://www.dcz.gov.ua/ добавить вызов arrea например с именем "vol" - http://www.dcz.gov.ua/img/map/vol.gif и вы увидите у себя на экране квадратный рисунок как раз с закрашенной желтым цветом областью.

   
 
 автор: sirov   (08.05.2007 в 16:39)   письмо автору
 
   для: ilyaILF   (08.05.2007 в 14:54)
 

Работает! Еще раз спасибо ilyaILF!

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования