Як зрабіць карцінку ў малюнку спасылкай? Як ўставіць спасылку ў карцінку

Ствараючы банэры і карты сайта, пачаткоўцы вэб-майстры сутыкаюцца з такой праблемай, як ўставіць спасылку ў карцінку, зрабіць з яе дапамогай меню ярчэй і цікавей. Але як гэта ажыццявіць? Няма нічога прасцей, калі ведаць мову HTML.

Давайце ж высветлім, як можна ўвасобіць у рэальнасць дадзеную задуму. У нашым артыкуле мы прапануем вам два варыянты вырашэння праблемы. Адзін даволі рэдка ўжываецца з прычыны таго, што займае шмат часу і сіл, другі ж лічыцца агульнавядомым. Мы з вамі разбяром абодва спосабу.

Дзе выкарыстоўваецца Малюнак-спасылка

Перш чым казаць пра тое, як зрабіць карцінку ў малюнку спасылкай, разбярэмся, дзе і для чаго яны выкарыстоўваюцца. Бо так будзе прасцей зразумець, чаго ж мы хочам ад малюнка.

Малюнкі-спасылкі звычайна выкарыстоўваюцца ў якасці банэраў, зазываюць рэкламных малюнкаў. Прыкладам гэтага могуць служыць выявы усё ў тым жа "Укантакце". Узгадайце, колькі разоў вам даводзілася націскаць на фотаздымак, у якую быў убудаваны той ці іншы адрас? Акрамя таго, даволі часта яны выкарыстоўваюцца ў выглядзе меню груп і супольнасцяў, асабліва калі ўтрымліваюць спецыяльныя запісы. Нямала такіх малюнкаў сустракаецца і на іншых сайтах.

Вставляем спасылку ў карцінку

Найбольш простая рэч - Малюнак-спасылка. Менавіта пра яе мы пагаворым для пачатку. Такая ілюстрацыя з'яўляецца гатовай спасылкай. Гэта значыць націснуўшы на такі малюнак, вы будзеце перанакіраваны на новую старонку.

Калі вы ведаеце, як менавіта задаецца звычайная спасылка пры дапамозе HTML-разметкі, то праблем у вас узнікнуць не павінна. Адзінае адрозненне ў тым, што замест тэксту спасылкі задаецца малюнак.

Такім чынам, каб ажыццявіць задуманае, вам спатрэбіцца сама карцінка, загружаная ў інтэрнэт ці ж якая знаходзіцца на вашым кампутары (у залежнасці ад таго, ці будзеце вы працаваць у онлайн-рэжыме, уласна на сайце, або задзейнічаеце рэдактары).

Шукаем адрас малюнка, запісваем яго, каб не забыцца. Таксама фіксуем спасылку, якую павінна адкрываць дадзеная фатаграфія.

Далей пішам наступнае: карцінка - спецыяльны код . Малюнак-спасылка задаецца менавіта з яго дапамогай.

Такім чынам, мы прапісваем спасылку, якая адлюстроўваецца ў выглядзе ілюстрацыі. Даволі лёгка і проста. Але гэта падыдзе толькі ў тым выпадку, калі вы лічыце, што на ёй павінна быць усяго толькі адна спасылка. А што, калі іх павінна быць некалькі? Тады пераходзім да астатніх варыянтах.

Робім меню з карцінкі

Першы з метадаў быў распрацаваны самастойна падчас вывучэння мовы разметкі вэб-старонак. Стварэнне такога меню можа заняць пару гадзін.

Дадзены метад падыдзе тым, хто любіць важдацца з рознымі рэдактарамі, так як ён даволі працаёмкі і займае трохі больш часу, чым стварэнне меню або карты другім спосабам. Складаецца ён у тым, што бярэцца карцінка, якая разразаецца на некалькі палосак або квадратаў. Кожны малюнак падпісваецца, і на яго аснове ствараецца спасылка, як было апісана вышэй. Далей у кодзе старонкі прапісваюцца тэгі ў патрэбным парадку. Вось і ўсё, пытанне аб тым, як зрабіць карцінку ў малюнку спасылкай, практычна вырашана. Але не забываемся пра другім варыянце.

Ён заключаецца ў тым, каб зрабіць меню з удзелам усяго аднаго малюначка, задаўшы для кожнай зоны ілюстрацыі сваю спасылку. Не палохайцеся, нічога архіскладаных ў гэтым няма. А цяпер пра ўсё па парадку.

Як зрабіць

Разбяром ледзь падрабязней першы спосаб.

Пачнем з таго, што вам спатрэбіцца веданне графічных рэдактараў і HTML. Як карцінку зрабіць спасылкай, падкажа менавіта гэты від разметкі старонак.

Такім чынам, калі вы вырашылі пайсці менавіта такім шляхам, вам спатрэбіцца малюнак і прасценькі графічны рэдактар, які дазваляе рэзаць малюнкі і наносіць на іх надпісы, а таксама месца, куды вы зможаце заліць іх.

Калі гэта ваш уласны сайт - падыдзе звычайная галерэя ці бібліятэка файлаў, для "Укантакце" гэта можа быць альбом групы або супольнасці (пажадана закрыты).

Далей варта разрэзаць малюнак на часткі, пры гэтым абавязкова запомніце парадак, у якім ідуць атрыманыя часткі. Прастаўляем на іх надпісы і заліваем на сервер, запісваем спасылкі на кожную ілюстрацыю.

Бярэм код, паказаны вышэй, і падстаўляем туды патрэбныя дадзеныя. Затым заліваем карцінкі на сайт менавіта ў тым парадку, у якім яны павінны ісці. Пры гэтым, калі вы разрэзалі яе на палоскі, то вам трэба кожную спасылку задаваць з новага радка, а вось калі вы падзялілі фотаздымкаў на квадраты, то трэба ставіць у радку столькі спасылак, колькі атрымалася квадратаў.

Робім карту сайта

Такім чынам, калі вас не задавальняе першы варыянт, і вы хочаце даведацца, як зрабіць карцінку ў малюнку спасылкай іншым спосабам, то можам прапанаваць вам распрацаваць карту спасылак. Робіцца яна лягчэй, вось толькі магу паўстаць праблемы з заданнем параметраў. Чаму, зразумееце далей.

У першую чаргу варта запомніць, што карта сайта падключаецца да выявы пры дапамозе каманды usemap = "# map1, якая прапісваецца у тэгу img. Таму, заліваючы карцінку на сайт, абавязкова дапішыце у тэгу другую частку - usemap =" # назва карты ".

Далейшая разметка карцінкі на зоны, да якіх прымацаваныя спасылкі, робіцца пры дапамозе парнага тэга

Адзначым, што пры выкарыстанні дадзенага выгляду стварэння карты варта задаваць не толькі спасылкі, але і вобласці іх дзеянні і каардынаты. Далей мы разбяром асноўныя параметры, якімі валодае дадзены тэг.

параметры спасылкі

Такім чынам, у вас перад вачыма гатовая ілюстрацыя-спасылка. HTML дазваляе значна палепшыць функцыянальнасць дадзенага малюнка - вылучыць на ёй пэўную вобласць для спасылкі. Усё гэта задаецца з дапамогай спецыяльных параметраў, пра якія зараз і пойдзе гаворка.

Пагаворым трохі аб асноўных параметрах парнага тэга

Далей ўнутры парнага тэга

Самы першы - shape. З яго дапамогай вэб-майстар задае выгляд вобласці. Гэта можа быць:

• акружнасць - circle;
• прастакутнік - rect;
• шматкутнік - poly;
• астатняя вобласць карцінкі - default.

Наступны - coords. З яго дапамогай задаюцца каардынаты вобласці ў пікселях. Пачатак адліку ў дадзенай сістэме каардынатаў - верхні левы кут. Вось тут-то і складаецца асноўная праблема - не так-то лёгка задаваць каардынаты пасродкам пікселяў, асабліва калі адсутнічае знаёмства з кампутарнай графікай.

Нагадаем таксама даволі вядомы href, які задае адрас спасылкі.

І апошні параметр, які варта згадаць, - nohref. Ён паказвае, што паказаная вобласць не з'яўляецца спасылкай.

Вядома, гэта далёка не поўны пералік параметраў, якія можна задаваць малюнку-спасылцы або карце. Але ў той жа час яго хопіць для таго, каб стварыць яркую і маляўнічую спасылку або нават цэлую іх сістэму.

парады

Які б спосаб для стварэння спасылкі-карцінкі вы не абралі, галоўнае, каб зыходны малюнак было добрым. Старайцеся выбіраць тыя малюнкі, якія не кідаюцца ў вочы, не раздражняюць яркімі кветкамі або ўзорамі. Асабліва гэта важна для карты сайта. Вы можаце зрабіць калаж з некалькіх фотаздымкаў, прыцьміць іх ці ж ўключыць адзін з фільтраў у любым графічным рэдактары.

Пры стварэнні карты сайта рэкамендуецца выбіраць выявы з мяккімі, ня раздражняльнымі вочы ўзорамі. Паверце, не заўсёды заклад поспеху - яркая карцінка -ссылка. "Укантакце", праўда, часцяком робяць упор менавіта на яркасць і кідкасць, з мэтай прыцягнення новых наведвальнікаў.

высновы

Падвядзем вынікі. Мы з вамі разабраліся, як зрабіць карцінку ў малюнку спасылкай, прычым разгледзелі два спосабу, якія можна аднолькава паспяхова выкарыстоўваць для стварэння меню рознай ступені складанасці. Акрамя таго, мы разабраліся, як задаць карцінку-спасылку, а таксама даведаліся аб асноўных параметрах, якія дазваляюць стварыць досыць утульнай карту сайта, групы або супольнасці.