Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Как реализовать такой эффект, как в примере, с помощью inline
 
 автор: kipes   (22.03.2011 в 18:35)   письмо автору
 
 

Страница html

<html>
<head>
<link rel=stylesheet type="text/css" href="styleprototip.css">
</head>
<body>
<table border=0 roles="all" frame="void" bordercolor="white" cellspacing=11 width="100%" bgcolor="#E6E6E6" cellpadding="3px">
<tr><td class=normal onMouseOver="this.className='selected'" onclick="javascript:location.href='http://rostech.info'"
onMouseOut="this.className='normal'">
<img alt="" src="rar2.png" align="absMiddle" border="0"> Шифр 1.10.МИ.08 Железобетонные опоры ВЛЗ 6-10 кВ с изоляторами и изоляционными конструкциями производства ЗАО «ИНСТА» и линейной арматурой ЗАО «МЗВА». Рабочие чертежи и указания к применению. Спецпроектинжениринг.
</td>
</tr>
<tr><td class=normal onMouseOver="this.className='selected'" onclick="javascript:location.href='http://rostech.info'"
onMouseOut="this.className='normal'">
<img alt="" src="rar2.png" align="absMiddle" border="0">8312-ПЗ ЛЭП 110 кВ для выдачи мощности Калиниградской ТЭЦ-2. Том 1. Часть 2. Пояснительная записка. Западсельэнергопроект.
</td>
</tr>

<tr><td class=normal onMouseOver="this.className='selected'" onclick="javascript:location.href='http://rostech.info'"
onMouseOut="this.className='normal'">

<img alt="" src="rar2.png" align="absMiddle" border="0">Арх. № 9015 Конструкции железобетонных опор ВЛ 6-10 кВ для районов Западной Сибири. Альбом 3. Железобетонные конструкции опор. Сельэнергопроект.
</td>
</tr>
<tr><td class=normal onMouseOver="this.className='selected'" onclick="javascript:location.href='http://rostech.info'"
onMouseOut="this.className='normal'">
<img alt="" src="rar2.png" align="absMiddle" border="0">Арх. № 9015 Конструкции железобетонных опор ВЛ 6-10 кВ для районов Западной Сибири. Альбом 4. Металлические конструкции опор. Сельэнергопроект.
</td>
</tr>

<tr><td class=normal onMouseOver="this.className='selected'" onclick="javascript:location.href='http://rostech.info'"
onMouseOut="this.className='normal'">
<img alt="" src="rar2.png" align="absMiddle" border="0">Арх. № 10.0173 (дополнение к серии 3.407.1-143) Железобетонные опоры ВЛ 10 кВ со штыревыми изоляторами. Материалы для проектирования. Сельэнергопроект.
</td>
</tr>
<tr><td class=normal onMouseOver="this.className='selected'" onclick="javascript:location.href='http://rostech.info'"
onMouseOut="this.className='normal'">
<img alt="" src="rar2.png" align="absMiddle" border="0">Арх. № 11.0463 Одноцепные железобетонные опоры ВЛ 6-10 и 20 кВ на базе стоек СВ110-1(2, 3)-а. Рабочие чертежи опор. Сельэнергопроект.
</td>
</tr>

<tr><td class=normal onMouseOver="this.className='selected'" onclick="javascript:location.href='http://rostech.info'"
onMouseOut="this.className='normal'">
<img alt="" src="rar2.png" align="absMiddle" border="0">Арх. № 20.0027 Железобетонные опоры для совместной подвески защищенных проводов ВЛ 10 кВ и самонесущих изолированных проводов двухцепной ВЛ 0,4 кВ. Рабочие чертежи. АООТ «РОСЭП»
</td>
</tr>
<tr><td class=normal onMouseOver="this.className='selected'" onclick="javascript:location.href='http://rostech.info'"
onMouseOut="this.className='normal'">
<img alt="" src="rar2.png" align="absMiddle" border="0">Арх. № 20.0096 Переходные железобетонные опоры для совместной подвески самонесущих изолированных проводов ВЛИ 0,4 кВ и СИП для освещения. АООТ «РОСЭП»
</td>
</tr>
</table>
</body>
</html>


Внешний css-файл


<style type="text/css">
TD.normal{color: black; font-weight: lighter; background: #DDDDDD; cursor: hand;}
TD.selected{color: white; font-weight: lighter; background: #456387; cursor: hand;}
</style>

  Ответить  
 
 автор: Абырвалг   (22.03.2011 в 19:02)   письмо автору
 
   для: kipes   (22.03.2011 в 18:35)
 

Что значит "с помощью inline"?
"На пальцах" объясните - что именно Вам надо.

  Ответить  
 
 автор: kipes   (22.03.2011 в 20:07)   письмо автору
 
   для: Абырвалг   (22.03.2011 в 19:02)
 

Нужно отформатировать страницу с помощью inline-стилей с сохранением такого же результата. А не с помощью подключения внешнего файла стилей, как в примере выше.

  Ответить  
 
 автор: Абырвалг   (22.03.2011 в 23:05)   письмо автору
 
   для: kipes   (22.03.2011 в 20:07)
 

В общем, всё просто.
Показываю на примере одной ячейки. Точно также надо переписать во всех:
<td class=normal style="color: black; font-weight: lighter; background: #DDD; cursor: pointer"
onMouseOver="this.className='selected'" onmouseover="this.style.color = 'white'; this.style.background = '#456387'"
onclick="javascript:location.href='http://rostech.info'"
onMouseOut="this.className='normal'" onmouseout="this.style.color = 'black'; this.style.background = '#DDD'">

PS. Протокол javascript: использовать не надо - это делают только придурки.

PS2. Языки HTML и CSS (в отличие от Javascript'a) - регистроНЕЗАВИСИМЫЕ.
onMouseOut как атрибут тега пишут только придурки, этого не знающие.

PS3. Значение hand для свойства стиля cursor понимает только MSIE. Кроссбраузерно будет pointer.

PS4. Состоящий из одинаковых HEX-цифр RGB-код цвета можно сократить вдвое, т..е. вместо #DDDDDD можно писать #DDD, что и реализовано.

  Ответить  
 
 автор: kipes   (23.03.2011 в 08:49)   письмо автору
 
   для: Абырвалг   (22.03.2011 в 23:05)
 

Спасибо! Не работает http://rostech.info/tipovye-proekty
Joomla стирает часть кода.
Но придурками всех называть не надо, т.к. код списал с книги 2003 года.

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования