Автор урока Людмила Винокурова, проверено мной.

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

Зачем это делать? При нажатии на картинку, можно попасть на конкретную страницу (например, как здесь).

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

Для того чтобы сделать картинку ссылкой, понадобятся 2 другие ссылки: ссылка страницы, куда она будет перенаправлять и ссылка самой картинки.

1. Где взять ссылку страницы, на которую будет вести картинка? Для этого открываем нужную страницу и копируем ссылку из строки браузера.

Я решила, что это будет Профиль моего дневника:

ЛКМ кликаем один раз по верхней строке – то, что выделяется синим цветом, это и есть нужная нам ссылка (адрес страницы). Нажимаем Копировать, изменяется на Скопировано. Сохраняем её отдельным файлом в любом текстовом редакторе (я работаю в ворде).

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

Наверное, лучше работать в черновике, но картинка, которую я хочу сделать ссылкой, находится в уже опубликованном сообщении:

Нажимаем на неё ПКМ, выскакивает окно:

Из предложенных вариантов, что можно сделать с этой картинкой, выбираем: Копировать адрес изображения.

Вот это «безобразие» и есть адрес моей картинки:

https://www.liveinternet.ru/Dv1R48719/1202a5OO0/wO_zOYQdDaccrlAzjW1fgRSzE4Cw94iaiUo7vw1O5aON_BwMZCrGWUVxIWi2QNMq3OFz-Z8F06pTf8c60qiT0BiXoliMASzHIMp0n2Wh4x25N5NxEHcEwskDTrMtRqGDuY00VWFvqiRYQODw17W2pyUQ0gBaLI7ilmZeM3MJupzoS0rs8InB5zwSADfZZT-h-Y87UTBDAHY9PrarzTYxB0G5uLH1nz9UPCSIpcc18r-tTNooLohmpnqu1tszJWrIpJsuSPTNIXcsOgwD2b3jiZHThxm8HwwypR7qjwX2vRstfeChjdNPOBTAdMUzhVJbLZSSyCaY7sI6chq3G902bKjrvhjgaXXPaMo4U1Exe3HNF_PZgEtkqvU2Sg-dln0_XfFwwXF3U3TMJDQ5ay2y47XMxkzGnAamfibCM0cN9pAo13ZIeOHpW5RuTKcBRfN9QZPT6QiHHCbNviLLqcp1n42BbCVBu0vAnIgUwY-ZTv8RIKIgQkSq0qIWFhsPsdpYUAs2vNyNgUOcsijHFSk7rWlPE024w6Be2QaeRyH2MRup-QzNQfc_VEQYWLE35WorvZhy_KbclnYqdobTT-UCJIDfuizoCb2XnILAfzmJbwkRa9-RpGskpq1SOucVGmEXIdnIDRV3y8QExCChcy3G10E43gh-eBLGqmIWP8-BUjA0w_ok9MkNU4w2AFspRW_RCaM_mRzzDALR5mq_qXqZDyE9wEX1wyskPFQYqZvxfuNtmCaUKpCihv4KMns3fW7UtA96NJjlFb_QPrRTPTW3XekrDxWQ-5AmmZZSF00WpWtJhRRJ3acv0HQ8fKWP_S477YyCiC4Mpk4ivtrXL212PMQDTnDcibmf3BJ880GFQxHNp2-ZuFdwUjk-Nmcpdn2jzeW0WdUjQwzcDDTdE61WdylgrkxeUCIyIuZaRw_h1iAoZ8qkZLEds-wGiKNd-dP9_UMXsSRjtArRdhbfOQYdL-E5YH3lpytIrCDAVYvpMlPBRCKgduAiWgaaxlsbVXaE-M-uNNRlOV9Q0iw7-Q2z_d2XP5U8eyBaLXZCE8WKmRfJCaj5ncvPxBTwmJHHYWpHwTB2zCak4kLi-qpHyyEeyFSfijAomeVPpO5wS01pLzVRr2_hAJM0sknmOg9NWpl7PUWUyZXjz1BIhNS5z4EGw4UouoA2bCouPmLSQ9t1ZhQAz1rMdA1hZzAC3EchLXMBhdsPzczvdHYNfs6fxV59I021bMHtr7PALDR8nRuFNg-tPNpAwoCW4hombjtHcRZIKBPOQIAJgSNUosC3IUEjQRkTu7HIg7jWSequs6mShStBzfgR-eP_GACElL2bQaa_kTjeHPL4stp2flIXh0XWEDDHdqyUkQWjjLbwa4XtB_GBL9eFCGsYqvVWHiddfh2z4TUANcGz31zcLPw1hwGiiwUsrqSqGAp6ojIyn8uhllis67rUhOEtM6jOVEtJBQNNJWv_dViHLJLRmvIj6Y7p8ylJZLXJmzMIwEDAiQPtNoctSEIg2mQiIspKjuPDcXZINB-6yCBpcUMoTthr8ZFTpelvR53Qcxw6xX6uO4E-7bMFTfx9affvPFxQABVroV4HbVjaXNpE0mo-rla3n7FWnOgTKlRwHeHjzLZI56kN26WtT9fZ6N8owvHOxs_Foql3IWV41W2rp3wMPKyBl7nyr60kytxSgNJa5rpCXx-J9rAs92ZgtDllWySS3MtRRSOZcTsHPbhrIJbJziaP2aKd96lFgBXlE898JDBcvfdhateBSEYkmlgu2nZ-PiPDtdqUYGve3GRpQdMUErTzWZFrtclvP11AZ5CiIeJCL9UmLf-ptSzBiWMTTHQ8AMEfwSq7zdS2VJ4kBo6-Zp5vW6HiyNzXNvj48b13pF60X7Fxz0EB08MdMAfYogGO2ktpopGfYe3klf2n91RcyFTlszUi64WMmkj-QHridgIid6cpwrxwa1Y4NPmJ01w-4NtRzUdZLYcD-ZBv6IYtYk6j0Q4pG1n55E0525-omAw8abc9RnfR7DZANnSOws6mmrNHfX6Q3B_iwBjpad8cLjwvle1TfZmnT91kc3g-DU5mk4WO7XdZgYi11f-fTJiYEGWbzQ4zyTxSCMLsDuqGSq6nK3kGVGhXTjT4dbFvXBr436kV36mlu0_FZM-wIl2-ugc9OrEbUUn0fYl3T4xYmFxFj0Fyp1GURhSmAGamfh5qu_tFwiw8v9YUJI2R86g68K8hLd9R0Yd_BVBrKBLJylbTxTLl9ymBqJnpE19UyMzAVb-FdrMRvCo40tCyKrY-HrtHYQbsDAP2dPTN7fu4VsR3cenjAdGbSwmYZ4CqLf5q0222OS_J9TA9fbc3rPCg0CXTdQ5ThUDaeC7ICt7K_pZfR_FSGET_arB8YbnDxLZQU_m1R7X5X3ex7DfoDtlS_rcxpnm3mQk41YHrZ0isKHzpB0HWw2kghpxWWIamioaeI6-h6hDAgw4UEHHho5ge4Psx5X9BeeOTxeyDrJrNAtKbTU5hI8HlqJlF79MYyAiA0echCq-lFFIQYhhy1jaqBifTbVa8QI9KFKAhAXOsonBztZkH9f1fy0kEl7ROGVpa541CATNlBXQtEXdLNATw9KXnobIrYYzOEFbocoKWhkpjs4m6GOCXhizcDYXrMOI8BxGJu31BRxMxwINsLsVWJgetkinPPfFEtfHrm1Q0hBTJ-zlKq5mUElwqwJbeinK6H1slWgDol_LMsAn1l5i-7HsNKT8p4SP7QWgLmNLJcp4b2YLti00RtDX5Wz8kMMCoBRP9yktJKKKsQmwe0vYyniO_eWLgKBt25FipkaM4EvDHCW03sWFbR5VQAxTSkW7CP0G-4bfBmSgFHccfeDTAXEW3NQ6rqYgm-HLQBj4epiofv-H-RERzisyY9clHxIK820l97_2FE4-9THv81gmKVs8dVpE74TUoPXHvH9w0SHjtN23C281YcvjCjBoO-j4mo6NBWrCMV0745Pn9NzzODM8pfc_xna9jxdwz7LKljmrHnb4tG0w#DSD

Многовато, но сохраняю его в тот же файл, что и первую ссылку.

Кстати, через Исследовать элемент, адрес меньше не стал:

3. Теперь надо создать html-код этой картинки-ссылки и поместить его в сообщение.

Образец-заготовка, который используется, чтобы сделать свою картинку-ссылку:

<pstyle="text-align:center"><ahref= "http://inetnovichok.ru/ne-propustite/ "target="_blank"><img src= "http://inetnovichok.ru/wp-content/uploads/2012/11/podarki-top.jpg"  title="Подарки" width=147 height=147 ></a></p>

Давайте разберём этот код, чтобы было понятно «ху есть ху» и можно было легко подставить свои данные:

<p style=»text-align:center»> – выравнивает картинку по центру.

Можно здесь ничего не менять. Но если надо, чтобы картинка была слева, то вместо center пишем left, а если справа – right.

Моя картинка будет в тексте, поэтому эта часть не нужна.

«http://inetnovichok.ru/ne-propustite/» – вместо этого вставляете свою ссылку на страницу, на которую картинка будет отправлять. В моём случае это адрес Профиля.

Обратите внимание: ссылка берётся в кавычки. Тогда эта часть html-кода картинки-ссылки, с учётом моих данных, выглядит так: «https://liveinternet.ru/users/7310036/profile»

target=»_blank» – страница (та, на которую переходим) откроется в новом окне. Если надо, чтобы страница открывалась в рабочем окне, то можно убрать эту часть кода. Кстати я эту часть не прописывала – она вставилась сама.

«http://inetnovichok.ru/wp-content/uploads/2012/11/podarki-top.jpg» – вместо этой части надо вставить свою ссылку на картинку, т. е. то «безобразие».

Не забываем, что ссылка пишется в кавычках.

Следующие части пока вставлять не буду – пойдут на дальнейшее изучение:

title=«Подарки» – заголовок картинки, при наведении на картинку, этот заголовок будет всплывать. Название заголовка — в кавычках.

width=147 height=147 – это размеры картинки: width — ширина, height — высота. Их можно изменять.

Итак, код собран. Вот так он выглядит (естественно без выделения цветом):

<a href="https://liveinternet.ru/users/7310036/profile" target="_blank"> <img src="https://liveinternet.ru/h1q5I7823/45f6675d65/XjsBG...y5UP14bM5G5K4qeWaRGg#DSD" /></a></p>

Теперь его надо вставить в текст сообщения.

Сначала совершаем обычные действия.

Открываем сообщение, в которое нужно вставить картинку-ссылку и выбираем редактировать (стрелка 1, второй скрин).

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

 

Нажимает кнопку Источник, ищем нужное место и вставляем созданный html-код.

Снова нажимает Источник, и естественно, Сохранить изменения.

В готовом сообщении появилась картинка-ссылка (при необходимости надо обновить страницу).

При желании под картинкой-ссылкой можно сделать ещё и активную текстовую ссылку, ведущую туда же.

ОТЛИЧНО, теперь я знаю как поставить картинку-ссылку в любое место своего сообщения с помощью html-кодов (в теории, это можно сделать везде, где есть редактор, поддерживающий html-коды).

НО ОКАЗЫВАЕТСЯ — ЕСТЬ СПОСОБ ПРОЩЕ И БЫСТРЕЕ.

Серия сообщений "- ссылки":
Часть 1 - СОЗДАЁМ ССЫЛКИ (ТЕКСТОВЫЕ)
Часть 2 - КАК СДЕЛАТЬ ССЫЛКУ С НАЗВАНИЕМ И ССЫЛКУ НА НИК С ИСПОЛЬЗОВАНИЕМ СПЕЦКОДОВ
Часть 3 - ДЕЛАЕМ КАРТИНКУ ССЫЛКОЙ
Часть 4 - ПРО "НЕЖИВЫЕ" ССЫЛКИ

Серия сообщений "- спецкоды":
Часть 1 - КАК СДЕЛАТЬ ССЫЛКУ С НАЗВАНИЕМ И ССЫЛКУ НА НИК С ИСПОЛЬЗОВАНИЕМ СПЕЦКОДОВ
Часть 2 - ДЕЛАЕМ КАРТИНКУ ССЫЛКОЙ