css image menu

Cenjeni mojstri,

Lotil sem se izdelave css menija, ki ga tvorijo štiri slike. Klik na posamezno sliko odpre tekstovni horizontal submeni pod osnovnim. Klik na submeni item pa potem prikaže vsebino v content divu...
Rabim nasvet, ker ne vem kako naj se lotim zadeve. Moja ideja je bila, da uporabim 4 slike kot background image in potem čez sliko "nalepim" div za link, ki odpre submeni...Nisem prepričan, da je to dobra ideja. Zdaj imam namreč težavo z pozicioniranjem vseh divov in submenijem. Dodatno mi povzroča težave to, da so slike postrani :))
Morda sploh ni tako zakomplicirano izdelati to kar želim...ne vem...upam, da kmalu ugotovim :)
Prosim, za kak hud advice, ker sem se malce izgubil...

LP,m.

6 odgovorov

Še slikca:
img=[]

Jaz bi tole celotno sliko dal za ozadje, potem pa naredil štiri linke (<a href="#"></a>) in jim v css določil display:block; float:left ter ji potem lepo postavil z width, height, in margin parametri.
Imaš pa še eno drugo metodo, ko uporabiš mapo (html značka <map>) za več linkov pri običajni sliki, tega je bil včasih lepo zmožen dreamweaver, vendar nisem siguren, če je to sploh po W3C standardih, zato raje ne uporabljam.

Narediš lahko tudi div, ki ima relativno pozicijo in ima to sliko za background, in potem absolutno pozicioniraš manjše dive, ki imajo not <a> tag, mora pa bit ta tag block in imet pač nastavljeno višino in širino. Tak mogoče prihraniš kak pixl :D

Jaz bi na tvojem mestu naredil z mapo, ker maš slike postrani in z divi ne boš nikol mogel natančno naredit box, ki bo na klik ali hover delal.

1

Muchas gracias vsem trem...sem poskusil z image mapo in sem zelo zadovoljen z rezultatom ter enostavnostjo...sem naredil še hover, da se "opazi", da je image link...bom pa preveril kako funkcionira z različnimi brskalniki...
TNX&LP,m.

Za hover lahko uporabiš tole :
http://plugins.jquery.com/project/maphilight