pokračování dotazu na img menu
zde:
Image Map Test
mám jednduchý příklad (pro ilustraci)
html:
<html>
<head>
<title>Image Map Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles_image_menu.css" />
</head>
<body>
<br /><br />
<div id="image_menu">
<div id="image_menu_pp">
<ul>
<li id="a"><a href="#"><span>A</span></a></li>
<li id="b"><a href="#"><span>B</span></a></li>
<li id="c"><a href="#"><span>C</span></a></li>
<li id="d"><a href="#"><span>D</span></a></li>
</ul>
</div> <!-- end image_menu_pp -->
</div> <!-- end image_menu -->
</body>
</html>
css:
/* Image Map Styles
designed by puschpull
---------------------------------- */
/* obrázkové map menu
---------------------------------- */
body {
font-family : Arial, Tahoma, Verdana;
color : Black;
font-size: 95%;
height: 100%; /* dulezite */
margin: 0px;
padding: 0px;
min-width: 700px;
}
#image_menu
{
position: absolute;
left: 100px;
top: 100px;
}
#image_menu_pp
{
text-align: center;
margin-left: 20%;
margin-right: 20%;
width:400px;
height:400px;
background-image: url(images_menu/img_menu.png);
background-position: 0px 0px ;
background-repeat: no-repeat;
}
#image_menu_pp ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
/*clear: left;*/
position: relative;
top: 0px;
left: 0px;
}
#image_menu_pp li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#image_menu_pp a
{
margin:0px;
padding:0px;
display: block;
}
#image_menu_pp a span
{
display: none;
}
#a a
{
width:200px;
height:200px;
background: url(images_menu/img_menu.png) 0px 0px no-repeat;
}
#a a:hover
{
width:200px;
height:200px;
background: url(images_menu/img_menu.png) 0px -400px no-repeat;
}
#b a
{
width:200px;
height:200px;
background: url(images_menu/img_menu.png) -200px 0 no-repeat;
}
#b a:hover
{
width:200px;
height:200px;
background: url(images_menu/img_menu.png) -200px -400px no-repeat;
}
#c a
{
width:200px;
height:200px;
background: url(images_menu/img_menu.png) 0px -200px no-repeat;
}
#c a:hover
{
width:200px;
height:200px;
background: url(images_menu/img_menu.png) 0px -600px no-repeat;
}
#d a
{
width:200px;
height:200px;
background: url(images_menu/img_menu.png) -200px -200px no-repeat;
}
#d a:hover
{
width:200px;
height:200px;
background: url(images_menu/img_menu.png) -200px -600px no-repeat;
}
#a_active
{
width:200px;
height:200px;
background: url(images_menu/img_menu.png) 0px -400px no-repeat;
}
#b_active
{
width:200px;
height:200px;
background: url(images_menu/img_menu.png) -200px -400px no-repeat;
}
#c_active
{
width:200px;
height:200px;
background: url(images_menu/img_menu.png) 0px -600px no-repeat;
}
#d_active
{
width:200px;
height:200px;
background: url(images_menu/img_menu.png) -200px -600px no-repeat;
}
| 
Registrace nového uživatele 
