Source: http://www.frankmanno.com/ideas/css-imagemap/

Siirry Esimerkki

Vaihtoehtona kuvan vain CSS kartat on julkaistu. Jos etsit helpompi tapa luoda kuvakarttoja johon yhden kuvan, saatat olla kiinnostunut käsittelyssä CSS kuvakarttojen Redux

Alla on esimerkki kuvan kartta, joka on rakennettu kokonaan CSS ja XHTML. Vaikka Olen lisännyt JavaScript tuen (kohta otsikot ovat yksinkertaisesti alla näkyvät kuvassa), olen poistanut sen tässä esimerkissä – olen joutunut hieman ongelmia, kun JS on käytössä ja CSS on poissa käytöstä (lisätietoja alla).

Alkuperäinen idea tähän tuli blogissaan luin haltuunsa Gina Trappini blogi, Scribbling.net. Hänen esimerkki oli hyvin tehty, mutta halusin yrittää samaa (tai vastaava) Pelkän CSS.

Sitten löytyi linkki Daily Kryogenix sivuston kautta (Gina post), joka johti kuvan kartan, joka hyödynsi ligher DHTML, ja käytti <title> tagi näyttää muistiinpanoja hotspot. Silti hieman riippuvainen Javascript / DHTML.

Lopulta päätin hyödyntää Doug Bowmanin liukuovet tekniikka yhdistettynä määritelmä listan (<dl> </ dl>).

Liukuovet tekniikka mahdollistaa sisältävät kaikki kuvasi kaatumisen vaikutukset yhdessä kuvatiedosto ja hyödyntää tausta-asemassa CSS omaisuus “muutos” kuvaa mihin suuntaan. Lisäämällä: hover vaikutus CSS (tässä tapauksessa <a> tag sisällä <dd> tag), voit siirtää kuvan haluttuun asentoon.

Minä tein rakentaa kuvakartalle Photoshop. Kuten näette tämän kuvan, kartta koostuu 3 kopiota samasta kuvasta, kukin eri merkintöjä. Alkuun (1 anettu 3) yksinkertaisesti merkitsee kuormittajat numeroilla, ja keskimmäinen ja alin kuva (2 ja 3 anettu 3) sisältävät kukin kaatumisen vaikutukset (valkoinen läpikuultavuus). Sinulla voi olla miettimättä, miksi rollover vaikutus on jaettu kahteen eri kuvaa. Syy erottaminen johtuu päällekkäisyydestä viereisen kohdetta (eli näytön, kannettavan ja levyke pöydälle). Sen sijaan, että välisen törmäyksen kaksi tuotetta, rollover vaikutuksia naapuri- kohdetta erotettiin päälle useita kopioita samasta kuvasta.

Pohjimmiltaan Tämä toimii asettamalla kohteen otsikkoa hotspot määrittelyyn aikavälin tag (<dt> </ dt>) listasi, jota seuraa määrittelyssä-kuvaus tag (<dd> </ dd>). CSS sitten piilottaa määritelmä aikavälin (jota todellisuudessa käytetään, kun CSS ei ole käytössä) sekä määritelmää-kuvaus (näkyvissä kun häilyä ankkurin) ja näyttää määrityskuvauksen (tässä tapauksessa kuvaus hotspot (t) olet valinnut oman imagemap), ja ehdottomasti kantoja ja näyttää kuvauksen jälkeen kaatuessa hotspot (myös määritelty CSS).

Koodi myös hajottaa sulavasti. <Img> tagin, joka näyttää ei-kartoitettu version kuvasta kartan, on piilotettu CSS. Niille, jotka ovat CSS vammaisten, kartoitti version kuvasta (3-osainen kuva) ei näy, koska se on osa taustaa CSS omaisuutta. Pikemminkin kuin kartoitettu versio näyttää mukaan liitetty unstyled määritelmän luettelossa. Jos sinulla Web Developer laajennus Firefoxille, mennä eteenpäin ja poistaa tyylejä. Saat paremman käsityksen huonontumisen.

Näyte koodi näkyy alla (katso lähde koko CSS ja XHTML):

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

HTML:

<dl id="officeMap">
 <dt id="monitor">1. Monitor</dt>
 <dd id="monitorDef">
  <a href="#">
   <span>Here's my 17" Monitor.  I wish I had an LCD!</span>
  </a>
 </dd>
 <dt id="phone">2. Phone</dt>
 <dd id="phoneDef">
  <a href="#">
   <span>Does this thing ever stop ringing?</span>
  </a>
 </dd>
 <dt id="case">3. PC Case</dt>
 <dd id="caseDef">
  <a href="#">
   <span>This is my crazy Linux box! Gotta love that Linux...</span>
  </a>
 </dd>
 <dt id="notebook">4. IBM ThinkPad</dt>
 <dd id="notebookDef">
  <a href="#">
   <span>Here's my Linux notebook.  Some crazy coding going on.</span>
  </a>
 </dd>
 <dt id="floppy">5. External Floppy Drive</dt>
 <dd id="floppyDef">
  <a href="#">
   <span>Floppy Drive.  Ancient... I know!</span>
  </a>
 </dd>
</dl>

Käytännön esimerkki voidaan katsoa alla (kuva alla otettiin Daily Kryogenix):

Vaikka tämä ei ehkä ole kaikkein “ihanne” ratkaisu siellä, se varmasti laajenee kun Edellä mainitut esimerkit. Olen todella rakasti Gina idea, minkä vuoksi olen yrittänyt laajentaa sitä. Valitettavasti nykyisen rajoituksia CSS (samoin kuin tietyt selaimet), en voinut täysin jäljittelemään tarkkaa toimivuutta Gina esimerkkiä.

Tässä on esimerkki, joka käyttää sekä CSS ja JavaScript. Yksi ongelma Törmäsin on, kun CSS on poistettu käytöstä, mutta JavaScript on käytössä. Jotain outoa tapahtuu määritelmän luettelossa. Jos osaat korjata, haluaisin tietää. Mielelläni saada se toimimaan.

En onnistunut törmännyt uusi yritys CSS perustuvan kuvan kartta, joka näyttää todella hyvältä. Valitettavasti, koska IE: n rajoitukset (nimenomaan vain tuella: hover vaikutus <a> tag), se ei ole rajat selain yhteensopiva (vielä!).

Jos sinulla on kysyttävää, huolenaiheita, ja / tai parannusehdotuksia, voit vapaasti lähettää minulle huomautus: frankmanno [-at-] gmail [-dot-] com tai jättää kommentin blogiin.

Esimerkit on tutkittu menestyksekkäästi Safarissa, Firefoxissa (Mac / Win), IE6 / Win, ja Opera 7.5 / Mac. Jostain kumman syystä, Javascript-versio toimii IE5 / Mac, kun taas ei-JavaScript-versio ei.