Ściągnąłem styl, i chyba coś mi w nim źle działa. Mianowicie po najechaniu na menu zmienia się obrazek1 na obrazek2. Chcę by i ten obrazek2 był po kliknięciu na obrazek1.
Jak takie coś zrobić ?
Poniżej podaję kod html oraz CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="menu"> <ul> </div> </body> </html>
Kod
#menu {
background: #415b6b url(images/newbtn_middle.png) repeat-x;
padding-left: 20px;
height: 28px font-family: Arial, Calibri, Verdana, Geneva, sans-serif;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
height: 28px;
}
#menu li {
border-right: 1px solid #364D5B;
float: left;
}
#menu li:first-child {
border-left:1px solid #364D5B;
}
#menu li .linkmenu {
background: #567384 url(images/newbtn_middle.png) repeat-x;
border-left: 1px solid #99afbc;
border-top: 1px solid #99afbc;
color: #fff;
text-decoration: none;
display: block;
border-bottom: 0;
font: normal normal bold 12px/normal Arial, Calibri, Verdana, Geneva, sans-serif;
line-height: 26px;
min-width: 60px;
text-align: center;
padding: 0px 15px;
}
#menu li .linkmenu:hover {
text-decoration: none;
background:url(images/selected-tab-gradient-with-top-alpha.png) repeat-x scroll 0 -4px #7192A8;
color:#111111;
}
#menu li.search {
color: #000;
padding: 4px 10px 4px 13px;
border-bottom: 2px solid #ffffff;
float: right;
}
#menu li.active .linkmenu, #menu li.active .linkmenu:hover {
background: #567384 url(images/selected-tab-gradient-with-top-alpha.png) repeat-x;
color: #111;
padding-top: 4px;
position: relative;
top: -4px;
z-index: 10;
}
background: #415b6b url(images/newbtn_middle.png) repeat-x;
padding-left: 20px;
height: 28px font-family: Arial, Calibri, Verdana, Geneva, sans-serif;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
height: 28px;
}
#menu li {
border-right: 1px solid #364D5B;
float: left;
}
#menu li:first-child {
border-left:1px solid #364D5B;
}
#menu li .linkmenu {
background: #567384 url(images/newbtn_middle.png) repeat-x;
border-left: 1px solid #99afbc;
border-top: 1px solid #99afbc;
color: #fff;
text-decoration: none;
display: block;
border-bottom: 0;
font: normal normal bold 12px/normal Arial, Calibri, Verdana, Geneva, sans-serif;
line-height: 26px;
min-width: 60px;
text-align: center;
padding: 0px 15px;
}
#menu li .linkmenu:hover {
text-decoration: none;
background:url(images/selected-tab-gradient-with-top-alpha.png) repeat-x scroll 0 -4px #7192A8;
color:#111111;
}
#menu li.search {
color: #000;
padding: 4px 10px 4px 13px;
border-bottom: 2px solid #ffffff;
float: right;
}
#menu li.active .linkmenu, #menu li.active .linkmenu:hover {
background: #567384 url(images/selected-tab-gradient-with-top-alpha.png) repeat-x;
color: #111;
padding-top: 4px;
position: relative;
top: -4px;
z-index: 10;
}