Возможно ли это?

admelj · July 5, 2009

Есть ячейка: <td width="225" height="50" background="ABS.jpg" alt="" align="center">. В ней ссылка.

Нужно, чтоб при наведении курсора на ячейку картинка поменялась на OABS.jpg

Испробовал массу вариантов и через фон ссылки, и через CSS. Нулевой результат(((

Возможно, что html не дает возможности это воплотить. Подскажите.

CoDy · July 5, 2009

Можно.

admelj · July 5, 2009

Можно.
<td width="225" height="50" background="ABS.jpg" alt="" align="center" OnMouseOver="java script: this.style.background='#000';">

Спасибо огромное, сейчас попробую. А вместо #000 не новую картинку указывать?

admelj · July 5, 2009

Можно.
<td width="225" height="50" background="ABS.jpg" alt="" align="center" OnMouseOver="java script: this.style.background='#000';">

Все сделал, результат нулевой(((

CoDy · July 5, 2009

выложи тут полный код странички

admelj · July 5, 2009

выложи тут полный код странички

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>ПРАЙСЛИСТ на АБС</title>

BODY{

margin: 0px;

}

TABLE {

width: 900px; /* Ширина таблицы */

border: 1px solid #2A1F55; /* Рамка вокруг таблицы */

margin: 0 auto; /* Выравниваем таблицу по центру окна */

font-family:Arial, Helvetica, sans-serif;

font-size:16px;

}

TD {

border: 1px solid #315C9D;

font-size:14px;

}

TITL{

font-size:18px;

font-weight:normal;

}

A{

outline: none;

font-family:Arial, Helvetica, sans-serif;

font-size: 14px;

font-weight:100;

text-decoration:none;

color:#BEBEBE;

background="ABS.jpg" alt="" align="center"

}

A.razdel{

outline: none;

font-family:Tahoma, Geneva, sans-serif;

font-size: 18 px;

text-decoration:none;

color:#2A1F55;

}

A.razdel:hover{

color:#315C9D;

text-decoration:underline;

}

A:hover{

color:#315C9D;

background="OABS.jpg" alt="" align="center"

}

.zagolovok {

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

font-weight: bold;

background-color: #315C9D;

color: #FFF;

}

.zagolovok1 {

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

font-weight: 300;

font-style:italic;

color:#FFF;

background-color:#315C9D;

height: 60px;

width: 900px;

vertical-align: baseline;

display: none;

top: 200px;

margin: 0px;

padding: 0px;

float: none;

list-style-type: none;

}

.zagolovok2 {

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

font-weight: 300;

font-style:italic;

color:#000000;

background-color:#315C9D;

height: 60px;

width: 900px;

vertical-align: baseline;

display: none;

top: 200px;

margin: 0px;

padding: 0px;

float: none;

list-style-type: none;

}

.razdel5 {

font-family: Arial, Helvetica, sans-serif;

font-size: 30px;

font-style: normal;

font-weight: bold;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

cursor: e-resize;

}

.snoska {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: italic;

color: #A0A0A4;

text-align: right;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

}

.snoska1 {

font-family: Arial, Helvetica, sans-serif;

font-size: 12px;

font-style: italic;

color: #000000;

text-align: center;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

}

</style>

</head>

<body>

<div>

<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>

</div>

</object>

</object>

</div>

<div>

<tr>

<a href="http://www.abs-systems.ru/price_01.html" class="razdel">Составляющие антиблокировочной системы тормозов АБС-Тягача*</a>

</td>

<a href="http://www.abs-systems.ru/price_02.html" class="razdel">Составляющие антиблокировочной системы тормозов АБС-Прицепа*</a>

</td>

<a href="http://www.abs-systems.ru/price_03.html" class="razdel">Электронная система управления пневмодвеской ECAS</a>

</td>

<a href="http://www.abs-systems.ru/price_04.html" class="razdel">Электрооборудование для грузовых автомобилей, автобусов и тракторов</a>

</td>

</tr>

</table>

<br>

<table>

<tr class="snoska1"><center>(*) Все представленные компоненты системы АБС могут быть адаптированы к любым моделям

<br> грузовых автомобилей, автобусов и троллейбусов</center></tr>

</table>

</div>

<br>

<center>Составляющие антиблокировочной системы тормозов АБС-Прицепа* </center>

</tr>

</table>

<br>

<table>

<td width="186"><div align="center"><strong>Наименование</strong></div></td>

<td width="144"><div align="center"><strong>Артикул</strong></div></td>

<td width="105"><div align="center"><strong>№ по каталогу WABCO</strong></div></td>

<td width="127"><div align="center"><strong>№ по каталогу Knorr-Bremse</strong></div></td>

<td width="179"><div align="center"><strong>УСТАНАВЛИВАЕТСЯ НА АВТОМОБИЛИ:</strong></div></td>

<td width="131"><div align="center"><strong>СТОИМОСТЬ</strong></div></td>

</tr>

<tr>

<td rowspan="3"><strong>Блок электронного управления</strong></td>

<td>VARIO Compact</td>

<td rowspan="3">Прицепной состав, МАЗ, НЕФАЗ, DAF</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td><strong>Модулятор прицепа</strong><br>с метрической резьбой)</td>

<td>Прицепной состав, МАЗ, НЕФАЗ</td>

</tr>

<tr>

<td><strong>Модулятор прицепа</strong></td>

<td>Прицепной состав, МАЗ, НЕФАЗ</td>

</tr>

<tr>

<td><strong>Инфомодуль</strong></td>

<td>МАЗ, Mercedes-Benz, MAN, IVECO, DAF</td>

</tr>

</table>

<br>

<center>Составляющие антиблокировочной системы тормозов АБС*</center>

<br>

</tr>

</table>

<table>

<tr>

<td width="159" rowspan="2"><strong>Кабель диагностический</strong></td>

</tr>

<tr>

</tr>

</table>

<!--

swfobject.registerObject("FlashID");

//-->

</script>

<br>

<div>

<tr>

<a href="http://www.abs-systems.ru/price_01.html" class="razdel">Составляющие антиблокировочной системы тормозов АБС-Тягача*</a>

</td>

<a href="http://www.abs-systems.ru/price_02.html" class="razdel">Составляющие антиблокировочной системы тормозов АБС-Прицепа*</a>

</td>

<a href="http://www.abs-systems.ru/price_03.html" class="razdel">Электронная система управления пневмодвеской ECAS</a>

</td>

<a href="http://www.abs-systems.ru/price_04.html" class="razdel">Электрооборудование для грузовых автомобилей, автобусов и тракторов</a>

</td>

</tr>

</table>

<table>

<tr class="snoska1"><center>(*) Все представленные компоненты системы АБС могут быть адаптированы к любым моделям

<br> грузовых автомобилей, автобусов и троллейбусов</center></tr>

</table>

</div>

<br>

<div>

<div align="center"><a href="mailto:osh@abs-systems.ru"> НАПИСАТЬ НАМ </a> | <a href="../downloads/Price_ABS_Systems.xls"> СКАЧТЬ ПРАЙС </a> | <a href="http://www.abs-systems.ru/">ВЕРНУТЬСЯ НА ГЛАВНУЮ </a></div>

</div>

<img src="http://d1.c2.b9.a1.top.mail.ru/counter?id=1646891;t=210;l=1"

border="0" height="31" width="88" alt="Рейтинг@Mail.ru" /></a>

</div>

</body>

</html>

CoDy · July 5, 2009

ошибочка тут - нет закрывающей кавычки.

вот попробуй так:

<td width="225" height="50" background="ABS.jpg" alt="" align="center"

onMouseOver="java script: this.style.backgroundImage='url(OABS.jpg)';">

admelj · July 5, 2009

ошибочка тут - нет закрывающей кавычки.
вот попробуй так:
<td width="225" height="50" background="ABS.jpg" alt="" align="center"
onMouseOver="java script: this.style.backgroundImage='url(OABS.jpg)';">

спасибки, пробую. Кстати, отдельно сделал контейнером <div>, получилось.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Цвет ссылок</title>

A {

color: #008000; /* Цвет обычной ссылки */

text-decoration: none; /* Убираем подчеркивание у ссылок */

}

A:visited {

color: #800080; /* Цвет посещенной ссылки */

}

A:hover {

color: #800000; /* Цвет ссылки при наведении на нее курсора мыши */

text-decoration: underline; /* Добавляем подчеркивание */

}

DIV {

height: 60px; /* Высота блока */

width: 225px; /* Ширина блока */

overflow: no; /* Добавляем полосы прокрутки */

background: url(ABS.jpg) ; /* Цвет фона,

путь к фоновому изображению и

повторять фон по вертикали */

}

DIV:hover {

height: 60px; /* Высота блока */

width: 225px; /* Ширина блока */

overflow: no; /* Добавляем полосы прокрутки */

background: url(OABS.jpg) ; /* Цвет фона,

путь к фоновому изображению и

повторять фон по вертикали */

}

</style>

</head>

<body>

<tr>

<div><a href="http://www.abs-systems.ru/price_01.html" class="A">Составляющие антиблокировочной системы тормозов АБС-Тягача*</a></div>

</td>

<div><a href="http://www.abs-systems.ru/price_02.html" class="A">Составляющие антиблокировочной системы тормозов АБС-Прицепа*</a></div>

</td>

<div><a href="http://www.abs-systems.ru/price_03.html" class="A">Электронная система управления пневмодвеской ECAS</a></div>

</td>

<div><a href="http://www.abs-systems.ru/price_04.html" class="A">Электрооборудование для грузовых автомобилей, автобусов и тракторов</a></div>

</td>

</tr>

</table>

</body>

</html>

А в документ вставить корректно не получилось.

ошибочка тут - нет закрывающей кавычки.
вот попробуй так:
<td width="225" height="50" background="ABS.jpg" alt="" align="center"
onMouseOver="java script: this.style.backgroundImage='url(OABS.jpg)';">

не меняет фон, хоть тресни(((

CoDy · July 5, 2009

)))

мистика, я скопировал твой код и открыл у себя - все ок работает

с псевдокласами в IE может быть бок, там псевдоклас :hover работает только для ссылок

Мож у тя картинки не отображаются, или путь не правильный(попробуй background: #000 url(OABS.jpg) если зальет черным то не подгружаются изображения).

admelj · July 5, 2009

)))
мистика, я скопировал твой код и открыл у себя - все ок работает
с псевдокласами в IE может быть бок, там псевдоклас :hover работает только для ссылок
Мож у тя картинки не отображаются, или путь не правильный(попробуй background: #000 url(OABS.jpg) если зальет черным то не подгружаются изображения).

Картинки отображаются точно, фон ячейки залит какой нужно. А вот меняться ну не в какую!!!

Картинки отображаются точно, фон ячейки залит какой нужно. А вот меняться ну не в какую!!!

пробовал твой последний код, не реагирует. Черным не заливает. Возможно, почему-то java script не выполняется.

CoDy · July 5, 2009

http://codydemosite.h18.ru/dhtml/test.html

зайди сюда.

если ты смотришь страничку не напрямую, а загружаешь ее с сервера( в инете или на локальной машине) внимательно смотри чтоб имя файла на сервере и в коде были в одном регистре(в некоторых случаях это имее значение: TEST.jpg и test.jpg не одно и тоже).

admelj · July 6, 2009

http://codydemosite.h18.ru/dhtml/test.html
зайди сюда.
если ты смотришь страничку не напрямую, а загружаешь ее с сервера( в инете или на локальной машине) внимательно смотри чтоб имя файла на сервере и в коде были в одном регистре(в некоторых случаях это имее значение: TEST.jpg и test.jpg не одно и тоже).

Я вчера вырубился, сорри((( Сегодня вечером попробую. Спасибо за терпение и дельные советы)))

admelj · July 6, 2009

Я вчера вырубился, сорри((( Сегодня вечером попробую. Спасибо за терпение и дельные советы)))

Все супер, работает на 5+!!!

CoDy · July 6, 2009

ответ на личное сообщение(посылал через личку, но не уверен что вдачно, поэтому пишу сюда):

Не уверен что понял Вас правильно, я так полагаю что реч идет о оформлении ссылок. Вот css правила для очистки стиля ссылок:

a {

outline: none;

text-decoration: none;

}

Если это не то, тогда нада принскрин и коментарий.

admelj · July 6, 2009

ответ на личное сообщение(посылал через личку, но не уверен что вдачно, поэтому пишу сюда):
Не уверен что понял Вас правильно, я так полагаю что реч идет о оформлении ссылок. Вот css правила для очистки стиля ссылок:
a {
outline: none;
text-decoration: none;
}
Если это не то, тогда нада принскрин и коментарий.

http://admelj.ru/zakaz/price_02.html Картинку не вставляет((( Если открывать через Лисенка все хорошо и чудесно, если открывать через IE или Safari (оперы у меня не стоит), то вместо полосы получается прямоугольник. Не высокий, но лучше смотрится линия. Я пытался найти в CSS откуда эта линия-прямоугольник взялась, но не нашел.

http://admelj.ru/zakaz/price_02.html Картинку не вставляет((( Если открывать через Лисенка все хорошо и чудесно, если открывать через IE или Safari (оперы у меня не стоит), то вместо полосы получается прямоугольник. Не высокий, но лучше смотрится линия. Я пытался найти в CSS откуда эта линия-прямоугольник взялась, но не нашел.

(*) Все представленные компоненты системы АБС могут быть адаптированы к любым моделям

<br> грузовых автомобилей, автобусов и троллейбусов

Под этой фразой вверху и внизу сайта, но это просто текст, а не ссылка

mongoose · July 8, 2009

А почему не сделать ссылки style="display:block;", и им по :hover менять background?

admelj · July 8, 2009

А почему не сделать ссылки style="display:block;", и им по :hover менять background?

Буду пробовать и так, спасибо.

Предыдущий вариант оказался рабочим)))

Justnewone · July 8, 2009

onMouseOver="java script: this.style.backgroundImage='url(OABS.jpg)'; - это некашерный путь

Если картинка тяжелая, то смена будет происходить с задержкой. Чтобы избежать опять прибегаем к JS - прелоад картинок.

Самой надежное и простое, я считаю, для всех нормальных браузеров использовать :hover, а для ненормальных на наведение назначать класс, например .hover, на онмаусаут - этот класс отбирать.

CSS

TD:hover{

background:OABS.jpg;

}

А в отдельном файле для осла

TD.hover{

background:OABS.jpg;

}

Тем самым код оптимизируете, не будет тормозов лишних, и ваще, в 21-м веке делать ховер не для IE6 с помощью JS - это БРЕД.

admelj · July 8, 2009

onMouseOver="java script: this.style.backgroundImage='url(OABS.jpg)'; - это некашерный путь
Если картинка тяжелая, то смена будет происходить с задержкой. Чтобы избежать опять прибегаем к JS - прелоад картинок.
Самой надежное и простое, я считаю, для всех нормальных браузеров использовать :hover, а для ненормальных на наведение назначать класс, например .hover, на онмаусаут - этот класс отбирать.
CSS
TD:hover{
background:OABS.jpg;
}
А в отдельном файле для осла
TD.hover{
background:OABS.jpg;
}
Тем самым код оптимизируете, не будет тормозов лишних, и ваще, в 21-м веке делать ховер не для IE6 с помощью JS - это БРЕД.

Спасибо Вам за информацию!

Sign In

Возможно ли это?

Question

Link to comment

Share on other sites

18 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

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