Форум Сайтостроение Веб-строительство

извращение на тему графических ссылок

12 3
мартышон
На сайте с 11.10.2006
Offline
163
мартышон
1501

С текстовыми ссылками возможно прописать в css изменение параметров шрифта при наведении курсора. Есть ли какой-нибудь не очень громоздкий способ сделать подобное с графическими ссылками, чтобы при наведении курсора один рисунок менялся на другой?

I
На сайте с 22.10.2005
Offline
58
Iso
#1

В статье http://www.dweb.ru/articles/index.php?idart=38 написано, как менять свойства таблицы, в том числе и фоновй рисунок. Вроде не шибко громоздко.

мартышон
На сайте с 11.10.2006
Offline
163
мартышон
#2

а если нужно, чтобы при наведении на ячейку только одна эта ячейка фоновый цвет меняла? Что, в каждую ячейку по своей таблице запихивать? Я попробовала прописать код для каждой ячейки: <td id=td onMouseover="td.bgColor='red'" onMouseOut="td.bgColor='white'" bgcolor=white>

Но не сработало...

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
Dreammaker
На сайте с 20.04.2006
Offline
569
Dreammaker
#3

<td id="td_id" onMouseover="document.getElementByID('td_id').style.backgroundColor='red'" onMouseOut="document.getElementByID('td_id').style.backgroundColor='white'" bgcolor=white>

Попробуйте так.

мартышон
На сайте с 11.10.2006
Offline
163
мартышон
#4

Попробовала - не работает. Обычный белый фон получается.

Ёжик В Тумане
На сайте с 26.07.2006
Offline
16
Ёжик В Тумане
#5 

<?xml version="1.0" encoding="windows-1251"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>Misc</title>

<style type="text/css">

/*<![CDATA[*/
a#overAndOut{display: block;width:100px;height:100px;background:#fff url('фон1.gif') 0 0 no-repeat;}

a#overAndOut:hover{background:#fff url('фон2.gif') 0 0 no-repeat;}

/*]]>*/

</style>



</head>

<body>

<a id="overAndOut" href="#"><img src="прозрачная_gif.gif"></a>

</div>

</body>

</html>

прозрачная_gif.gif - это просто прозрачная гифка.

Ушел в себя, забыл про форум.
Вернусь ли? Не знаю... Если нужен, пишите в аську...
B
На сайте с 06.04.2006
Offline
24
blaize
#6
мартышон:
Попробовала - не работает. Обычный белый фон получается.

Для TD пропишите <td class="menubar"><div>link</div></td>

В стилях: 


.menubar div {

width: 100%;

margin: 0px;

padding: 1px;

border: 1px dotted #eaeaea;

}



.menubar div:hover {

border: 1px dotted #222222;

}

Всё заработает.

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

Мониторинг сайтов (http://hostpulse.ru/), серверов, проверка содержимого страниц.
Dreammaker
На сайте с 20.04.2006
Offline
569
Dreammaker
#7
мартышон:
Попробовала - не работает. Обычный белый фон получается.

А стоп...

У Вас скопировал не заметил.. onMouseover , а должно быть onMouseOver + у меня ID, а нужно Id :) А проверить поленился..

В общем, вот это у меня работает..

<table>

<tr>

<td id="td_id" onMouseOver="document.getElementById('td_id').style.backgroundColor='red'" onMouseOut="document.getElementById('td_id').style.backgroundColor='white'" bgcolor=white>dkldjlksjdvlksdvlksdlv</td>

</tr>

</table>

ТВЭЛ
На сайте с 29.09.2006
Offline
111
ТВЭЛ
#8

Совсем недавно была похожая тема. Я там все подробно написал и даже пример показал.

Тема - /ru/forum/101779

Пример - http://tvel.name/temp/currentwhere/ (надеюсь не надо объяснять, что код будет идентичный и для картинки, меняющейся при наведении?).

Если вдруг непонятно, то еще как-то на другом форуме был аналогичный вопрос, тоже объяснял - http://tvel.name/temp/hover-pictures/

P.S. И не надо яву для такой ерунды пихать!

Время не ждёт.
eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
ТВЭЛ
На сайте с 29.09.2006
Offline
111
ТВЭЛ
#9

blaize, а ваш код в ИЕ не будет работать, к сожалению. Он понимает псевдокласс hover только в отношении элемента a.

B
На сайте с 06.04.2006
Offline
24
blaize
#10
ТВЭЛ:
blaize, а ваш код в ИЕ не будет работать, к сожалению. Он понимает псевдокласс hover только в отношении элемента a.

Да, говорят не работает.. Жаль.

По ссылке http://tvel.name/temp/hover-pictures/ у меня в мозилле (из-под линукса) только жёлтый фон...

Хотя на Вашем основном сайте все картинки изменяются нормально.

12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий