Мислех да направя тази публикация по-нататък, но тъй като ме помолиха да обясня как се прави, реших да е сега.
Та, за тези, които не знаят какво е sitemap, то най-лесно мога да го обясня така. Това е кодър, който ви е нужен, за да можете, когато поставите мишката на навигацията на дизайна ви (даденото изображение), да можете да кликнете на него и да отворите друга страница. Пример за това можете да видите в сайта ми - http://intoxicatingvampires.org (менюто News&Updates - The Show -The Books - Photogallery - Multimedia - Website).
Първо трябва да започнете със следния код.
<img src="<?php bloginfo('template_url'); ?>/header.png" width="1100" height="449" border="0" usemap="#header_Map">Отбелязаният линк в синьо е линка на логото. Него трябва да го смените с линк към вашето лого. След това са ширината (1100) и височината (449) на изображението в пиксели.
<map name="header_Map">
<area shape="rect" title="Име на страницата" coords="399,389,526,416" href=" Линк към страницата" />
</map>
border="0" показва, че няма да има рамка на изображението (обикновено се появява при Internet Explorer).
usemap="#header_Map" показва "картата", която ще бъде върху изображението.
А сега малко разяснения по самия код, който посочва къде точно се намира бутона. Ако имате повече от един бутон, който искате да напрвите, то трябва да копиране кода в наклонен шрифт толкова пъти, колкото ви е нужно.
shape="rect" показва, че бутонът ще бъде в правоъгълна форма.
title="Име на страницата" посочва текста, който ще се появи, когато сложите мишката върху бутона.
coords="399,389,526,416" е може би най-важното, от което се нуждаете. Цифрите (които ще ви покажа по-долу как да изчислите) показват от къде до къде ще бъде бутонът.
href=" Линк към страницата" посочва линкът, който ще се отвори, когато кликнете на бутона.
Как да изчислите координатите на бутона си?
Чувала съм, че има сайтове, които могат да го направят вместо вас, но не знам кои са точно и дали наистина вършат работа. Ако нямате Фотошоп или не ви се занимава толкова, можете да потърсите такива.
Аз ще обясня как сами да изчислите всичко.
Първо отворете логото във Фотошоп. След това изберете инструмента Rectangular Marquee Tool (за по-лесно можете да натиснете буквата М на клавиатурата си) -
Маркирайте бутона и натиснете Ctrl + T. Сега видате горе в дясно поле с 9 точки и координати за Х и У спрямо всяка точка.
След това отивате на тази, която е над черната на снимката по-горе (първият ред, по средата), и взимате цифрите от У и ги заместавте в вторите в кода (389).
Третите цифри взимате отново от Х като натиснете на дясната точка спрямо черната в средата и замествате третите цифри в кода (526).
И последните цифри, които са ви нужни, са като натиснете точката, която е под черната на изображението. От там взимате цифрите от У и ги замествате с последните в кода (416).
Имах и въпроси как да се постави този код в Blogger. Предполагам доста хора се чудят. Е, аз мислех, че е по един начин, но явно не се получава, така че трябва да поразуча как точно става и ще го публикувам в следващата публикация.
Надявам се този пост да ви е бил полезен. Ако имате въпроси и/или има нещо, което не сте разбрали, можете да питате в коментарите, в чат кутията или да ми пишете на e-mail.
Целувки!
ConversionConversion EmoticonEmoticon