Tema: Re: Kaip padaryti interaktyvų paveikslą su nuorodom?
Autorius: Maug Lee
Data: 2011-02-28 11:58:18
|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