Нужен совет по реализации - Компьютерный форум OSzone.net

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)

- Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)

- - Нужен совет по реализации (http://forum.oszone.net/showthread.php?t=270439)

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

Доброго времени суток! Начальство поставило задачу в вебе нарисовать серверную стойку и при щелчке на какой нибудь сервер появлялись его параметры. Хотел сделать через <map> <area> и прикрутить fancybox, но ничего не получилось. Как можно еще сделать чтоб при щелчке появлялось модальное окно с параметрами сервера? Рисунок стойки приложил.

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

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

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

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

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, но он не работает. Пока реализовал через фрейм.

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"; 
    } 
} 
?>

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

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

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

    });

});

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