Франк Манно
Фронтенд уеб разработчик
Оригиналът:
CSS3 Image 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). Ако сте в състояние да тествате това върху други браузъри, моля да ми изпратите бележка, и аз ще актуализирам списъка.
Създадена е работна например може да бъде разгледана по-долу (снимката е взето по време на работа на най-новите ни ремикс [трябва да излезе скоро]):