Растровые изображения CSS (CSS Image Map), Redux

Перейти к примеру

 

Я получил ряд писем после публикации моего первого дубля / эксперимента по растровым изображениям CSS. Обратная связь была и хорошо воспринята, и также раскритикована. Как вы можете себе представить - на основе метода "графики спрайтовой", используемого для первого дубля, - много обратной связи центрировалось вокруг использования этого спрайта, так сказать. В то время как растровые изображения CSS были полезны в теории, создание пакетированных копий одного и того же изображения в Photoshop (или графический инструмент выбора) не выглядит как идеальный способ решения вопроса.

Поэтому... Я вернулся к чертежной доске, и придумал другое решение, которое требует одного изображения, немного CSS, и немножко творчества! Второй пример делает использование прозрачных изображений (изображений PNG), чтобы указать аннотацию на изображении. Большая часть же CSS из первого примера была использована, с незначительными изменениями. Ниже приведен пример старого против нового:

Был опубликован обновленный учебник по растровым изображениям CSS3. Если вы ищете версию более современную, которая использует некоторые прикольные функции CSS3, вы можете проверить растровые изображения CSS3

 

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%;
}
 

CSS (Доработанный):

 
dd#oceanDef{ top: 165px; left: 63px; }
dd#oceanDef a{ position: absolute; width: 205px; height: 70px; text-decoration: none; border: 1px solid #FFFCE6; 
   background: transparent url(note.png) repeat; }
dd#oceanDef a span{ display: none; }
dd#oceanDef a:hover{ background: transparent url(hover.png) repeat; border: 1px solid #BCBCBC; }
dd#oceanDef 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: 75%;
 }
 

HTML:

 
        
<dl id="lalaLandMap">
  <dt class="title">Manhattan Beach, California</dt>
  <dt id="homes">1. Beautiful Homes</dt>
  <dd id="homesDef"><a href="#"><span>How I would love an ocean-front property -- in LA!</span></a></dd>
  <dt id="baywatch">2. Baywatch!</dt>
  <dd id="baywatchDef"><a href="#"><span>Is that Hasselhoff?</span></a></dd>
  <dt id="ocean">3. Ocean</dt>
  <dd id="oceanDef"><a href="#"><span>This is the life...</span></a></dd>
</dl>

Рабочий пример можно посмотреть здесь (изображение ниже было снято во время моей поездки в Лос-Анджелес (какой удивительный город!):

Реклама Beach, California

Опять же, в то время как это не может быть наиболее «идеальным» решением в принципе, оно, безусловно, расширяет возможности предыдущего метода сшивания / укладки нескольких копий одного и того же изображения вместе. Единственный минус, что я столкнулся с этим методом в моем использования файлов PNG для аннотаций пленок. Как вы можете или можете не знать, поддержка IE для прозрачных изображений довольно неясная. Я попытался с помощью взломщика фильтра IE PNG Кэмерон Адама, но по какой-то странной причине я не могу получить IE для правильного отображения прозрачности. Если вы хотите принять удар на него, пожалуйста, не стесняйтесь захватить код и рубить ... Я хотел бы услышать о ваших успехах! Этот фильтр я попытался применить в CSS:

        
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='hover.png',sizingMethod='scale');

Если у вас есть какие-либо вопросы, замечания и / или предложения по улучшению, пожалуйста, не стесняйтесь, присылайте мне письмо: frankmanno [-at-] gmail [-dot-] com или оставляйте комментарии в моем блоге.

Примеры были успешно испытаны в Safari и Firefox (Mac / Win). Если вы в состоянии проверить это в других браузерах, пожалуйста, пришлите мне заметки, и я буду обновлять листинг.

 

Оригинал статьи на английском смотрите здесь