вам нужны событыя. _vvz.nw.ru/Lessons/JavaScript/events.htm вот здесь в удобном виде можно изучить все. Смотрите onMouseOver, onMouseOut, onMouseDown
:hover используется для ссылкол, тогда ноу проблем...
Для замены свойст при наведении можно использовать следующую конструкцию: <a href="/" title="bla">blabla<div>content</div></a>.
В css:
a:link div, a:visited div {
display:none;
}
a:hover div, a:active div {
display:block;
Вот в упрощенном варианте, суть думаю ясна. Дальше для позиционирования и стилизации используем стандартные средства. У ссылки можно сделать position:relative, у div - position:absolute... ну еще margin'ы padding' и кучу всякого добра. Ну подобного рода конструкции скажем так, не семантичны=) хотя как вариант имеют право на жизнь. Вместо div можно использовать любые элементы, пример span - удобно для подсказок, да и проффи рекомендуют именно span внутри ссылки для всплывающих подсказок при наведении.
у вас для внутреннего блока была прописана высота 190пикс.
вобщем смотрите как нада=)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><style type="text/css"><!-- #p {position:absolute; left:0; bottom:0; padding:0; margin: 0 0 0 0; height:auto;} .vazhno { clear: both; display:inline-block; margin: -5px 0 5px -5px;} .vazhno div { position: relative; float: left; width: 250px; height: 190px; margin: 5px 0 0 5px;} .vazhno div h2 {font-size:18px; line-height:23px; padding:3px;} .vazhno div h2 a:visited, .vazhno div h2 a:link {background: #003366; color:#CDD7FC; text-decoration:none; padding:0 3px;} .vazhno div h2 a:hover {background: #3399FF; color:#CDD7FC; text-decoration:none; padding:0 3px;} --></style></head> <body> <div class="vazhno"> <div style="background-image: url(http://img-fotki.yandex.ru/get/7/blagoy1.0/0_6b4c_8d820f71_L);"><div id="p"><h2><a href="/">Павел Румянцев*— седьмой «международник»</a></h2></div></div> <div style="background-image: url(http://img-fotki.yandex.ru/get/7/blagoy1.0/0_6b4c_8d820f71_L);"><div id="p"><h2><a href="/">Павел Румянцев*— седьмой «международник» Павел Румянцев*— седьмой «международник»</a></h2></div></div> </div> </body></html>
способ которым пользуюсь в подобных ситуациях:
То, что необходимо выровнять, забиваем в еще один div (можно использовать и др. теги, например, p). Для этого элемента указываем - position:absolute; left:0; bottom:0; width:100%;. А для родительского блока приписываем position:relative.
Таким образом мы прибиваем содержимое к нижней части родительского блока =) Для того что бы добиться нужного эфекта, нужно будет поиграться с padding, margin.
все ребята, ща точно спасибо. Тему можно закрывать, помог вариант drima, хотя я сразу на него не обратил внимания, т.к. делал почти тоже и не выходило...
се, всем спасибо за обсуждение, больше флуд разводить не будет=)
видимо и вправду, решение проблемы ток на js.
дивы использовать нельзя, т.к. там именно таблица. Цель - дать пользователю подсказки для полей таблицы. Реализация на js, ток позиционировать я думал можно и без него будет. Если в нормальных браузерах спасает то, что можно загнать подсказку в еще один div и позиционировать относительно его, то для ие - не работает(
ща не работает ссылка(( хотел посмотреть.
кста, для ссылки прописано только одно состояние? или все link,visited,hover,active?
_dle-news.ru здесь можно и нужно =)
не пробовал, но можно сделать для ячейки таблицы которая плавает position:relative, и уже внутрь ее забивать div абсолютно позиционированный...
