Вопрос по перекатываниям

Imevil · July 17, 2007

Всем привет,у меня такая ситуация:решил сделать кнопки с эффектом перекатывания,но через CSS и с помощью идендификаторов,с JS ещ? не знаком,так вот первые две кнопки отображаются нормально,но когда я делаю третий идентификатор с указанием картинки и функцией hover,то кнопки изчезают,в ч?м дело?Буду очень благодарен за ответ.

Вот код:

A#rollover{
background: url('Глава1.gif');
display: inline;
width: 80px;
height: 40px;
border: 0px solid #000;
position:absolute;
left:140px;
top:20px;
}
A#rollover:hover{
background: url('Глава1(актив).gif')
}
A#rollover2{
background: url('Глава2.gif');
display: inline;
width: 80px;
height: 40px;
border: 0px solid #000;
position:absolute;
left:240px;
top:20px;
}
A#rollover2:hover{
background: url('Глава2(актив).gif');
}

И вот когда я начинаю добавлять третий аналогичный ID первые две кнопки пропадают.

Дядя Саша · July 17, 2007

Если ссылке задан ид, зачем тогда писать A#rollover если можно написать #rollover.

Зачем display: inline;???

Зачем border: 0px solid #000; solid - тип бордера, зачем он если бордера нет? То же касается и цвета.

Gatanoa · July 18, 2007

Про ролловеры можно прочитать ТУТ.

PacMan · July 18, 2007

Зачем border: 0px solid #000; solid - тип бордера, зачем он если бордера нет? То же касается и цвета.

Похоже на вспомогательную конструкцию для отладки. Забыл, или не счел нужным, потереть.

Imevil · July 18, 2007

Зачем border: 0px solid #000; solid - тип бордера, зачем он если бордера нет? То же касается и цвета.
Похоже на вспомогательную конструкцию для отладки. Забыл, или не счел нужным, потереть.

Именно так,просто я сво? "творение" не выкладывал в нет,поэтому эти параметры не убрал,да и ктому же я же не крутой пограммист,что бы с ходу оптимизировать код.И вс? же, не знаете в ч?м моя проблема?

YETI · July 18, 2007

И вс? же, не знаете в ч?м моя проблема?

Пока неясно, выложи хтмл тоже.

Imevil · July 18, 2007

И вс? же, не знаете в ч?м моя проблема?
Пока неясно, выложи хтмл тоже.

Вот:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="Style.css">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<TITLE>Текст</TITLE>
</HEAD>
<BODY leftmargin="10">
<TABLE border="0" width="1000" cellspacing="0" cellpadding="0">
<TR>
<TD>
<DIV>
<h1>Текст</h1>
<h2>Текст</h2>
<span id="m1"><img src="..Папка23043_prev_98.jpg" height="58"></img></span>
<A href="#" id="rollover"> </A>
<A href="#" id="rollover2"> </A>
<A href="#" id="rollover3"> </A>
<A href="#"> </A>
<A href="#"> </A>
<A href="#"> </A>
</DIV>
</TD>
</TR>
</TABLE>
<UL id="menu" class="menu">
<LI>Список
<UL>
<LI><A href="#">Текст</A>
<LI><A href="#">Текст</A>
<LI><A href="#">Текст</A>
<LI><A href="#">Текст</A>
</UL>
</LI>
</UL>
<TABLE id="m3" border="1">
<TR><TD>
<h3 id="Zag">Текст</h3><BR>
<p class="cite">Текст</p>
<h3 class="zagolovok">Текст</h3>
<p>Текст</p>
</TD>
</TR>
</TABLE>
<UL id="menu1" class="menu">
<LI>Текст
<UL>
<LI><A href="#">Текст</A>
<LI><A href="#">Текст</A>
<LI><A href="#">Текст</A>
<LI><A href="#">Текст</A>
</UL>
</LI>
</UL>
<DIV class="ssylki">
<A href="#">Информация об авторе</A> |
<A href="#">Фотографии автора</A> |
<A href="#">Друзья</A>
</DIV>
</BODY>
</HTML>

Проблема в том,что когда я добавляю в файл Style.css описание #rollover3,первые две кнопки(они же картинки),пропадают.

Lazar · July 18, 2007

A#rollover:hover{
 background: red;
}
A#rollover2{
 background: black;
 display: inline;
 width: 80px;
 height: 40px;
 border: 2px solid #000;
 position:absolute;
 left:240px;
 top:20px;
}
A#rollover2:hover{
 background: red;
}
A#rollover3{
 background: black;
 display: inline;
 width: 80px;
 height: 40px;
 border: 2px solid #000;
 position:absolute;
 left:340px;
 top:20px;
}
A#rollover3:hover{
 background: red;
}





<BODY leftmargin="10">
<TABLE border="0" width="1000" cellspacing="0" cellpadding="0">
<TR>
 <TD>
 <DIV>
 <h1>Текст</h1>
 <h2>Текст</h2>
 <span id="m1"><img src="..Папка23043_prev_98.jpg" height="58"></img></span>
 <A href="#" id="rollover"> </A>
 <A href="#" id="rollover2"> </A>
 <A href="#" id="rollover3"> </A>
 <A href="#"> </A>
 <A href="#"> </A>
</DIV>

Я для себя вместо картинок просто цвет менял.. Вс? вроде нормально работает. Может быть ты просто спозиционировал не правильно последний rollover..

Imevil · July 19, 2007

Я для себя вместо картинок просто цвет менял.. Вс? вроде нормально работает. Может быть ты просто спозиционировал не правильно последний rollover..

Нет у меня проблема в другом,мой CSS выглядит так

A#rollover{
background: url('Глава1.gif');
border: 0px solid #000;
position:absolute;
width:80px;
height:40px;
left:140px;
top:20px;
}
A#rollover:hover{
background: url('Глава1(актив).gif')
}
A#rollover2{
background: url('Глава2.gif');
border: 0px solid #000;
width:80px;
height:40px;
position:absolute;
left:240px;
top:20px;
}
A#rollover2:hover{
background: url('Глава2(актив).gif');
}

И еслия добавляю третий ID к примеру такой:

A#rollover3{
background: url('Глава3.gif');
border: 0px solid #000;
width:80px;
height:40px;
position:absolute;
left:340px;
top:20px;
}
A#rollover2:hover{
background: url('Глава3(актив).gif');
}

Тогда два предущих изображения пропадают в месте с третьим.Прич?м если у третьего включить рамку вокруг изображения,то она появляется,а самого изображения нет.Если 3 ID убираю,тогда вс? в норме,проблема в том что когда добавляется аналогичный ID с рисунком у меня получается третий по сч?ту,то все подобные ID исчезают,вот.

YETI · July 19, 2007

Добавил вот это:

A#rollover3{
background: url('Глава2.gif');
display: inline;
width: 80px;
height: 40px;
border: 1px solid #000;
position:absolute;
left:340px;
top:20px;
}
A#rollover3:hover{
background: url('Глава2(актив).gif');
}

Все работает. Попробуй напиши ченибудь в ссылках этих.

Imevil · July 19, 2007

YETI,ни фига не работает,пропадают первые две картинки,а в место третьей рисуется рамка,а вней пусто,т.е.изображение вроде бы есть,но оно не показываеся.

Да кстати,изображения остаются и работают,к примеру как ссылки,при клике переходят куда надо,но сами изображения пропадают визуально,когда я вставляю третий ID.

YETI · July 19, 2007

YETI,ни фига не работает,пропадают первые две картинки,а в место третьей рисуется рамка,а вней пусто,т.е.изображение вроде бы есть,но оно не показываеся.
Да кстати,изображения остаются и работают,к примеру как ссылки,при клике переходят куда надо,но сами изображения пропадают визуально,когда я вставляю третий ID.

Очень очень странно....

Imevil · July 19, 2007

Вот и я теряюсь в догадках что это?И ведь если убрать любой из тр?х ID,тогда два имейджа отображаются как нормально,но если прописать третий,то опять вс? пропадает,что за фигня?

Imevil · July 19, 2007

Теперь проблема более детальнаДело в изображении,когда я в третьем ID,убираю в строчке background параметр url в месте с адресом рисунка,тогда вс? норм,прич?м и для свойства hover тоже самое.Если я пишу к примеру:

A#rollover3{
background: #4b4ee8;
border: 1px solid #000;
width:80px;
height:40px;
position:absolute;
left:340px;
top:20px;
}
A#rollover3:hover{
background: #4b8ee8;
}

Тогда появляется цветной блок и при наведении на него курсора цвет меняется,но как только я вставляю в background параметр url с адресом картинки,опять вс? исчезает,остаются только рамки,т.е. проблема в изображении,но как е? решить?:/

YETI · July 19, 2007

как только я вставляю в background параметр url с адресом картинки,опять вс? исчезает,остаются только рамки,т.е. проблема в изображении,но как е? решить?:/

Может как то вставляешь не так? Тут не может быть чтоб это не работало. Проверь все пути файлов, синтаксис везде. Я пробовал у себя вставлять картинки и все отлично работало.

Imevil · July 19, 2007

Йесс,заработало!Проблема исчезла когда я переименовал картинки на с русского на английский.Но почему с русскими названиями такое происходит?

Sign In

Вопрос по перекатываниям

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information