| |
|
|
| | Подскажите как сделать анимацию меню , так чтобы при наведении курсора изменялась фоновая картинка и текст, то есть на самом изображении текста нет, он поверх изображения.
могу менять только сами картинки | |
| |
|
|
| |
|
|
| |
для: АнтонБ
(01.03.2008 в 13:44)
| | | в стилях подставьте свои картинки для фона
<style>
.leftmenuNormal
{ background-image:URL('images/leftmenu.gif'); color:#0C2F70;
width: 170; height: 30; background-repeat: no-repeat;
font-size: 12px; font-family: Tahoma; text-decoration:none;
}
.leftmenuMouseover
{ background-image:URL('images/leftmenu_on.gif'); color:#003264;
width: 170; height: 30; background-repeat: no-repeat;
font-size: 12px; font-family: Tahoma; text-decoration:none;
}
</style>
<!-- left menu -->
<table width="170" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="30" nowrap style="background-color: transparent; border: none; cursor: hand; padding-left: 20;" class="leftmenuNormal" onMouseOver="this.className='leftmenuMouseover';" onMouseOut="this.className='leftmenuNormal'">item 1</td>
</tr><tr>
<td height="30" nowrap style="background-color: transparent; border: none; cursor: hand; padding-left: 20;" class="leftmenuNormal" onMouseOver="this.className='leftmenuMouseover';" onMouseOut="this.className='leftmenuNormal'">item 2</td>
</tr><tr>
<td height="30" nowrap style="background-color: transparent; border: none; cursor: hand; padding-left: 20;" class="leftmenuNormal" onMouseOver="this.className='leftmenuMouseover';" onMouseOut="this.className='leftmenuNormal'">item 3</td>
</tr><tr>
<td height="30" nowrap style="background-color: transparent; border: none; cursor: hand; padding-left: 20;" class="leftmenuNormal" onMouseOver="this.className='leftmenuMouseover';" onMouseOut="this.className='leftmenuNormal'">item 4</td>
</tr></table>
<!-- end left menu -->
|
| |
| |
|
|
| |
|
|
| |
для: elenaki
(01.03.2008 в 17:32)
| | | Твой вариант не совсем подходит так как если выделился фон и щелкнуть то ссылка не сработает так как курсор на неё ещё не зашел - ссылка не дей ствует :-(
хотя отображается стабильно стабильно
я нашел еще вариант, но окончательно нстроить не могу ширина в ie меньше чем других браузерах, помню что есть вроде спсоб экранирования части CSS кода от ie
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<style>
/* =-=-=-=-=-=-=-[добавлено меню]-=-=-=-=-=-=-=- */
a:link {
color: #76B0D5;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}
a:visited {
color: #7B878F;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}
a:hover, a:active {
color: #2399E5;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}
#menu3 {
border: 0px solid #ccc;
margin: 0px;
background-repeat: repeat-x;
}
#menu3 td a {
height: 36px;
voice-family: "\"}\"";
voice-family: inherit;
height: 27px;
}
#menu3 td a:link, #menu3 td a:visited {
color: #888;
display: block;
background: url(../images/tt1.gif);
padding: 9px 0 0 10px;
}
#menu3 td a:hover, #menu3 td a:active {
color: #283A50;
background: url(../images/tt1.gif) 0 -36px;
padding: 9px 0 0 10px;
}
</style>
<div id="menu3">
<table width="770" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="36" width="77"><a href="#">89898989</a></td>
<td height="36" width="77"><a href="#">89898989</a></td>
<td height="36" width="77"><a href="#">89898989</a></td>
<td height="36" width="77"><a href="#">89898989</a></td>
<td height="36" width="77"><a href="#">89898989</a></td>
<td height="36" width="387" background="images/images/t6.gif"> </td>
</tr>
</table></div>
|
Если сменить заголовок на
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
то меню отображается нормально, но тгда появляются дифекты в остальном шаблоне | |
| |
|
|
| |
|
|
| |
для: АнтонБ
(02.03.2008 в 10:09)
| | | Может попробовать сделать ячейку как ссылка?
<!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=windows-1251" />
<title>Документ Без Имени</title>
</head>
<body>
<table width="400" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000">
<tr>
<td> </td>
<td><a href="index.php" style='display:block; height:20px; background-color: #99CCFF; text-align: center; padding: 10px;'>ГЛАВНАЯ</a></td>
</tr>
<tr>
<td width="400"> </td>
<td width="400"> </td>
</tr>
</table>
</body>
</html>
|
А уже к этому прикрутить смену фона, извините если не в тему, сильно вникать не стал. | |
| |
|
|
| |
|
|
| |
для: mikha
(02.03.2008 в 15:07)
| | | достаточно приписать к ячейке событие onclick. у меня там стояло, но я убрала. или к ссылке добавить в стиль display: block, тогда ссылка будет на всю ячейку. способов много. | |
| |
|
|
| |
|
|
| |
для: elenaki
(02.03.2008 в 17:46)
| | | фиг знает, я больше в js, чем в css.
Для меня проще сделать ячейку ссылкой и менять фон если мыша в ячейке лыба)))
А ещё.. не люблю я эти извраты..
Обычно на PHP, если находишься в какомто разделе, то соответствующий пункт меню как то выделяется.
У меня обычно ссылка перестаёт быть ссылкой и меняет цвет. | |
| |
|
|
