Вы хотите, чтобы ваше изображение было интерактивным, чтобы, когда кто-то нажимает на него, он попадает на указанную вами веб-страницу? В этом руководстве для начинающих я покажу вам, как создать HTML для вставки в любое место, где это приемлемо. Я также объясню, как сделать изображение интерактивным в WordPress, и отвечу на некоторые часто задаваемые вопросы.
«/>Обратите внимание: если вы хотите щелкнуть изображение в Facebook, Twitter, Instagram или других социальных сетях, этот метод использовать нельзя. Прочтите FAQ в конце сообщения, чтобы узнать больше.
Пример как это работает
Для этого урока мы будем использовать это изображение из моей книги по тайм-менеджменту:
Нажмите на нее, и вы попадете на страницу вашего продукта на Amazon.
7 шагов, чтобы сделать изображение интерактивным с помощью HTML
- Выберите изображение, чтобы щелкнуть
- Оптимизируйте изображение
- Загрузите изображение в Интернет
- Получите URL изображения
- Получить URL целевой страницы
- Создать HTML
- Используйте HTML везде, где хотите
1. Выберите изображение, чтобы щелкнуть
Используйте собственное изображение или купите стоковое изображение. (Я покупаю свои стоковые изображения во время распродажи дважды в год. Подпишитесь на мой список уведомлений о Горящих предложениях, чтобы получать уведомления, когда вы увидите его ниже.)
Если вы не используете собственное изображение или изображение, приобретенное на авторитетном сайте стоковых изображений, убедитесь, что у вас есть разрешение на его использование и что вы не нарушаете чьи-либо авторские права.
Могу я использовать чужой логотип?
Будьте при этом очень осторожны. Многие компании будут счастливы, если вы используете их логотип, если следуете их руководящим принципам в отношении бренда. Найдите рекомендации бренда, выполнив поиск на их сайте или связавшись с ними напрямую.
2. Оптимизируйте изображение
Многие изображения, в том числе поступающие непосредственно с камеры, имеют очень большой размер файла. Слишком большой для обычного использования в сети; они замедлят работу вашего сайта. Оптимизируйте изображение, изменив его размер и сжав, загрузив в Интернет.
Сначала изображение, поэтому фактическая ширина и длина (обычно измеряемая в пикселях) должны быть настолько большими, насколько это необходимо. Хорошее практическое правило – использовать ширину контейнера, в котором будет размещаться изображение на вашем сайте. Например, если вы читаете этот пост на рабочем столе, контейнер, в котором находится этот текст, имеет ширину примерно 800 пикселей. Используйте такой инструмент, как PicResize.
Во-вторых, имидж. Это сокрушает вас, уменьшая размер файла без ущерба для качества в Интернете. Используйте такой инструмент, как TinyPNG (я предпочитаю) или Squoosh, чтобы сжать изображение.
Для получения дополнительной информации прочтите Советы по использованию изображений на вашем веб-сайте.
3. Загрузите изображение в Интернет.
Для просмотра в Интернете ваше изображение должно быть где-то «размещено». Он не появится и будет доступен пользователям Интернета, если просто сохранить его на вашем персональном компьютере.
Итак, где вы можете разместить свое изображение?
Если у вас есть блог или веб-сайт, сделайте это там. Просто загрузите его. Процесс загрузки изображения на ваш собственный сайт будет зависеть от того, какой у вас тип сайта. В WordPress, например, перейдите в Панель управления> Мультимедиа> Добавить новый. Размещено
У вас нет блога или веб-сайта? Нет проблем. Используйте такую службу, как Google Диск. После регистрации бесплатной учетной записи загрузите свое изображение, и оно будет размещено. Вот как загрузить файл на Диск.
4. Получите URL-адрес изображения.
URL-адрес – это веб-адрес. Например, URL-адрес этого сообщения в блоге:
https://amylynnandrews.com/html-clickable-image/
URL-адрес изображения – это уникальный веб-адрес вашего изображения. Точно так же, как ваш домашний адрес сообщает людям, где вы живете, URL вашего изображения сообщает Интернету, где ваше изображение находится в Интернете.
Любое изображение, размещенное в Интернете, имеет свой собственный URL. Нам это понадобится для создания нашего HTML.
Как найти URL-адрес вашего изображения?
Если у вас есть собственный блог или веб-сайт, место, где можно найти URL-адрес изображения, будет зависеть от используемой вами платформы.
В WordPress, например, перейдите в Панель управления> Медиа> Библиотека. Найдите свое изображение и нажмите на него. В окне «Сведения о вложении» выделите и скопируйте весь фрагмент кода в поле «Копировать ссылку» (убедитесь, что вы получили все!).
Я предлагаю вам открыть пустой документ где-нибудь на вашем компьютере (документ Google, документ Word, текстовый редактор и т. Д.). Вставьте сюда ссылку на изображение. Воспользуемся через минуту.
Где вы берете URL-адрес изображения на Google Диске? Вот учебник.
5. Получите URL целевой страницы.
URL целевой страницы – это просто страница, на которую вы хотите, чтобы кто-то переходил, когда нажимал на ваше изображение. Это судьба
В моем примере, когда кто-то нажимает на обложку моей книги, я хочу попасть на эту целевую страницу.
Вероятно, вы уже знаете URL-адрес целевой страницы, на которую должны переходить люди.
Если вы не знаете, что это такое, откройте новую вкладку или окно в своем веб-браузере (Chrome, Safari, Firefox и т. Д.) И перейдите на веб-страницу, к которой вы хотите, чтобы люди открывали доступ, когда они нажимают на ваше изображение. Выделите и скопируйте веб-адрес в адресную строку браузера.
Например, я хочу, чтобы люди попадали на страницу Amazon моей книги. Поэтому, когда я нахожусь на этой странице, я копирую URL-адрес в адресную строку следующим образом:
Вставьте целевой URL в документ, созданный на шаге 4.
6. Создайте HTML-код.
Пришло время создать HTML. Это самый простой фрагмент HTML, который вы будете использовать:
(UNA указывает на HTML-тег. Подробнее о тегах на w3schools.com.)
Замените «LandingPageURL» и «ImageURL» на указанные в шагах 4 и 5 выше. Но сохраняйте цитаты! Просто вставьте между ними URL-адреса (включая https).
Также добавьте замещающий текст. Вы заметите пробел для ввода альтернативного текста во фрагменте HTML (alt = ””). Альтернативный текст улучшает доступность для тех, кто не может просматривать изображения в Интернете. Альтернативный текст должен описывать то, что изображено на картинке. Опять же, заключите текст в кавычки. Узнайте больше об альтернативном тексте здесь.
В нашем примере мой HTML-код будет выглядеть так:
URL-адреса длинные и поэтому переносятся на следующую строку. Не волнуйтесь, вы просто ищете то, что в кавычках.
Есть ли какой-нибудь инструмент, который я могу использовать для создания HTML?
Да, есть много инструментов для генерации HTML. Один из них – редактор HTML5.
Вы увидите поле с форматированным текстом (со всеми значками вверху) и поле кода. Если поля предварительно заполнены, щелкните внутри любого из них и выберите все. Удалять. Это должно освободить коробки.
В поле форматированного текста щелкните значок Вставить / изменить изображение:
Во всплывающем окне вставьте URL-адрес в поле «Источник» всплывающего окна. Также неплохо описать поле описания изображения. Это ваш альтернативный текст. Щелкните ОК.
Ваше изображение появится в поле форматированного текста. HTML появится в поле кода.
Изображение будет синим, потому что оно выделено. Просто оставьте это выделенным. Теперь щелкните значок ссылки слева от значка изображения:
Вы получите всплывающее окно. Вставьте URL-адрес в поле URL-адреса. У вас также есть возможность настроить ссылку для открытия нового окна, выбрав «Место назначения»> «Новое окно».
Щелкните ОК.
7. Используйте HTML везде, где хотите.
Это! Вы готовы использовать HTML. Вставьте его в боковую панель или нижний колонтитул или там, где поддерживается HTML.
Это должно выглядеть примерно так:
Как сделать в WordPress кликабельное изображение?
В WordPress выберите «Добавить блок»> «Изображение в окне публикации или страницы». Убедитесь, что настройки блока видны справа. Если это не так, выделите изображение, щелкнув по нему, щелкните три точки (Дополнительные параметры)> Показать настройки блока. Прокрутите вниз до Параметры ссылки> Ссылка на: Пользовательский URL. Добавьте URL-адрес целевой страницы, на которую должны перенаправляться люди.
Вы не можете посмотреть видео? Смотри здесь.
Будет ли это работать в Facebook, Twitter, Instagram или других социальных сетях?
Нет. Как правило, платформы социальных сетей не принимают HTML, поэтому это не сработает. Вышеупомянутый метод лучше всего подходит для блогов (нижние колонтитулы, боковые панели и т. Д.), Веб-сайтов и т. Д.
В социальных сетях сначала попробуйте вставить прямо в свой пост или твит. Часто это автоматически отображает избранное изображение на целевой странице.
Если это не сработает так, как вы хотите, вот несколько советов:
В FacebookЕсли вы пытаетесь отобразить большое изображение, измените изображение на целевой странице. После этого запустите URL-адрес целевой страницы с помощью инструмента отладки для совместного использования Facebook и попробуйте опубликовать URL-адрес целевой страницы непосредственно на своем Facebook опубликовать снова.
В Twitter, используйте Twitter Карты. Чтобы использовать их, вы должны сначала зарегистрироваться с Twitter Рекламный аккаунт и введите номер кредитной карты (хотя с вас не будет взиматься плата, если вы не выберете показ рекламы). Как только у вас будет Twitter В аккаунте Ads перейдите в Креативы> Карты> Создать карту> Карточка веб-сайта. Загрузите свое изображение и создайте свой твит. Публикуйте сразу или запланируйте на будущее. Наконечник: Убедитесь, что флажок “Только продвигаемые” снят. В противном случае он не будет опубликован (если вы не заплатите).
В Instagram разочаровывает отсутствие интерактивных вещей. Лучший инструмент, который я нашел для щелчка изображений (вроде), – это Smart.bio для Tailwind,
Вам также может понравиться:
Как начать бизнес в Интернете: недорогой контрольный список
Советы по использованию изображений на вашем сайте
