«Магический шар»

Свой путь в вебе я начинал с вёрстки — в конце 90-х сделал страничку для своего факультета в домене своей альма-матер. Потом несколько лет довольно много верстал. В то время это было довольно сложное занятие — браузеры мало что умели и воевали между собой — реализовывали одни и те же вещи совершенно иначе, кроме того на размер страницы существовали очень серьёзные ограничения.

В 90-х, в веб-студии, где я работал, страница с графикой, стилями и всем текстом не должна была занимать больше 80 килобайт. В таких условиях приходилось выжимать из браузеров всё что только можно — использовать экзотические и даже недокументированные возможности.

Из того набора атрибутов и тегов, что тогда были доступны, мне довелось использовать всё, кроме одного-единственного атрибута ISMAP у картинки, ну просто не возникло ситуации, в которой он мог мне бы пригодиться.

Использование его в те годы могло бы выглядеть как-то так:

<A HREF=/cgi-bin/action.pl><IMG SRC=/i/pict.gif WIDTH=200 HEIGHT=100 ISMAP></A>

Чтобы вы прочувствовали дух времени, специально пишу большими буквами (так было принято) и без кавычек (экономили и на этом тоже).

При нажатии на картинку с этим атрибутом и ссылкой к урлу добавляются в качестве параметров координаты курсора на картинке. Видимо это нужно было для какого-то интерактива — по координатам на серверной стороне можно было понять на какую именно часть картинки нажимали, но мне, как я уже сказал, всё это ни разу не пригодилось.

«Магический шар» из прекрасного фильма «Трасса 60»; с отрисовкой деталей я не стал заморачиваться

Я уже несколько лет как не верстаю, но почему-то этот атрибут ISMAP мне всё никак не давал покоя. Как будто брошенная на последней странице книга — всё тянуло найти ему какое-то применение.

И вот два года назад меня осенило использовать его в вёрстке «магического шара» из фильма «Трасса 60». Если не смотрели, там у главного героя был шар, который давал ответы на заданные вопросы, если его потрясти.

Мой шар «отвечает» в том случае, если на нём щёлкнуть мышкой. В качестве случайных значений используются координаты, передаваемые при помощи атрибута ISMAP, плюс картинка вращается при помощи CSS, поэтому даже под неподвижным курсором всегда разные координаты.

Принцип получился довольно простой — все координаты, в которые пользователь может щёлкнуть мышкой, заданы как идентификаторы скрытых слоёв, лежащих поверх рисунка шара. Как только пользователь выбирает какую-либо координату, срабатывает стиль с селектором :target, который открывает слой.

HTML с таким подходом становится довольно жирным — у меня получился 1,2 мегабайта, но по нынешним временам это не объём.

Вообще я планировал дооформить шар и сгенерировать координаты более экономно (сейчас я генерирую под охватывающий квадрат, получается, что у меня есть бесполезные строки в его углах), но проект два года провалялся в локальном репозитории, а воз и ныне там.

Поэтому решил выложить что есть, всё-таки это не что-то серьёзное, а игрушечный концепт, его не обязательно допиливать до совершенства.

Поделиться
Отправить
Запинить
 932   5 мес   css   html   программирование
6 комментариев
hshhhhh.name 5 мес

Поэтому решил выложить что есть, всё-таки это не что-то серьёзное, а игрушечный концепт, его не обязательно допиливать до совершенства.

А пример на github.io ?

Евгений Степанищев 5 мес

Ссылка в репозитории есть :) https://bolknote.github.io/8ball/

hshhhhh.name 5 мес

Из того набора атрибутов и тегов, что тогда были доступны, мне довелось использовать всё, кроме одного-единственного атрибута `ISMAP` у картинки

Тоже никогда, моей любимой функцией с картинкам до сих пор остается `<map>`

Евгений Степанищев 5 мес

Этот тег когда-то частенько использовал ) Помню были специальные приложения для «изготовления карты ссылок» :)

hshhhhh.name 5 мес

Ссылка в репозитории есть :) https://bolknote.github.io/8ball/

Простите за дерзость, затупил.

hshhhhh.name 5 мес

Этот тег когда-то частенько использовал ) Помню были специальные приложения для «изготовления карты ссылок» :)

Скажите, а вы расстроились когда от ```<blink>``` избавились?

Евгений Степанищев 5 мес

Кстати, вроде да))

PastorGL 5 мес

Я как-то попробовал поюзать ISMAP на своём университетском хомяке (и ведь реально все тогда КАПСОМ хтмл писали, ё моё), но... чё-то не вышло. В итоге написал для менюхи аплет на Java. Эт был первый раз, когда я заюзал жабу. Не мог даже предполагать, что десять лет спустя только её родимую и буду юзать, но... в тот раз жутко не понравилось, так что переделал на JS под 4-й Netscape с тегами LAYER.

Во время было, а.

Евгений Степанищев 5 мес

Я на Джаве перекодирующий прокси писал — мой фаворит в те времена, браузер «Опера» не понимала весь тот набор русских кодировок, который тогда использовался, вот я прокси и написал.

Кодировки у меня различались портам, точные номера не помню, но, например, если я к сайту через прокси пытаюсь подсоединиться по порту 8081, то это будет КОИ, если 8082, то ИСО и так далее.

Больше на Джаве я не писал :)

КАПСОМ хтмл писали, ё моё)

Там ещё «пасхалки» есть ) cgi-bin, Перл, картинка в формате .gif )

hshhhhh.name 5 мес

браузер «Опера» не понимала весь тот набор русских кодировок, который тогда использовался, вот я прокси и написал.

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

Но на lib.ru до сих пор страшно заходить — там некоторые *txt в непонятных кодировках )

Евгений Степанищев 5 мес

Я начал пользоваться «Оперой» с версии 3.61, видимо там ещё не было поддержки всего зоопарка.

Популярное