Hivatkozások pozicionálása CSS háttérkép felett avagy ImageMap másként

A bemutatott példában egy <li> elem szerepel, melynek fix magassága és fix szélessége van (496px × 198px). Ennek CSS-ből van megadva, a background-image tag használatával a háttérkép. A háttérképen sok kis kép szerepel, melyekre külön-külön linkeket helyezünk el, hasonlóan mint egy image map készítése esetén.

.menu-1381 {
    background-image: url("../images/toyota_modellist.jpg");
    background-position: 0 0;
    background-repeat: no-repeat;
    height: 496px;
    width: 198px !important;
    margin: 0 !important;
    padding: 0 !important;
}

Az egyes linkek pozíciója “absolute”, magasságuk és szélességük CSS-ből meghatározott. A top és left értékek beállításával határozzuk meg hogy az egyes linkek a háttérkép feletti területen hol érhetők el.

#modell-link-auris
{
    position:absolute;
    top:50px;
    left:95px;
    background-color:transparent;
    height:50px;
    width:90px;
}

Az elkészült ImageMap, a www.toyotaclub.hu oldal Modellek menüpontjában látható.