Персональный проект Александра Чижова, Иркутск 1998-2006Компьютерный журнал Cooler | скачать новые компьютерные игры | гаджеты | астрономия | обзоры программиста System's temperature
recent issueaboutarchiveLive TAMrubricatorlinksBooks digest
Компьютерный журнал "Cooler" Александра Чижова (Иркутск)
24 мая 1998
 N8
"Красивое вбегание в зал
равно десяти фрагам"
(пособие по игре)
внеочередной номер 

Согласуясь с эпиграфом, я попробую "красиво вбежать". В язык DHTML, то бишь, в dynamic hypertext markup language. Нормальным языком говоря - динамический html.
 
Собственно, это и есть JavaScript. Который работет в полную мощь, начиная с браузеров 4.х версий и выше. Так что если у вас не Netscape Navigator 4.x или не MSIE 4.x (или выше), то можете эту статью пропустить, а лучше - запустите один из этих браузеров.
 
С появлением программ, понимающих спецификацию языка Java в полном объеме народ осторожно озираясь по сторонам ("а вот у него-то, смотри ка - кнопочки подсвечиваются!") начал встраивать скрипты в свои страницы. К слову сказать, практически на всех забугорных сайтах использование Явы уже стало де-факто. Но если подсвечивающиеся кнопочки навигатор версии 3 (например) еще понимает, то вот более серьезные вещи, типа "document.layers" уже не сечет. А и с чего бы ему сечь, если поддержка слоев появилась только в 4 и выше навигаторе (эксплорере). Слой (layer) - полезная штука, позволяет расположить в документе любую "вещь" в указанных координатах (в пикселах) например, поверх текста. Я не буду здесь разбирать особенности и тонкости всех этих процедур, потому как это хорошо описано на сервере Dynamic HTML Lab. Динамические синхронизированные фреймы, динамические меню и еще много чего. Мне например, понравился скрипт, когда поверх текста возникает окно (и, конечно, его можно перемещать) , в котором может выводиться какая-нибудь информация. Не торопитесь! Дело в том, что это окно находится как бы внутри собственного окна броузера и принадлежит самому документу (!). Это уже что-то. (а не что-то грубое, типа: win=new(...) или winopen())
 
Но больше всего меня поразила вот какая штука... Для объяснения, почему я обратил на это внимание, я немного отвлекусь: когда я создаю страницу с картинками, частенько возникает такая проблема: так как размер экрана не у всех один и тот же, приходится делать ширину картинки настолько малой, насколько позволяет размер фрейма, который, в свою очередь занимает какую-то часть окна, ага! а вот какого окна? Я, например, вынужден держать средний размер 800х600. Создавая страницу надо подумать, что смотреть могут и те, у которых экранчик может быть и 640х480. Представьте, если бы я делал страницы журнала в разрешении 1600х1200 и думать бы не думал что есть такое разрешение как 800х600. И еще удивлялся бы: "а чего это у вас не видно текста из-за наплывшей фотографии? у меня вон как классно все на моем экране...". Вот-вот. Следовательно, нужно следить за шириной картинки. Делать картинку шириной около 400 пикселов? Извольте! Только эту картинку текст не сможет "обтекать", потому как не останется места для него (даже на экране 800х600 !), и будет разрыв. А это, согласитесь - уже картинная галерея, а не текст с картинкой. В общем - это понятно. Поэтому приходится ужимать картинки (а попросту - коверкать!) до 200-300 пикселов, что, конечно, сказывается на качестве. Изврат! Надо еще и делать ссылку на картинке - посмотрите, мол, там есть ба-альшая (читай - нормальная). Причем, даже не в объеме файла дело, т.е. уменьшать приходится не из-за него!
 
Вот! Здесь я вернусь к тому, что нам даст JavaScript dhtml для решения этой проблемы. Имеется возможность показать картинку побольше прямо на лету! Причем, имея загруженную всего одну (ее же) картинку! Ткните мышкой на картинку с картой - увидите, что получится. Не правда ли, удобно? А теперь подвигайте полоску прокрутки окна так, чтобы посмотреть граничные условия - когда картинка маленького размера внизу окна и вверху. Программа умно показывает большую картинку, сообразуясь с расположением исходной в окне.
 
Вот такое красивое решение проблемы, которая, согласитесь у многих уже вызывает при упоминании о ней зубную боль. Постараюсь объяснить на пальцах, как это сделано. Известно, что картинка вставляется посредством тэга <IMG SRC="picture name" WIDTH=w HEIGHT=h>, причем WIDTH и HEIGHT являются указателями браузеру, как шкалировать (scale) картинку (когда там стоят параметры оригинально размера картинки, браузер картинку не трогает). Если изменить эти два параметра пропорционально (допустим в 2 раза), то браузер сам сожмет (или расширит) картинку. Конечно, он это сделает несколько убого (не так умно как, например, фотошоп), но сделает. Это первый шаг. (Вот у меня на примере - берег Черного моря, там надписи буквами толщиной в 1 (один) пиксел, ширина у нее - 340 пикселов - а? как прикажете сжимать? буковки-то исковеркаются, и фотошоп не поможет! Раньше бы я сделал маленькую картинку, а на нее поставил линк - на нармальноразмерную) Так вот, если мы хотим показать картинку  большого размера, а занимать экран не очень хочется, то надо вставить эту картинку как есть, а потом ручками исправить параметры WIDTH и HEIGHT в получившемся тэге  в меньшую сторону и пропорционально, т.е. в одно количество раз (процентов). Желательно, поточнее. Например, здесь - реальный размер картинки - 340х300, а в тэге я прописал - 136х120 - "уменьшил" точно в 2.5 раза. Эта возможность, конечно была всегда, только вот смотреть такую "ужатую" картинку было неприятно, а в исходном виде можно было, лишь нажав правую кнопку мыши, вызвав меню и указав на пункт "View image...". Теперь броузер показывает мне ее в приемлемом размере - она не мешает тексту и продолжает нести информативность. Но качество естественно, не то.
Вот тут вступает в дело JavaScript: коротко говоря, список правил (не путать с апплетом, который долго грузится, не привязан к документу и вообще-то в плане безопасности - не фонтан...) говорит броузеру, когда надо подправить значения параметров WIDTH и HEIGHT в тэге, чтоб браузер показал ее во всей красе! А подправить их надо, конечно же - по нажатию кнопкой мыши на картинку. Вот и все! Повторное нажатие воротит параметры на место. И усе будет опять окей.
 
Налицо - несомненное удобство, так как пользователю не нужно будет заботиться о том, посмотреть ли картинку прямо в этом окне или выгрузить ее в другое, чтоб посмотреть в нормальном виде, а просто надо будет тыкнуть мышкой - и все! Причем, картинка-то одна и та же!
 
Это основа. На этой основе можно изготавливать меню, окна, привязанные к документу - все, что хочешь. Но я как-то отношусь более потребительски к этим делам и беру необходимое по мере надобности. Поэтому этот номер вышел внеочередным. Просто хотел рассказать о такой примечательной и несомненно, полезной авангардной штуковине. :-)
 
Некоторые подробности: новые возможности JavaScript поддерживают броузеры, начиная с 4 версии, что навигатор, что эксплорер. Я видимо, буду использовать этот скрипт, потому как пользователи броузеров более старых версий ничего не потеряют - они могут использовать прием, описаный выше, т.е. посмотреть картинку полностью с помощью контекстного меню. Очень уж удобная штука.
 
Вы уже посмотрели исходник страницы?  :-) ничего не нашли? Правильно, и не найдете! :-) Эта штука (скрипт, не путать с апплетом!) подправляет исходный текст. Сам скрипт есть - качайте. (если в файл, тогда - с шифтом)
 
В общем, план действий таков: вставьте в конце  своей html страницы этот скрипт, он должно стоять между закрывающим тэгом </BODY> и тэгом </HTML>. Скрипт загружается после того, как загрузится весь документ html - действительно, а как же можно работать с картинкой, если она еще не подгрузилась?

Вообще, когда я  уже выложил номер и стал проверять его навигатором NN3.0 Gold - он не понял такого новомодного понятия, как "подгрузка скрипта" и успешно загрузил его вместо текста документа в окно, отчего я приторчал, начал пробовать и так и этак, но заставить третий навигатор понимать и делать то что от него хотят, мне так и не удалось. Удалось лишь тогда, когда отключил JavaScript в настройках - но это уже, согласитесь - фатально. Так что от подгрузки пришлось отказаться, и встроить прямо в текст. Как сейчас.

 
О самом скрипте напишу только самое основное: там в начале есть параметры, которыми можно управлять, они указывают скрипту, какие картинки в документе нужно изменять, а какие и не думать.

    scale = 2.5;
    scaleGIF = 2.5;
    scaleOTHER = 2.5;

    allPics = false;
    noLinks = true;
    justGIFs = false;
    justJPGs = false;

    byName = false;
    useName = null;

 
Что мы имеем здесь: (вообще, если лень разбираться - это можно и не читать - и так заработает, но только для нормальной работы все же следует "прошерстить" весь скрипт и понять как он действует. Для тех, кто занимался программированием - это не представит труда).

  • 'scale=2.5' - это масштаб шкалирования! Это главный параметр, сообразуясь с которым, вы дожны изменять значения в параметрах width и height!
  • 'scaleGIF' и 'scaleOTHER' - это уже я добавил сам (и там по тексту еще чуть подправил) но если их не трогать - то все будет работать как и без них.
  • 'allPics' - этот параметр при значении false говорит о том, что нельзя изменять никакие  типы картинок (gif и jpg).
  • 'noLinks' здесь присвоено true, т.е. попросту говоря, можно изменять все картинки, у которых нет линков. Что мы и видим. У карты нет линка. А вот картинки внизу ("предыдущий", "следующий" линки имеют, поэтому скрипт их не трогает!). Переменная "перебивает" allPics ! (я кстати, так и не понял, зачем этот параметр - allPics нужен, в тексте он вроде не используется).
  • 'justGIFs' и 'justJPGs' - понятно, говорят о том, какие типы картинок можно изменять (здесь эти параметры "перебиваются" переменной 'noLinks').
  • 'byName' и 'useName' - эти переменные используются для того, чтобы можно было указать, какую именно картинку вы хотите изменять (ну допустим, у вас имеется 2 картинки JPG, обе без ссылок, а извращаться Вам нужно только над одной). Так вот, в тэге <IMG SRC = ""...> прописываете NAME картинки. Например так: <IMG SRC="file" NAME="scaleit" WIDTH=30 HEIGHT=20>. И имя 'scaleit' используете в переменной 'useName="scaleit";', а в переменную 'byName' устанавливаете значение 'true'. И тогда программа будет "трогать" только указанную картинку, а остальные установки ей будут до фени - это надо учесть. Вообще, приоритеты можно посмотреть внутри скрипта.
Все! больше я ничего про скрипт говрить не буду, а то и так вон сколько наворотил. Если будут вопросы - пишите, я обязательно отвечу.

 
 вот такой вот получился номерок... Вообще, я не собирался писать про HTML и иже с ним, потому как про него столько в интернете понаписано, а вот пришлось... ты гляди. Ну что ж, думаю Вам будут полезны мои скромные изыскания.

 
http://www.webreference.com/dlab/   - Вот тут оно все про это и лежит! Там все в примерах. 
prev

[ Архив+поиск ]-[ все комментарии ]-[ Жизнь ТАМ ]
[ Хакеры ] [ Журнал WebSound ]
[ обзор книг ] [ mouseimp ] [ биржа труда ] [ Ссылки ]
[RSS feed simple]    [RSS feed simple 2]    [RSS feed complete]

next

Пишите! Мне интересно будет Ваше мнение, замечания и пожелания. Указывайте в письме согласие на опубликование. Также принимаются статьи для журнала - Вы можете написать свое мнение о "железе", софте или игрушке.

Cooler (c) Alexander Chizhov, 1998 
техническую поддержку журнала осуществляет фирма DARS.
  iXBT compatible award
Компьютерный журнал "Cooler". Авторство и выпуски Александр Чижов. Иркутск
1998-2009
Рейтинг@Mail.ru
Cooler
WWWoman - лучший WM!!
Rambler counter