Нужен совет по реализации

mar · Отправлено: **09:08, 22-10-2013** | #2

Radik_Assasin,
лучше приложите Ваш код

В чем у Вас, собственно, проблемы? Потому что другие варианты с точки зрения реализации не легче и все равно потребуют того же:

отрисовки координат каждого живого элемента картинки,
обработки события щелчка
и появления модального окна с соответствующим текстом.

Кстати, текст (данные о сервере) берется из базы, или это все чистый html ?

Radik_Assasin · Отправлено: **16:38, 22-10-2013** | #3

Пока сделал так:

HTML код:

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="style.css">
		 <link href="/fancybox/jquery.fancybox.css" type="text/css" rel="stylesheet"></link> 
		<script type="text/javascript" src="jquery.fancybox-1.2.1.pack.js"></script>
		<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="jquery.easing.1.3.js"></script>
		<script type="text/javascript">
		$('map > area.fancybox').click(function(e) {
		e.preventDefault();
		var url = $(this).attr('href');
		$.fancybox({
		'href' : url,
		'type' : 'iframe'
		});
		});
</script>
	</head>
	<body>
		<div id="main">
			<div id="center"><img src="stoika.png" usemap="#servers"></div>
			<div id="map">
				<map id="servers" name="servers">
					<area class="fancybox" shape="poly" coords="32,179,31,128,31,18,76,18,75,179" href="1.php?id=1" target="frame">
					<area shape="poly" coords="79,178,79,19,125,19,124,179" href="1.php?id=2" target="frame">
					<area shape="poly" coords="126,178,126,19,172,19,173,178" href="1.php?id=3" target="frame">
					<area shape="poly" coords="173,182,173,18,220,18,221,182" href="1.php?id=4" target="frame">
					<area shape="poly" coords="317,341,316,18,366,18,367,343" href="1.php?id=7" target="frame">
					<area shape="poly" coords="366,345,365,18,413,18,412,343" href="1.php?id=8" target="frame">
					<area shape="poly" coords="32,342,34,185,77,185,76,341" href="1.php?id=9" target="frame">
					<area shape="poly" coords="79,345,81,182,122,182,124,341" href="1.php?id=10" target="frame">
					<area shape="poly" coords="127,345,127,181,173,180,172,344" href="1.php?id=11" target="frame">
					<area shape="poly" coords="176,344,175,183,222,183,221,341" href="1.php?id=12" target="frame">
			</div>
			<div id="table">
				<iframe name="frame" frameborder="no" hspace="10"  width="500" height="1300"></iframe>
			</div>
		</div>
	</body>
</html>

Обработчик:

PHP код:


<table width=400 border=2 cellpadding=3 cellspacing=0 bordercolor="#000000" rules="all" >
  <!--<tr bgcolor="#CCCCCC" height=17>
    <td width=200><div align="center"><strong><em></em></strong></div></td>
    <td width=200><div align="center"><strong><em></em></strong></div></td>
      </tr>-->
<?php
  $count = 1;
    if ($_GET['id'] == 1){
   $file =  fopen ("1.csv","r");
   }
   elseif ($_GET['id'] == 2){
   $file =  fopen ("2.csv","r");
   }
   elseif ($_GET['id'] == 3){
   $file =  fopen ("3.csv","r");
   }
   elseif ($_GET['id'] == 4){
   $file =  fopen ("4.csv","r");
   }
   elseif ($_GET['id'] == 7){
   $file =  fopen ("7.csv","r");
   }
   elseif ($_GET['id'] == 8){
   $file =  fopen ("8.csv","r");
   }
   elseif ($_GET['id'] == 9){
   $file =  fopen ("9.csv","r");
   }
   elseif ($_GET['id'] == 10){
   $file =  fopen ("10.csv","r");
   }
   elseif ($_GET['id'] == 11){
   $file =  fopen ("11.csv","r");
   }
   else {
   $file =  fopen ("12.csv","r");
   }
  
    while ($data = fgetcsv ($file, 1000, ";")) 
  {
    $num = count ($data);
   $count++;
if ($data[1] == ''){
    continue;
    }
       print "<tr height=17>";
    for ($i=0; $i < $num; $i++) 
    {   
    
   
        print "<td align=left>&nbsp;";
        echo($data[$i]);
        print "&nbsp;</td>";
        
      }
      print "</tr>";
  }
  fclose ( $file );
?>

Хотел к area прикрутить onclick, но он не работает. Пока реализовал через фрейм.

mar · Отправлено: **18:18, 22-10-2013** | #4

Radik_Assasin,
ну, если упростить, выкинув JavaScript, iframe и обработку csv т.к. этих данных у меня все равно нет, и сделав вместо них три тестовых файла с разными строками, то работает:

HTML код:

<!DOCTYPE html>
<html>
	<head>	</head>
	<body>
		<div id="main">
			<div id="center"><img src="stoika.png" usemap="#servers"></div>
			<div id="map">
				<map id="servers" name="servers">
					<area class="fancybox" shape="poly" coords="32,179,31,128,31,18,76,18,75,179" href="1.php?id=1" target="frame">
					<area shape="poly" coords="79,178,79,19,125,19,124,179" href="1.php?id=2">
					<area shape="poly" coords="126,178,126,19,172,19,173,178" href="1.php?id=3">
					<area shape="poly" coords="173,182,173,18,220,18,221,182" href="1.php?id=4">
					<area shape="poly" coords="317,341,316,18,366,18,367,343" href="1.php?id=7">
					<area shape="poly" coords="366,345,365,18,413,18,412,343" href="1.php?id=8">
					<area shape="poly" coords="32,342,34,185,77,185,76,341" href="1.php?id=9">
					<area shape="poly" coords="79,345,81,182,122,182,124,341" href="1.php?id=10">
					<area shape="poly" coords="127,345,127,181,173,180,172,344" href="1.php?id=11">
					<area shape="poly" coords="176,344,175,183,222,183,221,341" href="1.php?id=12">
			</div>
		</div>
	</body>
</html>

PHP код:


<?php
  $count = 1;
    if ($_GET['id'] == 1){
    echo "1";
    $fname = "1.csv";
    echo "\n<br/>$fname<br/>\n";
    $file =  fopen($fname,"r");
   }
   elseif ($_GET['id'] == 2){
   $file =  fopen ("2.csv","r");
   }
   elseif ($_GET['id'] == 3){
   $file =  fopen ("3.csv","r");
   }
   elseif ($_GET['id'] == 4){
   $file =  fopen ("1.csv","r");
   }
   elseif ($_GET['id'] == 7){
   $file =  fopen ("2.csv","r");
   }
   elseif ($_GET['id'] == 8){
   $file =  fopen ("3.csv","r");
   }
   elseif ($_GET['id'] == 9){
   $file =  fopen ("1.csv","r");
   }
   elseif ($_GET['id'] == 10){
   $file =  fopen ("2.csv","r");
   }
   elseif ($_GET['id'] == 11){
   $file =  fopen ("3.csv","r");
   }
   else {
   $file =  fopen ("1.csv","r");
   }
  
while (($data = fgetcsv($file, 1000, ",")) !== false) { 
    foreach ($data as $value) { 
        echo $value . "<br />\n"; 
    } 
} 
?>

Дальше просто усложняйте до нужного Вам состояния и отлавливайте ошибки

Radik_Assasin · Отправлено: **12:33, 23-10-2013** | #5

Попробовал вот так сделать:

HTML код:

$('map > area.fancybox').click(function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    var title = $(this).attr('title');
    var type = $(this).attr('rel');
    $.fancybox({
        'title': title,
        'titlePosition': 'inside',
        'href' : url,
        'type' : type
    });
});

Но все равно не работает. Т.е. не открывается модальное окно как я хотел.
А загружается новая страница. Как будто и нет тут скрипта.