Problem: Menu w kształcie koła

[ZjedzKota]

Witam.

 

 

Ostatnio wpadłem na pomysł stworzenia dość niestandardowego layoutu, które będzie wykorzystywać menu w kształcie koła - coś w stylu tego które widać powyżej. Na żółtych kulach będą ikony działów strony, a w dużej kuli, która jest po środku będzie duża ikona działu, który właśnie jest przeglądany.

Mój problem polega na tym, że nie wiem jak zakodować te kule, żeby zrobić z nich graficzne odsyłacze - próbowałem to ciąć w programie graficznym i układać za pomocą xhtml+css ale każde próby kończyły sie nie powodzeniem :/ Próbowałem też ułożyć kule tak żeby tworzyły kwadrat (były w równych wierszach i kolumnach), ale dziwnie to wyglądało więc taka opcja nie wchodzi w grę.

Z góry dziękuje za wszelką pomoc, pozdrawiam :)

[olaf]

może area shape?

[Lukasz_Stanek]

HTML

<br />
link1 = new Image();<br />
link1.src = '1.jpg';<br />
link1_mo = new Image();<br />
link1_mo.src = '1m.jpg';<br />
<br />
link2 = new Image();<br />
link2.src = '2.jpg';<br />
link2_mo = new Image();<br />
link2_mo.src = '2m.jpg';<br />
<br />
link3 = new Image();<br />
link3.src = '3.jpg';<br />
link3_mo = new Image();<br />
link3_mo.src = '3m.jpg';<br />
<br />
link4 = new Image();<br />
link4.src = '4.jpg';<br />
link4_mo = new Image();<br />
link4_mo.src = '4m.jpg';<br />
<br />
link5 = new Image();<br />
link5.src = '5.jpg';<br />
link5_mo = new Image();<br />
link5_mo.src = '5m.jpg';<br />
<br />
link6 = new Image();<br />
link6.src = '6.jpg';<br />
link6_mo = new Image();<br />
link6_mo.src = '6m.jpg';<br />
<br />
link7 = new Image();<br />
link7.src = '7.jpg';<br />
link7_mo = new Image();<br />
link7_mo.src = '7m.jpg';<br />
<br />
link8 = new Image();<br />
link8.src = '8.jpg';<br />
link8_mo = new Image();<br />
link8_mo.src = '8m.jpg';<br />

CSS

.menu                                            {background-image: url('background.jpg'); background-repeat: no-repeat; position: absolute; width: 280px; height: 280px; margin-top: 100px; margin-left: 300px;}
.menu img.jestestu                                {position: absolute; margin-left: 100px; margin-top: 100px;}
.menu a.link1                                    {position: absolute; margin-left: 114px; margin-top: 30px;}
.menu a.link2                                    {position: absolute; margin-left: 174px; margin-top: 54px;}
.menu a.link3                                    {position: absolute; margin-left: 198px; margin-top: 114px;}
.menu a.link4                                    {position: absolute; margin-left: 174px; margin-top: 174px;}
.menu a.link5                                    {position: absolute; margin-left: 114px; margin-top: 198px;}
.menu a.link6                                    {position: absolute; margin-left: 56px; margin-top: 174px;}
.menu a.link7                                    {position: absolute; margin-left: 30px; margin-top: 114px;}
.menu a.link8                                    {position: absolute; margin-left: 56px; margin-top: 54px;}

Edytowane 6 Czerwiec 2011 przez Lukasz_Stanek

[ZjedzKota]

@ola-f: niezbyt wiem co to area shape :/

 

@Lukasz_Stanek: dziękuje bardzo - jesteś wielki (+rep). Szkoda że nie da się bez JS, ale przynajmniej mam powód żeby zacząć się go uczyć. Jeszcze raz dzięki.

 

Pozdrawiam

[ZjedzKota]

JS to coś czego kompletnie nie rozumiem, jeśli chodzi o tworzenie stron, a patrząc na niektóre strony wydaje mi się, że ma bardzo duże możliwości, więc chyba najwyższa pora żeby go poznać :P

Przeglądam teraz kod i zastanawiam się czemu ja nie pomyślałem o marginesach :) Jeszcze raz dzięki, pozdrawiam

[olaf]

area shape to zaznaczone obszary jednej grafiki np. rectangle polygon lub circle, ale nie wiem czy w ogole stosuje ktos cokolwiek poza rect. Tak czy inaczej Lukasz_Stanek pokazał bardzo zgrabny sposób na to, razem z rollover.

[illy]

JS jest tylko po to aby po najechaniu na link zmienił się obrazek, możesz z tego zrezygnować

... na korzysc css i bedziesz miec to samo