Original: http://www.frankmanno.com/ideas/css-imagemap/

Нижче наводиться карта зразок зображення, який

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

повністю побудований з використанням CSS і XHTML. У той час як я додав підтримку Javascript (назви пункту, просто відображається під зображенням), Я відключив його в цьому прикладі – я зіткнувся з трохи проблема, коли JS включений і CSS відключений (докладніше нижче).

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

Потім я знайшов посилання на сайт Daily Kryogenix (через пост Джини), яка привела до карти зображень, яка зробила використання легшого DHTML, і зробила використання тега <title>, щоб відобразити замітки про точку доступу. Проте, в деякій мірі залежить від JavaScript/DHTML.

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

Техніка розсувних дверей дозволяє утримувати всі ваші зображення перекидання ефекти в один файл зображення, і зробити використання background-position (позиції фону) CSS власності “зсуву” зображення в будь-якому напрямку. Додаючи: наведіть ефект на ваш CSS (в даному випадку тег <a>, що міститься в тезі <dd>), ви можете перемістити зображення в потрібне положення.

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

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

Код також деградує витончено. Тег <img>, який відображається не-зіставляються версію карти зображення, прихований за допомогою CSS. Для тих, у кого є CSS відключена, відображена версія зображення (3-х частини зображення) не відображається, так як вона є частиною власності фону CSS. Скоріше не відображена версія буде відображатися разом зі списком визначень без стилів. Якщо у вас є розширення Web Developer для Firefox, йти вперед і відключити стилі. Ви отримаєте більш повне уявлення про з деградацією.

Зразок коду наведено нижче (переглянути вихідний код для повного CSS і XHTML):

CSS:

dd#monitorDef{ top: 65px; left: 114px; }
dd#monitorDef a{ position: absolute; width: 73px; height: 69px; text-decoration: none; }
dd#monitorDef a span{ display: none; }
dd#monitorDef a:hover{ position: absolute; background: transparent url(office.jpg) -109px -317px no-repeat; top: -10px; left: -5px; }

dd#monitorDef a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: #F4F4F4;
 font-weight: bold;
 position: absolute;
 border: 1px solid #BCBCBC;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 250%;
}

HTML:

<dl id="officeMap">
 <dt id="monitor">1. Monitor</dt>
 <dd id="monitorDef"><a href="#"><span>Here's my 17" Monitor.  I wish I had an LCD!</span></a></dd>
 <dt id="phone">2. Phone</dt>
 <dd id="phoneDef"><a href="#"><span>Does this thing ever stop ringing?</span></a></dd>
 <dt id="case">3. PC Case</dt>
 <dd id="caseDef"><a href="#"><span>This is my crazy Linux box! Gotta love that Linux...</span></a></dd>
 <dt id="notebook">4. IBM ThinkPad</dt>
 <dd id="notebookDef"><a href="#"><span>Here's my Linux notebook.  Some crazy coding going on.</span></a></dd>
 <dt id="floppy">5. External Floppy Drive</dt>
 <dd id="floppyDef"><a href="#"><span>Floppy Drive.  Ancient... I know!</span></a></dd>
</dl>

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

 

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

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

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

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

Ці приклади були успішно протестовані в Safari, Firefox (Mac/Win), IE6/Win і Opera 7.5/Mac. З якоїсь причини, версія Javascript працює в IE5/Mac, в той час як версія без Javascript не робить.

Авторські права належать Френку Манно.

Copyright © 2004-2017 Frank Manno.