Франк Манно

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

Оригиналът:
CSS Image Maps, Redux

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

Актуализиран CSS3 картата изображението урок е бил публикуван. Ако търсите за версия с по-бързо с времето, което прави използването на някои фънки функции CSS3, може да искате да проверите CSS3 Изображение Карта

Изображение MapsПолучих няколко имейли след публикуване първият ми вземат / експеримент върху CSS Изображение Карта. Обратна връзка е както добре приет, както и критика. Както можете да си представите – на базата на метода „образ Спрайт“, използван за първи дубъл – голяма част от отзивите центрирано около използването на този спрайт, така да се каже. Докато CSS файл Карта е била полезна на теория, създавайки подредени копия от едно и също изображение във Photoshop (или сте графичен инструмент на избор) не изглежда като идеалният начин за решаване на проблема.

Така че …. Върнах се обратно на чертожната дъска, и дойде с друго решение, което изисква едно изображение, някои CSS и малко творчество! Този втори пример прави използването на прозрачни изображения (PNG изображения) за да покаже, анотация на изображение. Голяма част от същия CSS от първия пример, се използва с няколко незначителни изменения. По-долу е извадка от старото против. новото:

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>

Отново, докато това може да не е най-„идеална“ решение там, то със сигурност се разширява при предишния метод на шева / подреждане на множество копия от едно и също изображение заедно. Единственият провал съм срещнал с този метод е в моята употреба на PNG файлове за фолио анотация. Както може би, или не могат, знаят, подкрепа IE за прозрачни изображения е доста съмнителен. Аз бях опитал с помощта на Камерън Адам IE PNG Филтър Hack , но по някаква странна причина, аз не мога да IE правилно да покаже прозрачността. Ако искате да се пробождане в това, моля не се колебайте да вземете кода и проникна далеч … Бих се радвал да чуя за вашите успехи! Това е филтъра Опитах прилагане в CSS:

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

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

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

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