"Интернет решения от доктора Боба" - читать интересную книгу автора (Swart Bob)

2.1.6. HTML "Живые" клавиши

Неплохо также иметь путь для навигации по записям таблицы, для этого я использую IMAGE MAP, встроенный в HTML-страницу и работающий даже если браузер загружает локальный файл. HTML-синтаксис для отображения картинки следующий:

lt;IMG SRC="image.gif"gt;

где image.gif это файл типа .GIF или .JPEG. Мы можем вставить опцию USEMAP в тег, для указания имени карты образа, например:

lt;IMG SRC="image.gif" USEMAP="#map"gt;

Внутри страницы мы можем ссылаться на "#map", а в действительности на картинку. Image map ничего более чем список координат и ссылок. Переход на ссылку произойдет, мы щелкнем мышкой в указанных координатах. HTML-синтаксис карты образа, the image map выглядит как навигационная панель размером 25x125 пикселей:

lt;MAP NAME="map"gt;

lt;AREA SHAPE="rect" COORDS="51,0,75,25" HREF="next"gt;

lt;AREA SHAPE="rect" COORDS="76,0,100,25" HREF="last"gt;

lt;AREA SHAPE="rect" COORDS="101,0,125,25"HREF="this"gt;

lt;/MAPgt;

Таким образом, мы можем свой навигатор по базе данных. Для этого нам необходимо иметь три картинки: одна для первой записи (клавиши первая и предыдущая запрещены), одна для последней записи (клавиши следующая и последняя запись запрещены) и одна для записей в середине таблицы (все клавиши разрешены). В каждой ситуации я назначаю ссылку для одной из клавиш на другую страницу. Это обеспечивает сильную обратную связь между нажатиями на клавиши. Конечно, клавиши не могут быть надавлены, но мы имеем очень быстрый ответ по сравнению с Java или CGI-приложениями (все что происходит это только прыжок на другую страницу).

NAVIGATL.GIF:

NAVIGAT.GIF:

NAVIGATR.GIF:

Вот код на Дельфи, который генерирует корректный образ и карту для каждой записи:

  if (RecNr = 1) then { first record }

  begin

    writeln(f,'lt;IMG SRC="../images/navigatl.gif" '+

               'ALIGN=RIGHT USEMAP="#map" BORDER="0"gt;');

    writeln(f,'lt;MAP NAME="map"gt;');

    writeln(f,'lt;AREA SHAPE="rect" COORDS="51,0,75,25"  HREF="'+

                PageNr(2)+'"gt;');

    writeln(f,'lt;AREA SHAPE="rect" COORDS="76,0,100,25" HREF="'+

                LastPage+'"gt;');

    writeln(f,'lt;AREA SHAPE="rect" COORDS="101,0,125,25"HREF="'+

                PageNr(RecNr)+'"gt;');

  end

  else

  if (RecNr = RecordCount) then { last record }

  begin

    writeln(f,'lt;IMG SRC="../images/navigatr.gif" '+

               'ALIGN=RIGHT USEMAP="#map" BORDER="0"gt;');

    writeln(f,'lt;MAP NAME="map"gt;');

    writeln(f,'lt;AREA SHAPE="rect" COORDS="0,0,25,25"   HREF="'+

                FirstPage+'"gt;');

    writeln(f,'lt;AREA SHAPE="rect" COORDS="26,0,50,25"  HREF="'+

                PageNr(RecNr-1)+'"gt;');

    writeln(f,'lt;AREA SHAPE="rect" COORDS="101,0,125,25"HREF="'+

                PageNr(RecNr)+'"gt;');

  end

  else { middle record }

  begin

    writeln(f,'lt;IMG SRC="../images/navigat.gif" '+

              'ALIGN=RIGHT USEMAP="#map" BORDER="0"gt;');

    writeln(f,'lt;MAP NAME="map"gt;');

    writeln(f,'lt;AREA SHAPE="rect" COORDS="0,0,25,25"   HREF="'+

                FirstPage+'"gt;');

    writeln(f,'lt;AREA SHAPE="rect" COORDS="26,0,50,25"  HREF="'+

                PageNr(RecNr-1)+'"gt;');

    writeln(f,'lt;AREA SHAPE="rect" COORDS="51,0,75,25"  HREF="'+

                PageNr(RecNr+1)+'"gt;');

    writeln(f,'lt;AREA SHAPE="rect" COORDS="76,0,100,25" HREF="'+

                LastPage+'"gt;');

    writeln(f,'lt;AREA SHAPE="rect" COORDS="101,0,125,25"HREF="'+

                PageNr(RecNr)+'"gt;');

  end;

  writeln(f,'lt;/MAPgt;');

Все три образа панели навигации хранятся в общем каталоге "../images" и дают мне шанс конвертировать множество таблиц в одно и тоже время для всех точек только с помощью этих трех образов. В действительности, в нашей локальной интрасети мы имеем порядка 23 таблиц преобразованных в 200 HTML страниц, и все они используют эти самые три образа.