Menu v obrazové mapě

31. října 2005

Toto menu využijete především na stránkách s bohatě propracovaným designem. K jeho vykreslení je použit pouze jeden obrázek.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku Image Map Menu.

CSS

body
{
text-align: center;
}
div#obalovy
{
position: relative;
border: solid #ccc 1px;
width: 244px;
height: 200px;
background: white url(‚background.gif‘) 0px -228px no-repeat;
margin: auto;
}
li#polozka1
{
left: 50px;
top: 5px;
}
li#polozka2
{
left: 116px;
top: 5px;
}
li#polozka3
{
left: 17px;
top: 62px;
}
li#polozka4
{
left: 83px;
top: 62px;
}
li#polozka5
{
left: 149px;
top: 62px;
}
li#polozka6
{
left: 50px;
top: 119px;
}
li#polozka7
{
left: 116px;
top: 119px;
}
ul#menu li
{
list-style-type: none;
font-size: 12px;
position: absolute;
width: 67px;
height: 76px;
}
ul#menu a
{
background: transparent url(‚background.gif‘) -66px -152px no-repeat;
display: block;
text-decoration: none;
width: 100%;
height: 100%;
color: black;
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
}
ul#menu a:hover
{
color: #eee;
background: transparent url(‚background.gif‘) 0px 0px no-repeat;
}
li#polozka1 a:hover
{
background-position: 0px 0px;
}
li#polozka2 a:hover
{
background-position: -66px 0px;
}
li#polozka3 a:hover
{
background-position: -132px 0px;
}
li#polozka4 a:hover
{
background-position: 0px -76px;
}
li#polozka5 a:hover
{
background-position: -66px -76px;
}
li#polozka6 a:hover
{
background-position: -132px -76px;
}
li#polozka7 a:hover
{
background-position: 0px -152px;
}
ul#menu span
{
display: block;
position: absolute;
left: 0;
top: 40%;
text-align: center;
width: 100%;
cursor: pointer;
}

XHTML

<html>
<body>
<div id=“obalovy“>
<ul id=“menu“>
<li id=“polozka1″>
<a href=““ title=“Banány“><span>Banány</span></a>
</li>
<li id=“polozka2″>
<a href=““ title=“Pomeranče“><span>Jahody</span></a>
</li>
<li id=“polozka3″>
<a href=““ title=“Jablka“><span>Jablka</span></a>
</li>
<li id=“polozka4″>
<a href=““ title=“Hrušky“><span>Hrušky</span></a>
</li>
<li id=“polozka5″>
<a href=““ title=“Citrony“><span>Citrony</span></a>
</li>
<li id=“polozka6″>
<a href=““ title=“Melouny“><span>Melouny</span></a>
</li>
<li id=“polozka7″>
<a href=““ title=“Broskve“><span>Broskve</span></a>
</li>
</ul>
</div>
</body>
</html>

Mohlo by vás také zajímat

Nejnovější

1 komentář

  1. Caric

    Zář 17, 2009 v 18:46

    Je to pekné, ale dosť nedokonalé. obrázky sa aktivujú aj keď nie som v tom šesťuholínku ale aj mimo neho v rohoch štvoruholníka (ako načína obrázok a v strede si to preskakuje z aktivnych prvkov tiež nie podľa toho šesťuholníkového rozdelenia ale ako končia štvorcové obrázky.
    Ja by som potreboval zvalidniť menu na tejto stránke hypo-pozicky.sk (tam už som sa s tým pohral aby tie rohy zodpovedali ukazovateľu) … ale z validitou o tom po tom mám problém ! :(

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *