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

2015-12-03 08:03:07 / author: sharkov views 1214Total views: 1214 / 1Views for 7 days: 1
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

Электрычнасць Падручнік

Электрычнасць Падручнік

2015-11-09 19:37:20

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

C++

Мова Програмування C++

2015-11-06 11:31:20

C++ - це мова програмування загального призначення з ухилом у бік системного програмування, який це краще С підтримує абстракції даних підтримує об'єктно-орієнтоване...

Šakutės-prisijunkite prie Plėtros Java™ SE

Šakutės-prisijunkite prie Plėtros Java™ SE

2015-11-09 15:37:23

Šakutės-Prisijunk kasdien, multi-core Java™ programas Šakojimasis arba skaidant darbo krūvį į keletą užduočių, lygiagrečiai perdirbti ir įstojimo į rezultatus, kartu yra...

НАВУКА ПАЛКА

Навуковая палка

2015-11-09 16:36:42

Архіў рэцэнзій на кнігі, слупкі і каментары Фрэда Борца Сардэчна запрашаем у мой архіў...