-
Начал изучать HTML. Столкнулся с такой проблемой: как сделать, чтобы при наведении мышкой на рисунок, на его месте открывался другой рисунок, а когда мышку убираешь появлялся опять первый. Оба рисунка являются фоном в ячейке таблицы. Второй рисунок при щелчке мышью переводит на другую страницу.
...
<table cellSpacing=0 cellPadding=0 border=0>
<tr>
<td width="8" HEIGHT="50" background="pic1.jpg"> </td>
</tr>
</table>
...
Надо чтобы вместо background="pic1.jpg" появлялся "pic2.jpg" когда мышь убираешь опять первый. Пробовал с помощью onmouseout & onmouseover, но что-то не получается.
Заранее спасибо.
-
в CSS для ссылки пишем:
a {background:url(первый фон) ... }
и для мыши над сцылкой a:hover {background:url(второй фон) ...}
-
Цитата:
Originally posted by null@Apr 5 2007, 23:14
в CSS для ссылки пишем:
a {background:url(первый фон) ... }
и для мыши над сцылкой a:hover {background:url(второй фон) ...}
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
не забываем добавить display: block; для "a", чтобы ссылка развернулась на всю область ячейки таблицы
-
Вообще моя страница выглядит следующим образом: таблица в которой
1я строка, объединены пять столбцов - фоном является баннер.
2я строка разбита на пять столбцов одинаковой ширины (меню: главная, товары, контакты и т.д.). В каждом столбце фоном и одновременно ссылкой является картинка. Картинка представляет собой надпись с определенным эффектом, например, падающей тенью. При наведении мышью эффект меняется т.е. меняется картинка. Проблема в как раз в этой строке.
3я строка. В ней пять столбцов ширина 19%,1%,60%,1%,19% там находится текст, ссылки, вложенные таблицы и т.д.
пример
-----в CSS для ссылки пишем:
a {background:url(первый фон) ... }
и для мыши над сцылкой a:hover {background:url(второй фон) ...}-----
подходит только для одной ячейки, а как сделать для пяти?
Пробовал еще один вариант в html, а не в css
<td>
<style type="text/css">
#menu a {
display:block;
width:152px;
background: url("button_1Glavn_na.jpg");
margin: 0em 0;
padding:0px 0 35px 0px;
font: bold 12px/1 sans-serif;
color:#cf0;
text-decoration: none;}
#menu a:hover {background: url("button_1Glavn_akt.jpg") alt="Главная"}
</style>
<div id="menu">
</div>
</td>
Если в каждом столбце написать тоже что и в примере, изменяя только названия рисунков во всех столбцах появляется только рисунок который должен быть в пятом столбце.
Пробовал в следующих столбцах менять #menu на #menu2, а <div id="menu"> на <div id="menu2"> все равно не получается.
-
Цитата:
Originally posted by alexscr@Apr 6 2007, 22:38
Если в каждом столбце написать тоже что и в примере, изменяя только названия рисунков во всех столбцах появляется только рисунок который должен быть в пятом столбце.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
Так и должно быть, потому что это логично. Один из принципов каскадности в CSS – последнее определение преобладает над всеми предыдущими. Вот и получается, что для всех ссылок применяется рисунок, который определяется для последней ссылки...
Назначьте Вашим ссылкам разные классы и припишите этим классам разные фоновые изображения в CSS... Или если уж пытаетесь делать <div id="menu2"> и т.п. – можно воспользоваться контекстными методами в стилях...
В общем, учим CSS... ))
-
Вообщем у меня получилось
Если кому интересно в HTML пишем:
<LINK href="style.css" type=text/css rel=stylesheet>
<table cellSpacing=0 cellPadding=0 border=0 width="760">
<tr width="760">
<td width="152" HEIGHT="50" alt="glav">
<div id=dropmenu1 style="background: url("button_1Glavn_na.jpg")">
[Only registered and activated users can see links. Click Here To Register...]
</div>
</td>
<td width="152" HEIGHT="50" alt="fre">
<div id=dropmenu1 style="background: url("button_1Glavn_na.jpg")">
[Only registered and activated users can see links. Click Here To Register...]
</div>
</td>
... ... и т.д.
</tr>
</table>
А в css пишем:
.menu1 {display:block; width:152px; background: url("button_1Glavn_na.jpg");
margin: 0em 0; padding:0px 0 38px 0px; font: bold 12px/1 sans-serif;
color:#cf0; text-decoration: none;}
.menu1:hover {background: url("button_1Glavn_akt.jpg")}
.menu2 {display:block; width:152px; background: url("button_2Free_na.jpg");
margin: 0em 0; padding:0px 0 38px 0px; font: bold 12px/1 sans-serif;
color:#cf0; text-decoration: none;}
.menu2:hover {background: url("button_2Free_akt.jpg")} ... ... и т.д.
-
Вынужден констатировать, что подобный код вряд ли может представлять интерес... ))
Причин несколько.
1. У элемента <tr> не бывает атрибута width.
2. У элемента <td> не бывает атрибута alt.
3. В пределах одного документа не может быть двух одинаковых значений атрибута id.
4. В элементе <div id=dropmenu1 style="background: url("button_1Glavn_na.jpg")"> в данном конкретном случае нет никакого смысла. Здесь это лишний элемент.
5. Весь Ваш CSS-код можно сократить примерно в два с половиной раза...
