(ASK) bikin penempatan button miring bisa ga?

[kiraz]

kk skalian saya sbg newbie dalam web design..
pengen bertanya gmana sih caranya buat button dalam web miring2 dan saling timpa menimpa...
seperti pada gambar... menu utama:
home, product, dll nya

[j2spirit]

wah canggih

ide saya sih, pake div kotak, gambarnya dibuat sedemikian rupa sehingga seolah2 miring, padahal kotak, sisanya transparan (pake GIF/PNG).
supaya bisa timpa menimpa tinggal margin div nya dibuat negatif aja

tp itu agak 'brutal' sih. yg lebih jago komen donk saya jg pengen tau.

ato cara ke 2, pake flash

[kiraz]

ini design kasar ny..
gw emang awalnya pngen pk flash..
tp ternyata karena ada request biar bisa buka di Blackberry...
jadi batal deh rencana gw.. dan gw skrg malez untuk design ulang gt lho.....
nah makanya gw minta solusi dari sesepuh skalian

dasar BB flash aja support

[kiraz]

adakah dsini yang bisa bantuin saya

[flowwiththeblood]

tag IMG SRC nya pakai properites usemap.
tinggal definisikan area dan hyperlink-nya dengan tag MAP dan AREA menggunakan properties "shape" dan "coords"

[j2spirit]

USEMAP!!
gw ampe lupa ada ini ga pernah make sih
tapi usemap seinget gw jg shapenya paling bulet/kotak kan? bisa miring2 gitu gak?

[humanity]

kalo gw liat sekilas ya, lebih cocok kalo dibagi kotak-kotak gitu, atau dengan kata lain pake tabel. Pake usemap juga bisa. Btw, itu kan juga pake javascript buat tampilin gambarnya kan.

[flowwiththeblood]

Originally Posted by j2spirit

USEMAP!!
gw ampe lupa ada ini ga pernah make sih
tapi usemap seinget gw jg shapenya paling bulet/kotak kan? bisa miring2 gitu gak?

bisa, pake "shape=poly"

[kiraz]

sip2 thx buat jwaban nya ntara gw coba deh XD
ijo2 has been shooted

[mul14]

Iya.. paling mudah itu pake map. Kalo di dreamweaver tinggal klak-klik.

Btw, solusi lain ada juga. Bikin menu gambar miring tsb jadi png+transparent. Trus pake CSS ditempatkan diposisinya. Contohnya nih, tapi cuma dua gambar.

<style>
#home {
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 10; /* Makin tinggi angkanya, makin didepan */
}

#portfolio {
  position: absolute;
  top: 170px;
  left: 90px;
  z-index: 9;
}
</style>
<img id="home" src="home.png"/>
<img id="portfolio" src="portfolio.png"/>

Itu berarti yang about us, z-index nya harus diatas 9, soalnya product bakal 8.

Cara lainnya dengan CSS3 -moz-transform, -moz-transform-origin, atau -webkit-transform. Gambar dibikin tetep lurus, trus CSS nya yang miringin. Cuma kalo pake cara ini, cuma bisa dibuka oleh web browser yang udah mengimplementasikan CSS3. Itu berarti BlackBerry gak bisa.