Rimon Lusi (fotovivo) wrote,
Rimon Lusi
fotovivo

Как сделать тест - гадание

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


fotovivopirojokpirojok 2pirojok 3pirojok 4pirojok 5pirojok 6pirojok 7pirojok 8pirojok 9pirojok 10pirojok 11pirojok 12pirojok 13pirojok 14pirojok 15pirojok 16pirojok 17pirojok 18pirojok 19pirojok 20pirojok 21pirojok 22pirojok 23pirojok 24pirojok 25pirojok 26pirojok 27pirojok 28
Выбери пирожок - получи стишок



Понадобится какая-нибудь фоновая картинка размером 600 Х 600 пикселей

напр:


и схема на прозрачном фоне -

Скачать схему

В графическом редакторе прозрачный слой накладываем на фоновую картинку,
и в пункты, отмеченные кружочками вклеиваем или дорисовываем антураж для гадания
(как пользоваться слоями в Faststone см тут)


Сохраняем то что получилось в альбом

Так же понадобится 12 картинок - результатов гадания, размер на ваше усмотрение.


К каждому пункту изображения прикрутим ссылку;
код для готовой схемы:

<img src="http://my-host/image_000.png" width="600px" height="600px" usemap="#map" alt="test-karta_fotovivo.lj"><map name="map">
<area shape="circle" alt="pirojok 01" coords="320,100, 25" href="##">
<area shape="circle" alt="pirojok 02" coords="120,150, 25" href="##">
<area shape="circle" alt="pirojok 03" coords="420,200, 25" href="##">
<area shape="circle" alt="pirojok 04" coords="170,250, 25" href="##">
<area shape="circle" alt="pirojok 05" coords="270,300, 25" href="##">
<area shape="circle" alt="pirojok 06" coords="420,300, 25" href="##">
<area shape="circle" alt="pirojok 07" coords="220,350, 25" href="##">
<area shape="circle" alt="pirojok 08" coords="320,350, 25" href="##">
<area shape="circle" alt="pirojok 09" coords="420,400, 25" href="##">
<area shape="circle" alt="pirojok 10" coords="370,450, 25" href="##">
<area shape="circle" alt="pirojok 11" coords="170,500, 25" href="##">
<area shape="circle" alt="pirojok 12" coords="320,500, 25" href="##">
</map>

В верхнюю строку вставим линк на основное изображение.

В атрибут href вместо ## нужно подставить ссылки на картинки-ответы.
Ссылки должны иметь следующий вид:

http://www.livejournal.com/update.bml?subject=Гадание на чем угодно;event=%3Ca%20href=%22httр://mу-blоg.livejournal.cоm/ХХХХХ.html%22%20target=%22_blank%22%3E%3Cimg%20src=%22httр://my-hоst/image_01.рng%22%20/%3E%3C/a%3E%0A%3Ca%20href=%22httр://my-blоg.livejournal.cоm/ХХХХХХ.html%22%3EПерейти к гаданию%3C/a%3E

Адреса и тексты, выделенные цветом - заменить на свои.


Ссылка вида httр://www.livejоurnal.cоm/update.bml?subject=
открывает форму новой записи (для залогиненных пользователей),
"subject" определяет заголовок поста. Годятся картинки с любым расширение gif, jpg, не только png.
- Как узнать номер записи для вставки в код?
- Отправить пост под глазом, затем исправить ХХХХХ.html на актуальный номер


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

Получить коды с координатами поможет специальный ресурс генератор map-area, хотя и вручную не сложно рассчитать.)


ооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооооо


Под катом - как сделать такую игрушку в своем блоге.
Tags: !que-sera-sera, HTMLство, пироШки
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 408 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →