CSS3 Карты изображений

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

Изображение карты Это было больше, чем семь лет с того момента как я впервые опубликовал мой CSS Карты изображений статью/учебник. Я получил множество писем от людей, благодаривших меня за показ как это делается, я думал, как обновить его, чтобы сделать его более актуальным для CSS возможностей современных браузеров сегодня.

Сегодняшнее решение требует меньше кода, не нуждается в картинках (кроме той, которую вы используете для карты, без сомнения) и предлагает некоторые интересные наброски CSS3 переходов, в том числе выцветание и анимацию как "Информационный пузырь", парящий над аннотированный область изображения.

Я взял существующий CSS, очистил его, чтобы сделать его немного более модульным (и менее сухим) и, как всегда, предоставил рабочий пример . Ниже необходимый код, чтобы создать свой собственный образ CSS3 карты изображений:

Реклама

HTML:

        
            <dl id="inTheStudioMap">
            <dt class="title">In The Studio...</dt>
            <dt id="screen">1. Screen</dt>
            <dd id="screenDef"><a href="#"><span>Ableton, FTW!</span></a></dd>
            <dt id="synth">2. Virus TI</dt>
            <dd id="synthDef"><a href="#"><span>Sweet sounds from the Virus</span></a></dd>
            <dt id="snacks">3. Snacks</dt>
            <dd id="snacksDef"><a href="#"><span>Mmmmm, snacks.</span></a></dd>
          </dl>
          
         
    

CSS:

        
            /* image map container (and actual image) */
            dl#inTheStudioMap{
              margin: 0;
              padding: 0;
              background: transparent url(studio.jpg) top left no-repeat;
              height: 299px;
              width: 400px;
              position: relative;
                box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5 );
                border: 5px solid #fff;
            }

            dd a{
                position: absolute;
                outline: none;
                text-decoration: none;
                border: 1px solid #FFFCE6;
                background: rgba( 255, 255, 191, 0.4 );
                text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.9 );

              -webkit-transition: background 1s ease-in-out, border 1s ease-in-out;
              -moz-transition: background 1s ease-in-out, border 1s ease-in-out;
              -o-transition: background 1s ease-in-out, border 1s ease-in-out;
              -ms-transition: background 1s ease-in-out, border 1s ease-in-out;
              transition: background 1s ease-in-out, border 1s ease-in-out;
            }

            dd a:hover{
                background: rgba( 255, 255, 255, 0 );
                border: 1px solid transparent;
            }

            dd a:active{
                outline: none;
                -moz-outline: none;
            }

            dd a span{
                opacity: 0;
                visibility: hidden;
                position: absolute;
                left: -1px;
                top: 0;
                height: 20px;
                line-height: 20px;
                text-indent: 0;
                vertical-align: top;
                background-color: #F4F4F4;
                font-weight: bold;
                color: #333;
                border: 1px solid #F4F4F4;
                margin: 0;
                padding: 5px;
                white-space: nowrap;
                box-shadow: 0 0px 5px rgba( 0, 0, 0, 0.5 );

              -webkit-transition: all 1s ease-in-out;
              -moz-transition: all 1s ease-in-out;
              -o-transition: all 1s ease-in-out;
              -ms-transition: all 1s ease-in-out;
              transition: all 1s ease-in-out;
            }

            dd a span:after{
                border: 10px solid #F4F4F4;
                width: 0;
                height: 0;
                content: '';
                position: absolute;
                border-color: #F4F4F4 transparent transparent;
                left: 5px;
                bottom: -21px;
                opacity: 1;
            }

            dd a:hover span, dd a:focus span{
                visibility: visible;
                opacity: 1;   
                top: -45px;
            }

            /***
             * Hotspot Positions
             * - replace with location to your annotations
             ***/
            dd#screenDef {
                top: 77px;
                left: 120px;
            }

            dd#screenDef a {
                width: 115px;
                height: 80px;
            }

            dd#synthDef {
                top: 180px;
                left: 225px;
            }
            dd#synthDef a {
                width: 80px;
                height: 36px;
            }

            dd#snacksDef {
                top: 220px;
                right: 159px;
            }
            dd#snacksDef a {
                width: 85px;
                height: 40px;
            }
            
            
        
    

Рабочий пример можно посмотреть здесь (снимок был сделан во время работы над нашим последним ремиксом [скоро выйдет]):

Реклама
В студии ...
В студии ...
{0}1.{/0} {1}{/1} экрана.
Ableton, ПОЕХАЛИ!
2. Вирус TI
Сладкие звуки от Вирус
{0}3.{/0} {1}{/1} Закуски:
Ммммм, закуски.

Если у Вас есть какие-либо вопросы, замечания и/или предложения по улучшению, пожалуйста, не стесняйтесь, присылайте мне письмо: frankmanno [-на-] Gmail [-точка-] ком или свяжитесь со мной через Twitter ( @ frankieshakes ).

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

Как только ваш код готов к тестированию, вы можете загрузить его на свой ​​веб-хостинг провайдер, чтобы увидеть, какие результаты будет на самом деле онлайн.

Реклама

dell td230 ac adapter List of translations