<html>
<head>
<title>new</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000099" vlink="#330066" alink="#FF0000">
<script language="JavaScript">
function ChangeBG()
{
dd = window.event.srcElement;
if (dd.id.match("item"))
{
dd.bgColor = "#3FFFFF";
}
}
function RestoreBG(ID)
{
dd = window.event.srcElement;
if (dd.id.match("item"))
{
dd.bgColor = "#D8D8BF";
}
}
document.onmouseover = ChangeBG;
document.onmouseout = RestoreBG;
</script>
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td bgcolor="#D8D8BF" id="item1">111</td>
</tr>
<tr>
<td bgcolor="#D8D8BF" id="item2">222</td>
</tr>
<tr>
<td bgcolor="#D8D8BF" id="item3">333</td>
</tr>
<tr>
<td bgcolor="#D8D8BF" id="item4">444</td>
</tr>
</table>
</body>
</html>
Навигация
Как сделать так, что бы при наведении курсора мышки на какую – либо кнопку навигации, она меняла цвет. Тоесть кнопка меняла цвет.
Да, кстати, при создании навигации, я использую Абсолютное позиционирование.
Пасибо.
Да, кстати, при создании навигации, я использую Абсолютное позиционирование.
Пасибо.
Смотря что ты используешь в качестве кнопок навигации. (рисунки или button'ы)
Я использую картинку
Размещаю я её на сайте, с помощью абсолютного позиционирования.
Размещаю я её на сайте, с помощью абсолютного позиционирования.
Цитата:
Originally posted by Дмитрий О
Я использую картинку
Размещаю я её на сайте, с помощью абсолютного позиционирования.
Я использую картинку
Размещаю я её на сайте, с помощью абсолютного позиционирования.
Картинка не может менять цвет. Нужно две картинки. Например, так:
<style type="text/css">
<!--
.but {
position: absolute;
height: 20px;
width: 100px;
left: 100px;
top: 100px;
background-image: url(1.png);
}
a.but:link {
background-image: url(1.png);
}
a.but:hover {
background-image: url(2.png);
}
-->
</style>
Цитата:
Originally posted by Дмитрий О
Я использую картинку
Размещаю я её на сайте, с помощью абсолютного позиционирования.
Я использую картинку
Размещаю я её на сайте, с помощью абсолютного позиционирования.
Вот тебе кусок с моего сайта.
Комменты: onMouseOver - когда наводишь на иконку вместо document.acustika подгружаеться картинка pic/acustika_noactive.gif.
onMouseOut соответственно когда мышка уползает:).
acustika - значение аттрибута name в данной картинке.
Гы:)
Цитата:
Originally posted by shaelf
Гы:)
Гы:)
на CSS красивше
Цитата:
Originally posted by Extractor
на CSS красивше
на CSS красивше
Да, но там меню и эти картинки с надписями, соответственно для каждой картинки (менюшки, кнопочки) мутить надо это:).
Спасибо за подмогу:D
Цитата:
Originally posted by shaelf
Да, но там меню и эти картинки с надписями, соответственно для каждой картинки (менюшки, кнопочки) мутить надо это:).
Да, но там меню и эти картинки с надписями, соответственно для каждой картинки (менюшки, кнопочки) мутить надо это:).
Можно пойти еще одним путем, если картинки отличаются только текстом, то использовать фон картинки как фон у ячейки, а сверху текст и абсолютно позиционировать уже таблицу... или див с таблицей внутри... и цсс можно юзать
Цитата:
Originally posted by Extractor
Можно пойти еще одним путем,
Можно пойти еще одним путем,
А по подробнее можно. :D
Цитата:
Originally posted by Дмитрий О
А по подробнее можно. :D
А по подробнее можно. :D
Можно вообще обойтись без таблиц, использовать списки. Так, кстати, проще вложенные меню создавать.
Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ru">
<head>
<title>Навигация</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
ul#nav {
border: solid 1px #ccc;
border-top: none;
width: 200px;
margin: 0;
padding: 0;
}
ul#nav li {
width: 200px;
height: 30px;
border: none;
list-style: none;
overflow: hidden;
/* Костыль для IE */
* margin: 0 0 -2px 0;
}
ul#nav li a {
display: block;
width: 200px;
height: 30px;
border-top: solid 1px #ccc;
line-height: 14px;
margin: 0;
padding: 6px 0 0 0;
font-size: 14px !important;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #666;
background-color: #9cf;
background-image: url('b1.gif')
}
ul#nav li a:visited {
}
ul#nav li a:hover {
color: #00f;
background-color: #def;
background-image: url('b2.gif')
}
ul#nav li a:active {
}
#preload {
width: 0;
height: 0;
overflow: hidden;
margin: 0 -5000px 0 0;
}
</style>
</head>
<body>
<div id="preload"></div>
<ul id="nav">Menu ItemMenu ItemMenu ItemMenu ItemMenu Item[/list]</body>
</html>
<html lang="ru">
<head>
<title>Навигация</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
ul#nav {
border: solid 1px #ccc;
border-top: none;
width: 200px;
margin: 0;
padding: 0;
}
ul#nav li {
width: 200px;
height: 30px;
border: none;
list-style: none;
overflow: hidden;
/* Костыль для IE */
* margin: 0 0 -2px 0;
}
ul#nav li a {
display: block;
width: 200px;
height: 30px;
border-top: solid 1px #ccc;
line-height: 14px;
margin: 0;
padding: 6px 0 0 0;
font-size: 14px !important;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #666;
background-color: #9cf;
background-image: url('b1.gif')
}
ul#nav li a:visited {
}
ul#nav li a:hover {
color: #00f;
background-color: #def;
background-image: url('b2.gif')
}
ul#nav li a:active {
}
#preload {
width: 0;
height: 0;
overflow: hidden;
margin: 0 -5000px 0 0;
}
</style>
</head>
<body>
<div id="preload"></div>
<ul id="nav">Menu ItemMenu ItemMenu ItemMenu ItemMenu Item[/list]</body>
</html>
Есть пара хороших статей по этому поводу:
http://webmascon.com/topics/coding/37a.asp
http://webmascon.com/topics/coding/36a.asp
P.S. Эту тему, наверное, лучше бы перенести в "Web->HTML"
Спасибо вам всем.
Цитата:
Originally posted by Дмитрий О
А по подробнее можно. :D
А по подробнее можно. :D
Код:
например так, изменить только атрибуты для картинки типа dd.background = url, не поню точно, либо прямо со стилями dd.style.backgroundImage = url;
Цитата:
Originally posted by Extractor
например так, изменить только атрибуты для картинки типа dd.background = url, не поню точно, либо прямо со стилями dd.style.backgroundImage = url;
например так, изменить только атрибуты для картинки типа dd.background = url, не поню точно, либо прямо со стилями dd.style.backgroundImage = url;
Всё это конечно супер, но народ, человек писал, что ему нужны кнопки, а не ссылки! То, что я написал - кнопки. Если нужно менять именно фон (что не есть здорово, лучше менять цвет линка), то по моемому лучше тут будет именно чистый css без JavaScript.
Цитата:
Originally posted by shaelf
Всё это конечно супер, но народ, человек писал, что ему нужны кнопки, а не ссылки! То, что я написал - кнопки. Если нужно менять именно фон (что не есть здорово, лучше менять цвет линка), то по моемому лучше тут будет именно чистый css без JavaScript.
Всё это конечно супер, но народ, человек писал, что ему нужны кнопки, а не ссылки! То, что я написал - кнопки. Если нужно менять именно фон (что не есть здорово, лучше менять цвет линка), то по моемому лучше тут будет именно чистый css без JavaScript.
Не понял, причем тут разделение на ссылки и кнопки? У тебя в примере тоже ссылкой сделано, к тому же, предоставленны все варианты осталось только выбрать, а эт уже не наша забота и фон менять, по моему, не совсем не плохо, все зависит от дизайнерской мысли :D ... фон может быть не только цветом, но и картнкой
Цитата:
Originally posted by Extractor
Не понял, причем тут разделение на ссылки и кнопки? У тебя в примере тоже ссылкой сделано, к тому же, предоставленны все варианты осталось только выбрать, а эт уже не наша забота и фон менять, по моему, не совсем не плохо, все зависит от дизайнерской мысли :D ... фон может быть не только цветом, но и картнкой
Не понял, причем тут разделение на ссылки и кнопки? У тебя в примере тоже ссылкой сделано, к тому же, предоставленны все варианты осталось только выбрать, а эт уже не наша забота и фон менять, по моему, не совсем не плохо, все зависит от дизайнерской мысли :D ... фон может быть не только цветом, но и картнкой
Если присмотреться, то там видно document.name.src
и пусть меня заплюют, если это фон. Теперь отличие ссылки от кнопки. Кнопка это картинка у которой область действие не только надпись, но и всё логически выделенное поле (для примера <input type="submit">), ссылка это текстовый линк, не более и картинка там может быть только в качестве bg.
Цитата:
Originally posted by shaelf
Если присмотреться, то там видно document.name.src
и пусть меня заплюют, если это фон. Теперь отличие ссылки от кнопки. Кнопка это картинка у которой область действие не только надпись, но и всё логически выделенное поле (для примера <input type="submit">), ссылка это текстовый линк, не более и картинка там может быть только в качестве bg.
Если присмотреться, то там видно document.name.src
и пусть меня заплюют, если это фон. Теперь отличие ссылки от кнопки. Кнопка это картинка у которой область действие не только надпись, но и всё логически выделенное поле (для примера <input type="submit">), ссылка это текстовый линк, не более и картинка там может быть только в качестве bg.
аааа...:D
Цитата:
ссылка это текстовый линк, не более и картинка там может быть только в качестве bg.
можно использовать события на самой ячейке, тогда все это превратится в кнопку
Код:
<td onMauseOver="" onMauseOut="" onClick="">
Цитата:
Originally posted by Extractor
аааа...:D
можно использовать события на самой ячейке, тогда все это превратится в кнопку
аааа...:D
можно использовать события на самой ячейке, тогда все это превратится в кнопку
Код:
<td onMauseOver="" onMauseOut="" onClick="">
А не проще не изобретать велосипед? Кнопка должна быть кнопкой и не чем иным. Ссылка должна быть ссылкой.
Цитата:
Originally posted by shaelf
А не проще не изобретать велосипед? Кнопка должна быть кнопкой и не чем иным. Ссылка должна быть ссылкой.
А не проще не изобретать велосипед? Кнопка должна быть кнопкой и не чем иным. Ссылка должна быть ссылкой.
конечно, просто на вопрос уже ответили можно и поизвращаться:D
Цитата:
Originally posted by Extractor
конечно, просто на вопрос уже ответили можно и поизвращаться:D
конечно, просто на вопрос уже ответили можно и поизвращаться:D
Что-то я в последнее время очень серьёзным стал, шуток перестал понимать...:)