DIV v jiném tvaru než obdelník – HTML / XHTML – Fórum – Programujte.com

Zdravím všechny programátory,

řeším problém, kdy mám DIV ve tvaru obdelníku a ten bych potřeboval rozděli na dva trojúhelníky (třeba z horního levého rohu na spodní pravý..). Tyto dva trojúhlelníky vyplní místo mého DIVu. Když zajedu myší na jeden trojúhelník, chtěl bych aby mě odkazoval <a rel="nofollow" href="jeden_odkaz".. a když zajedu na druhý trojúhledník, tak aby mě odkazoval na <a rel="nofollow" href="druhy_odkaz".. . Jediné řešní mě napadlo rozdělit tento DIV na několik menších divů vždy dva nad sebou a postupně vytvořit schodiště z jednoho rohu do druhého, ale je to takové hodně hodně kostrbaté. Nic jiného mě nenapadlo ani při použití jquery....

Díky za rady..

#1 pinky
Ahoj,

můžeš zapojit trochu matematiky a použít JavaScript/jQuery. Představ si, že máš čtverec o velikosti 100x100 (u obdélníku to bude fungovat podobně, ale nechci ti to hned celé prozradit:)) rozdělený úhlopříčkou z levého horního rohu do pravého dolního na dva trojúhelníky. Uvnitř tohohle čtverce (divu) můžeš pomocí JS zachytávat událost onmousemove.

A jak zjistím, jestli je myš v jednom trojúhelníku nebo v tom druhém? Pokud je X souřadnice větší než Y, je myš v "pravém" trojúhelníku.

Pokud by úhlopříčka šla obráceně, tedy z pravého horního do levého dolního rohu, byla by kontrola trošku jiná - v "levém" trojúhelníku by kurzor byl, pokud by byl součet obou souřadnic menší než 100.

Zkus si to nakreslit na papír a uvidíš, že je to snadné.

Prakticky je uplne jedno, zda pouzijes 1px prouzky nebo vyplnis trojuhelnik ctverci. Pocet by mohl byt stejny.

Html umi image map, tag MAP. Nejspis si to prehlidl pri praci s jakpsatweb.cz

http://www.jakpsatweb.cz/…obrazky.html#map

#3 peter
Díky moc, to jsem přesně potřeboval!