Франк  Манно

Фронтенд уеб разработчик

Оригиналът:
CSS3 Image Maps

Напред към Пример

Изображение MapsМина повече от седем години откакто за първи път публикуваха моя CSS Изображение Maps статия/урок. Аз бях получил многобройни имейли от хора, които ми бяха благодари за показване как се прави, и мислех, че ще я актуализирам, за да я направя по-подходяща за възможностите на CSS на днешните модерни браузъри.

Днешното решение изисква по-малко код, не се нуждае от изображения (с изключение на един, който използвате за карта, без съмнение) и предлага някои хубави ръси на CSS3 преходи, включително избледняване и прилагането им на „балончето с информация“, когато кръжи над анотиран район на изображението.

Взех съществуващия CSS, тя почиства до него малко по-модулни (и по-малко DRY) прави и, както винаги, са предоставили работна например . По-долу е необходимия код, за да създадете своя собствена 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;
            }

Ако имате някакви въпроси, които се отнасят до темата и/или предложения за подобрения, моля не се колебайте да ми изпратите бележка: frankmanno [-at-] Gmail [-dot-] COM или се свържете с мен чрез Twitter ( @frankieshakes ).

Примерите са били успешно тествани в Chrome, Safari и Firefox (Mac). Ако сте в състояние да тествате това върху други браузъри, моля да ми изпратите бележка, и аз ще актуализирам списъка.

Създадена е работна например може да бъде разгледана по-долу (снимката е взето по време на работа на най-новите ни ремикс [трябва да излезе скоро]):