Онлайн-справочник по самым часто задаваемым вопросам из темы "Как сделать?" на форуме QSP.su

9.6. Как сделать кликабельное изображение?

В: Как сделать кликабельное изображение?

В: Как сделать так, чтобы при щелчке по изображению выполнялись какие-то действия?

О:

Картинка должна выводиться с помощью html. То есть прежде всего необходимо включить распознавание html в игре. Для этого прописываем, например в самой первой локации, такую команду:

usehtml=1

Далее выводим картинку с помощью html-тега `<img>`. Путь к файлу картинки прописываем в атрибуте `src` этого тега:

*pl "<img src='images/picture.png'>"

Чтобы картинка стала кликабельна, необходимо "обернуть" её в теги гиперссылки:

*pl "<a href=''><img src='images/picture.png'></a>"

В атрибуте `href` обычно прописывают url — адресс страницы в интернете. Однако в QSP мы можем размещать внутри этого атрибута строки кода. В том числе и строку типа:

play "sound/opendoor.wav" & goto "улица"

Чтобы плеер понял, что в атрибуте `href` находится не url, а какой-то код, мы должны указать перед этим кодом ключевое слово `EXEC:`:

*pl "<a href='exec:'><img src='images/picture.png'></a>"

После `EXEC:` нам нужно вписать нашу строку кода. Однако, мы уже использовали кавычки (`""`) для указания границ строки, и апострофы (`''`) для указания границ атрибута `href`. А в нашей строке кода тоже есть кавычки. Как быть?

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

*pl "<a href='exec:play ""sound/opendoor.wav"" & goto ""улица""'><img src='images/picture.png'></a>"

Или, мы можем заключить в кавычки содержимое атрибута `href`, и экранировать от QSP эти кавычки:

*pl "<a href=""exec:play 'sound/opendoor.wav' & goto 'улица'""><img src='images/picture.png'></a>"

Эти два варианта равнозначны, используйте тот, что удобнее.

Теперь картинка будет представлять собой гиперссылку, и, когда мы запустим игру и щёлкнем по картинке, плеер выполнит код, который мы поместили в гиперссылку.