Jump to content
  • 0

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


Imevil
 Share

Question

Всем привет,у меня такая ситуация:решил сделать кнопки с эффектом перекатывания,но через 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 первые две кнопки пропадают.

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0

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

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

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

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

Вот:

<!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,первые две кнопки(они же картинки),пропадают.

Link to comment
Share on other sites

  • 0

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..

Link to comment
Share on other sites

  • 0
Я для себя вместо картинок просто цвет менял.. Вс? вроде нормально работает. Может быть ты просто спозиционировал не правильно последний 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 исчезают,вот.

Link to comment
Share on other sites

  • 0

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

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');
}

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

  • 0

Теперь проблема более детальна:oДело в изображении,когда я в третьем 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 с адресом картинки,опять вс? исчезает,остаются только рамки,т.е. проблема в изображении,но как е? решить?:/

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy