Menu v obrazové mapě
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
-
Optimalizace a zlepšení výkonu kódu: tipy a triky
14. srpna 2023 -
Windows App: Pracujte odkudkoliv, kdykoliv
3. listopadu 2024 -
Landing page: Jak vytvořit landing page s vysokým CTR
7. května 2024 -
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024
Caric
Zář 17, 2009 v 18:46Je 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 ! :(