Зображення CSS карти

2015-12-03 08:03:07 / author: sharkov views 2042Total views: 2042 / 5Views for 7 days: 5
Thanks to Best cliparts
source article: http://www.frankmanno.com/ideas/css-imagemap/

Зображення CSS картиНижче наведено приклад карти зображення, який побудований повністю з використанням CSS і XHTML. А я додав підтримку JavaScript (пункт титули просто відображаються під зображенням), я відключив його в даному прикладі -- я завжди невелика проблема, коли включений на JS і CSS відключений (подробиці нижче).

Первісна ідея цього заходу стала запис у блозі я читала у Джини Trappini блог, Scribbling.net. Її приклад був молодець, але я хотів спробувати повторити їх (або схожі) з використанням тільки CSS.

Я тут знайшла посилання на сайт щодня Kryogenix (через Джини пост), що призвело до зображення карти, які використовував більш легкі DHTML і використовував тегдля відображення нотатки про точку бездротового доступу. Все-таки, кілька утриманців на JavaScript або DHTML.

Зрештою, я вирішив скористатися дуга Боумана розсувних дверей техніки в поєднанні зі списку визначень (

).

Розсувні двері техніка дозволяє утримувати всі ваші зображення ролловер ефектів в одному файлі зображення і фон-позиції властивості CSS "зсув" зображення в будь-якому напрямку. Додавши :Hover ефект для вашої CSS (в даному випадку тег , що міститься втег), ви можете перемістити зображення в потрібне положення.

Що я зробила було побудувати карту зображення в Photoshop. Як ви можете бачити на зображенні, карта складається з 3 копій одного зображення з різними маркуваннями. Топ (1 з 3) позначає гарячі точки з цифрами, а по середині і знизу зображення (2 і 3 3) кожен містять динамічні ефекти (білий прозорий). Ви можете бути здивовані, чому пролонгації ефекту поділяється на два окремих зображення. Причиною поділу є у зв'язку з перекриттям в суміжних елементів (тобто: монітор, ноутбук і дискети на столі). Замість того, зіткнення між двома об'єктами, перекидання ефекти для сусідніх предметів були розділені на кілька копій одного зображення.

По суті, спосіб, яким це працює, помістивши назва пункту точки доступу у визначення-термін тег ) з вашого списку, з подальшим описом визначення-опис тега (). В CSS приховує визначення-термін (який дійсно використовується у випадку, коли в CSS відключена), а також визначення-опис (відображається при наведенні якоря) і відображає визначення Опис (В даному випадку опис экорегиона(и) ви вибрали для вашого сенсорного зображення), і зовсім позиції і відображає опис при прокатці через точку доступу (також визначена CSS).

В Кодексі також погіршує витончено. тег, який відображає несопоставленние варіант зображення карти, прихований за допомогою CSS. Для тих, у кого УСБ відключені, підключений версію зображення (3-х частин зображення) не відображаються, оскільки вона є частиною фонових властивостей CSS. Швидше несопоставленние версія буде відображати, поряд з нестилизованный список визначень. Якщо у вас є веб-розробнику розширення для браузерів Firefox, йти вперед і відключити стилі. Ви отримаєте більш повне уявлення про degredation.

Альтернатива зображення-тільки CSS карти були опубліковані. Якщо ви шукаєте більш простий спосіб створення карт зображень з участю одного зображення, ви можете бути зацікавлені в читанні CSS-зображення карти, Редукс

Зразок коду відображається нижче (вид основи CSS і XHTML):

CSS:

Зображення CSS карти

HTML:

Зображення CSS карти

Робочий приклад можна подивитися нижче (картинка нижче взята з повсякденного Kryogenix):

Зображення CSS карти

1. Монітор Ось мій 17-дюймовий монітор. Хотів би я ІК!

2. Телефон Чи означає це річ ніколи перестають дзвонити?

3. PC Справа Це мій божевільний вікно Linux! Повинен любити, що Linux ...

4. IBM ThinkPad Ось мій блокнот Linux. Деякі божевільні кодування відбувається.

5. Зовнішній дисковод гнучких дисків Floppy Drive. Стародавній ... Я знаю!

Хоча це може не бути "ідеальним" рішенням, вона, безумовно, розширює наведені вище приклади. Я абсолютно любив Джина ідея, тому я спробувала її розкрити. На жаль, з поточного обмеження в CSS (а також деяких браузерів), я не зміг повністю відтворити точну функціональність Джини приклад.

Ось приклад, який використовує CSS і javascript. Одна проблема я зіштовхнувся-це коли УСБ відключена, але включена підтримка JavaScript. Щось дивне відбувається з допомогою визначення списку. Якщо ви знаєте, як це виправити, дайте мені знати. Я б з задоволенням, щоб змусити його працювати.

Мені вдалося натрапити на ще одну спробу на основі CSS карти зображення, яка виглядає дійсно здорово. На жаль, через обмеження в IE (конкретно тільки підтримка :Hover ефект на тег ), це не крос-браузер сумісний (поки!).

Якщо у вас виникли питання, зауваження та/або пропозиції щодо покращення, будь ласка, не соромтеся надсилати мені записку: frankmanno [- ] Gmail [крапка] com або залишити коментар на моєму блозі.

Приклади були успішно випробувані в Safari, Firefox (Мак/вин), ИЕ6/виграти, і опера 7.5/Мак. З якоїсь дивної причини, у версії JavaScript працює в режимі ie5/Mac, в той час як без використання JavaScript версії.

paper4pc
Add a comment:
Sign in

See also

Virtual Testbed

Віртуальны Выпрабавальны Стэнд

2015-11-02 16:28:04

Author of the original article Gerald Baumgartner Дадзены матэрыял з'яўляецца перакладам арыгінальнай артыкула "The Virtual Testbed" (аўтар Гэральд Баўмгартнер). Embedded-сістэм, паўсюднага,...

Код сайта корму

Код сайта корму

2015-11-02 16:37:20

Рэзюмэ Сайты наогул не ствараць RSS-каналы аўтаматычна. Існуюць розныя спосабы стварэння RSS-каналаў. Адзін з спосабаў-код RSS-канал ўручную. Стварыць RSS-канал файла. Код кіраўнікі аператары...

Plain Old Documentation for perl

Модуль PODs

2015-11-02 16:10:24

Дакументацыя для модулі Perl напісана простай мовай разметкі называецца POD (Plain Old Documentation). У гэтым раздзеле паказана, як напісаць модуль...

Stalling Wing Cross Sections

Одуговлачење Крила Сечений

2015-11-02 12:19:41

Рад је извршена Сзу-Цхуан Ванг. Овај рад је постала могућа захваљујући подршци ВАЗДУХОПЛОВСТВА управљања научних истраживања. Крило штанду Тезга-то је нежељено феномен,...

Art for designers dkcoin8.com (DesignerKit)