Тези карти за CSS, проблеми и решения в уеб-дизайн

Първи стъпки

Например, вземете една карта на неизвестно страна :) Когато задържите курсора на мишката върху един от районите, трябва да се промени цвета си и се появи кратко описание по-долу на картата.

Всички проблеми, за кратко ще се описват и се произнасят по всеки курс на възникването им. Най-нетърпеливите могат да видят окончателния вариант на това, което направих.

Така че, в продължение на една нужда фоново изображение, с някои чертежи, за да изтеглите цялата карта наведнъж и да се избегне ефекта на мига фон, когато мишката. Например, такъв (в редуцирана форма):

изпълнение

Цялата карта ще се основава на няколко CSS-принцип: абсолютното положение на елементите, да промените фоновото изображение, когато мишката върху и да промените видимостта на дисплея.

Структурата на картата на изображението може да се строи с помощта неподреден списък

или списък с определения

. Например, аз избрах първото.

Първо, създаване на контейнер за картата и посоча основните му функции:

Сега аз обясня. В списъка с настройки по подразбиране изчисти тире (със сигурност по-добре да се откажа през reset.css или универсален селектор *. Но след това, за по-голяма яснота), "премахване" се появява в IE 6 над елементите на картата списък

и да се скрият използване дисплей: няма справка. Все още се обърне внимание на ширината . тя съдържа по-малко от ширината на картата (

), Тъй като тя вече разполага с пълнеж вата.

Тук, ширина и височина са равни на референтния размер на фоновото изображение за този линк. от

определено позициониране относително. всички елементи от списъка, ще останат в контейнера. Поставете лявата и горната част са проектирани така, че цветен вариант на изображението съвпада със сив фон.

След това всичко е просто, когато мишката върху фоновото изображение и е направена препратка заместител вижда през CSS:

Сега, когато мишката върху картата подчерта oblat желания. Остава само да се покаже на описанието за всяка връзка. Отново, това ще ни помогне абсолютно позициониране и отрицателен марж. за да се появи описание на границите на родителския контейнер (в моя случай - единица с картата).

Писане CSS за всички :

И тогава ние се създаде някои връзки:

Всички настройки трябва да се повтори за другите пет връзки, изчисляването поотделно за всеки абсолютен позицията си в една карта и местоположение на тапета на заден план. В действителност това не е толкова дълго, колкото изглежда, аз го взех само за половин час. Vyschitavat лесният позиция на екрана в Photoshop, чрез линии (Ctrl + R) и водачите (CTRL + Н), и след това се коригира за няколко пиксела грешки "на живо".

работещ код

Тогава аз дам един пример за моя код напълно (XHTML):

Позволете ми да ви напомня, че работи пример може да се види тук. И все пак това може да бъде изтеглен в архива. за себе си, за да се разбере.

Доводи за и против

Какво толкова има повече, отколкото е в действителност зависи от вас. Аз ще изброя някои от спорните и достойни моменти в моето мнение.

къде да се приложат

Това решение е идеално за картата на реализация, за да стане по-динамична и потребителското благоприятен, с много съвети и обяснения. Също така за компании, които имат клонове в различни страни (защо не и вратовръзка на картата на света) или региони, и искате да спестите пари за създаване на Flash филми.

Освен това, можете да използвате хумор, за да колективни снимки да покаже, изрази или мисли за физически лица, както и в комиксите.

Примери създадете различни зашеметяващи графични карти с CSS могат да се видят на cssplay.co.uk.

Скенер блогове:

Друг въпрос. Изработен меню например, тази карта (благодаря за разбираемо обяснение, нямаше да се случи без него!). michelberger.narod.ru. Проблемът е, че дясното меню "статия" в fayrfoks защо нещо не се покрива и връзката не се възприема. В IE6 всичко е в ред. Никога няма да разбера каква е причината, има по този начин и че се опитва да се промени кода. Може би някой може да помогне?

"Реших," проблема, ако можете да го, че е създал кода копира в друг код блокови статии обади. Доста глупаво решение, което аз не разбирам, защото от това, което работи.

Стари, чист код остана на michelberger.narod.ru/index6.html страница. ако имате време и желание - погледнете, ако обичате. Много интересно, защо тя не работи, поради което има такава разлика между разбирането за IE и FF.

Всичко, съжалявам за глупавият въпрос, той се обърна да се справи с проблема, тъй като това е срам да си го призная - проблемът е над конзолата.

Затова искам да се извиня и да кажа благодаря ви отново за такова красиво решение на картата на менюто, това е точно това, което търсех за дълго време и не се очаква да се намери. Благодаря Ви много.

Благодаря случило. Много е нужен! Много полезна, благодаря ви. Имам един въпрос, можете да ядете тази промяна, моля помогнете как да направите нещо, за да добавите отстъп на снимката се вмени не от по-горе, но от по-долу, защото смених съдържанието и прави изображението отлети, когато промените размера на съдържанието на страницата. Карта намира под съдържанието.

Идеята е, че съдържанието не трябва по никакъв начин да повлияе на елементите на картата, тъй като тя е в отделен контейнер. Прегледайте оформление.

В настоящия пример, нищо не пречи да се опитате да преброите координатите по-долу:

вместо отгоре: XX пиксела; напиши надолу: XX пиксела; ,