|unknown| wrote:
> Jaučiu paprasčiausias variantas būtų tau susikarpyti paveiksliuką su
> photoshopu kokiu, jis ten kažkokį CSS arba lenteles net padarys.
aš tai daryčiau kitaip.
Kadangi tos nuorodos yra (auto dalių) *sąrašas*, tai naudočiau semantiškai
prasmingą <ul>. Iš pavyzdžio gal bus aišku:
ul#autodalys {
background:transparent url(/images/superduper-dalys.png) no-repeat left top;
position:relative; overflow:hidden;
width:600px; height:400px; /* matmenys atitinka paveikslėlio dydį */
}
/* padedam elementus į vietą */
ul#autodalys li {position:absolute}
ul#autodalys li.ratai {top:50px; left:123px}
ul#autodalys li.durys {top:94px; left:467px}
/* jei reikia didesnių clickable plotų */
ul#autodalys a {display:block}
ul#autodalys li.ratai a {width:50px;height:50px}
ul#autodalys li.durys a {width:80px;height:110px}
Nu kažkaip taip.
Galimi improvement'ai kai tekstas pasimato tik užvedus pelę: tada galima
pridėti kažką panašaus:
ul#autodalys a { width:1em; height:1em; text-indent:1em; overflow:hidden }
ul#autodalys a:hover { width:auto; height:auto; text-indent:0 }
Čia viskas parašyta „ant nuomonės“, tik idėjai perteikti.
Sąrašo elementus nesunkiai padėsi į vietą: laikinai uždėk li {background-
color:red} ir su FF Firebug'u susistumdyk iki tikslių pozicijų / dydžių.
Jokio fotožopo, jokių imagemap'ų – print stilius rodys tvarkingą detalių
sąrašą; google'as ir „javascriptless“ browser'iai patenkinti. Taip toliau ir
panašiai – vieni privalumai :)
--
M.Lee