Tema: Re: Kaip padaryti interaktyvų paveikslą su nuorodom?
Autorius: Aras
Data: 2011-02-28 12:44:06
Ačiū tau labai. Tą ir turėjau omeny. O jeigu žmogus žiūrėdamas pasididina ar pasimažina žiūrėjimo mastelį, tai neišsiklaipys vaizdas ir linkai?
Ir dar, ar dviem stulpeliais čia įmanoma padaryti? T.y., kad vienoje eilutėje būtų iki 6 nuorodų? Kiek suvokiu, tai taip, nes su top ir left užsiduodu koordinatę nuo paveikslo krašto, o su width ir heigth užsiduodu langelio dydį. Teisingai?

Ar galėtum man parašyti, kaip turėtų atrodyti php faile eilutės, kad susijungtų viskas į krūvą?


"Maug Lee" <maugNOSPAMlee@gmail.com> wrote in message news:ikfrjp$qve$1@trimpas.omnitel.net...
> |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