подсветка input style=image

minelli · May 6, 2008

Доброго времени.

<input type="image" src="i/file0.gif" / class="over">

как применить :hover ? как поменять file0.gif на file1.gif?

minelli · May 6, 2008

прошу прощения. код попроще

ZoNT · May 6, 2008

minelli · May 6, 2008

спасибо! это я знал. только css. это возможно?

minelli · May 6, 2008

просто мучаюсь с :hover. зациклило.

ZoNT · May 6, 2008

css не js...

minelli · May 6, 2008

еще раз искреннее спасибо. твердое нет значит много больше пространных речей.

minelli · May 6, 2008

2 Zont

еще созрел вопрос.

можно делать так:

и в body использовать нечто, прописанное в *.js

можно делать так?

и использовать стили из рзных файлов. что то у меня не клеится. только если в одном файле все.

ZoNT · May 7, 2008

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

homm · May 7, 2008

вердое нет значит много больше пространных речей.

Даже если это неверное ?нет??

Смотря какую задачу ставить, если конкретно ?поменять атрибут src у элемента img?, то на css нельзя. А если ?поменять картинку при наведении мыши?, то можно через background и a:hover

homm · May 7, 2008

<script language="JavaScript" src="01.js">
<script language="JavaScript" src="02.js">

Так уже не модно. Правильно так:

ZoNT · May 7, 2008

гм... Я вроде на конкретный вопрос отвечал...

minelli · May 7, 2008

благодарю всех откликнувшихся.

2 homm. как раз с hover у меня и получились проблемы.

2 ZoNT. отдельное спасибо за пару лишних часов сна. просто через onmouse сделал и не стал морочиться.

2 homm еще раз :-) дело не в написании. вопрос был о принципе построения. возсожно ли брать стили из разных файлов. знаю, что так должно быть, но.... пишу стили в одном файле. подключаю в странице - вуаля! один из стилей cut - paste в другой... нифига! в head прописаны 01.css и 02.css ???

ZoNT · May 7, 2008

приведи код... может где ошибка...

minelli · May 7, 2008

было:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Супер-пупер сайт </title>
<link rel="stylesheet" href="f/s.css" type="text/css" />
</head>
<body>
<DIV ID="container">
	<DIV ID="header"><img src="i/HeaderFull.jpg"></DIV>
<ul class="menu">
	<li class="current"><a href="index.htm">Home</a></li>
	<li><a href="about.htm">About</a></li>
	<li><a href="news.htm">News</a></li>
	<li><a href="emploer.htm">Emploer</a></li>
	<li><a href="competitor.htm">Competitors</a></li>
	<li><a href="contacts.htm">Contacts</a></li>
</ul>

....

в s.css

/* — Global — */
body {background: #FFF; color:#333;	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:80%;	margin-bottom:0;}

a:hover {text-decoration:none;}

h1, h3 {text-align:left; font-size:25px; color:#333; font-weight:normal; margin:20px 0 0 4px; padding:0;	width:100%;}

p {color:#333; text-align:justify;}
p.adv {color:#333; border:1px solid #DDD; background-color:#f2f2f2; margin:9px 0 8px 9px; padding:0;}

blockquote {color:#333; border:1px solid #DDD; background-color:#f2f2f2; padding:12px 5px;}

label {font-weight:bold;}

address {font-style:normal;	color:#000;	margin:4px 0 0 0;	padding:0 0 0 10px;}

.clr {clear:both;}

/* — Container — */
div#container {width:760px; background-color:#FFFFFF; margin-left:auto;	margin-right:auto;}

/* — Header — */
div#header {height:290px;	width:760px;	clear:both;	padding:0 0 1px 0;}

div#header h1 {float:left; margin:0; padding:21px 0 0 17px;}

/* -- Menu --*/
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#FFF url(../i/but1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu li {float:left;}
.menu li a {display:block; float:left; height:35px; line-height:35px; color:#AAA; text-decoration:none; font-size:11px; font-family:Arial, Verdana, Sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu li.current a {color:#EE5F00; background:url(../i/but3.gif);}
.menu li.current a b {color:#FFF; background:url(../i/but3.gif) no-repeat right top;}
.menu li a:hover {color:#FFF; background:#000 url(../i/but2.gif);}
.menu li a:hover b {background:url(../i/but2.gif) no-repeat right top;}
.menu li.current a:hover {color:#EE5F00; background:#000 url(../i/but3.gif); cursor:default;}
.menu li.current a:hover b {background:url(../i/but3.gif) no-repeat right top;}

...

делаю:

...

<title>Супер-пупер сайт </title>
<link rel="stylesheet" href="f/global.css" type="text/css" />
<link rel="stylesheet" href="f/menu.css" type="text/css" />
</head>

...

в global.css вырезаю-ставлю:

/* — Global — */
body {background: #FFF; color:#333;	font-family:Verdana, Arial, Helvetica, sans-serif;	font-size:80%;	margin-bottom:0;}

a:hover {text-decoration:none;}

h1, h3 {text-align:left; font-size:25px; color:#333; font-weight:normal; margin:20px 0 0 4px; padding:0;	width:100%;}

p {color:#333; text-align:justify;}
p.adv {color:#333; border:1px solid #DDD; background-color:#f2f2f2; margin:9px 0 8px 9px; padding:0;}

blockquote {color:#333; border:1px solid #DDD; background-color:#f2f2f2; padding:12px 5px;}

label {font-weight:bold;}

address {font-style:normal;	color:#000;	margin:4px 0 0 0;	padding:0 0 0 10px;}

.clr {clear:both;}

в menu.css (тоже cut-paste)

/* -- Main menu -- */
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:35px; background:#FFF url(../i/but1.gif); position:relative; border:1px solid #000; border-width:0 1px; border-bottom:1px solid #444;}
.menu li {float:left;}
.menu li a {display:block; float:left; height:35px; line-height:35px; color:#AAA; text-decoration:none; font-size:11px; font-family:Arial, Verdana, Sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu li.current a {color:#EE5F00; background:url(../i/but3.gif);}
.menu li.current a b {color:#FFF; background:url(../i/but3.gif) no-repeat right top;}
.menu li a:hover {color:#FFF; background:#000 url(../i/but2.gif);}
.menu li a:hover b {background:url(../i/but2.gif) no-repeat right top;}
.menu li.current a:hover {color:#EE5F00; background:#000 url(../i/but3.gif); cursor:default;}
.menu li.current a:hover b {background:url(../i/but3.gif) no-repeat right top;}

и все... меню становится простым списком. код остальной страницы не привожу. он неважен. там ничего не меняется. загоняю меню в глобал - работает. ?

minelli · May 7, 2008

пользуюсь Home Site 4.5.2 + Top Style 3.10 (леченый). Смотрю Опера 9.2 и IE 6.

Dimitry Wolotko · May 7, 2008

minelli, тегом code пользуются только трусы?

Dimitry Wolotko · May 7, 2008

PS, а если нравиться HomeSite, то рекомендую HomeSite 5.5, сам на ней сижу.

minelli · May 7, 2008

2 Dimitry как ни странно, но у меня в форме не отображаются ни смайлы ни code. стоп! а может в этом вся соль? все мои заморочки. снесу как я оперу и заново поставлю.

minelli · May 7, 2008

хм... тогда при чем IE?

ZoNT · May 7, 2008

блин, зале куда-нить на бесплатный хостинг сайтик и кинь нам ссылку - посмотрим в работе... Так должно вс? работать...

minelli · May 7, 2008

дык если бы был сайт :-) первые шаги. кстати, освежил систему и глюки пропали. теперь придумал новую головную боль. если отключить позиционирование, содержимое блоков едет вниз. заметил, если список с меню вложить в строку таблицы, то блоки не съезжают. но вот загвоздка, если в строке добавить еще одну ячейку, то между ячейками появляется пробел. не поборол его. можно конечно следущие элементы меню отпозиционировать относительно действующего меню (планируется меню в стиле панели задач windows) хочу спросить, имеет ли право на жизнь такой вариант решения? вложение css меню в таблицу.

вот так все работает

<table>
		   <tr>
			 <td>
	 <ul class="menu">
				  <li class="current"><a href="index.htm">index</a></li>
	   <li><a href="about.htm">about</a></li>
	   <li><a href="news.htm">news</a></li>
	   <li><a href="emploer.htm">emploer</a></li>
	   <li><a href="competitor.htm">competitor</a></li>
	   <li><a href="contacts.htm">contacts</a></li>
	</ul>
			</td>
		  </tr>
</table>

а если добавить еще ячейку - разрыв.

~Kitty~ · May 8, 2008

Задайте ячейке с меню фиксированную высоту. Если меню будет больше этой высоты, ячейка растянется вниз на необходимую высоту.

(Если я правильно поняла суть проблему)

minelli · May 8, 2008

нет Китти. маленько не то. в коде вы видите таблицу в одну строку, с одной ячейкой. в ячейку вложен список с меню. все ок. я хочу добавить еще 5 ячеек. растянуть тулбар в ширину. после добавления ячейки, между ними появляется разрыв. просвечивает фон. пытался задавать бэкграунд и списку с меню и таблице. проблема не исчезает, только добавляется рамку вокруг всего меню. итак, в коде вы видите то, что есть.

теперь то, что хочу.

<table>
<tr>
<td>
	 <ul class="menu">
	 <li class="current"><a href="index.htm">index</a></li>
	 <li><a href="about.htm">about</a></li>
	 <li><a href="news.htm">news</a></li>
	 <li><a href="emploer.htm">emploer</a></li>
	 <li><a href="competitor.htm">competitor</a></li>
	 <li><a href="contacts.htm">contacts</a></li>
	</ul>
	</td>
	<td>бэкграунд - нарисованный разделитель меню</td>
	<td>поиск/td>
	<td>графическая кнопка искать</td>
	<td>бэкграунд - нарисованный разделитель меню</td>
	<td>графическая ссылка на аглицкий вариант в виде индикатора языков</td>
</tr>
</table>

то есть, меню банально воспроизводит вид панели задач на тему Vista.

~Kitty~ · May 8, 2008

А ширину ячейкам ставите?

minelli · May 8, 2008

тем которые идут после

да. а ячейка с меню динамически меняет ширину, в зависимости от количества символов в пунктах меню. проблема здесь кроется в том, для списка с меню есть стили. само собой, после

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

Sign In

подсветка input style=image

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

57 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

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

Обсуждения

Important Information