Как встроить текстовую ссылку в изображение?

Question

Как мне вставить текст в изображение? Встроенный текст должен быть связан с URL-адресом. Вариант использования подобен изображению со ссылкой «Кликните здесь», которая открывает новую страницу.

Answer 1

Если вы хотите держаться подальше от z-индексов и / или карт изображений, вы можете сделать это по-старому, то есть установить изображение в качестве фона для таблицы или div, а затем просто поместить текст внутри таблица или раздел.

Answer 2

Для этого необходимо выполнить следующие действия:

1. Добавьте свой текст к изображению с помощью выбранной вами графической программы. (Используйте ImageMagick для автоматической обработки) Затем создайте карту изображений , чтобы сделать части изображения кликабельными. Если вам нужно какое-то «горячее состояние», то вы должны использовать маленькие изображения, которые абсолютно расположены над исходным изображением, и показать / скрыть их с помощью Javascript. В зависимости от ваших потребностей может быть проще сделать все изображение кликабельным.

2. Добавить нормальное изображение и нормальную гиперссылку. Вы можете использовать обычный тег img или установить фоновое изображение контейнера. Затем используйте абсолютное позиционирование, чтобы переместить гиперссылку в нужную позицию в верхней части изображения. С этим решением вам не нужен Javascript для создания эффекта наведения.

Answer 3

Используя редактор изображений, добавьте нужный текст к самому изображению, а затем используйте карту изображений в области, где текст отображается по требуемому URL. Для образца, пожалуйста, проверьте мой образец на http://shreedhar.kotekar.com/ImageMapSample.htm

Answer 4

Вы можете использовать этот инструмент:

http://www.jsclasses.org/package/324-JavaScript-Embed-encoded-text-in-images-using-steganography.html

и здесь на github:

https://github.com/blauharley/LoremImageCryptonator

С помощью этого JS-объекта вы можете встраивать любой текст, который захотите. Он предлагает два метода (getCryptoImage, getTextFromCryptoImage), которые можно использовать для вставки и извлечения любого текста в изображение и из него.

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

Но прежде всего вам нужно создать «Крипто-изображение», в которое был вставлен URL-адрес, а затем сохранить изображение. Сохраненное «Крипто-изображение» затем может быть показано на странице.

Надеюсь, это поможет.

Answer 5

Если вы используете asp.net, это Вставить текст в изображение с использованием ASP.NET из списка разработчиков - хороший пример.

Редактировать - Из ваших комментариев я вижу, что вы ищете php: Добавление текста в изображения с помощью PHP