Применение opacity ко вложеным div

rrock · October 9, 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=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div class="top" id="table" style="opacity: 0.5">
TABLE
<table border="1">
  <tr>
    <td><div id="bot1" style="opacity: 0.4">BOT1</div></td>
    <td><div id="bot2" style="opacity: 0.6" >BOT2</div></td>
  </tr>
  <tr>
    <td><div id="bot3" style="opacity: 0.8" >BOT3</div></td>
    <td><div id="bot4" style="opacity: 1" >BOT4</div></td>
  </tr>
</table>
</div>

</body>
</html>

что нужно указать для BOT4 чтобы было видно целиком данный div id="bot4", а не 0.5, что устанавлен для div id="table";

заранее благодарен.

homm · October 9, 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=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div class="top" id="table" style="opacity: 0.5">
TABLE
<table border="1">
  <tr>
    <td><div id="bot1" style="opacity: 0.4">BOT1</div></td>
    <td><div id="bot2" style="opacity: 0.6" >BOT2</div></td>
  </tr>
  <tr>
    <td><div id="bot3" style="opacity: 0.8" >BOT3</div></td>
    <td><div id="bot4" style="opacity: 1" >BOT4</div></td>
  </tr>
</table>
</div>

</body>
</html>

что нужно указать для BOT4 чтобы было видно целиком данный div id="bot4", а не 0.5, что устанавлен для div id="table";

заранее благодарен.

opacity: 1 у него и всех его предков

rrock · October 9, 2008

opacity: 1 у него и всех его предков

Надо предков оставить как есть то есть 0.5

а bot4 сделать 1

homm · October 9, 2008

Ну надо так надо… Оставляй. bot4 будет полупрозрачным.

rrock · October 9, 2008

Ну надо так надо… Оставляй. bot4 будет полупрозрачным.

Молодец.

Значит ты решить данную проблему не в состоянии

klierik · October 9, 2008

2homm, хотя б на код взглянул бы там проблема в другом.

2rrock, будте, пожалуйста, сдержанней в своих постах, если Вы хотите чтоб Вам помогли на данном Форуме.

по сабжу.

дело в том, что код лежит внутри div с opacity .5, а собственно все что внутри него, будет иметь максимальную прозрачность равную .5 (хотя для каждого дочернего и стоит значение 1, эта еденица равна родительскому .5)

надеюсь не сильно загнуто

в общем.. Вам надо гасить уникальный ячейки таблицы. Для этого следует создать соответствующий класс (к примеру .disabled) с такими параметрами:

td.disabled {
				filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
				-moz-opacity: 0.3;
				-khtml-opacity: 0.3;
				opacity: 0.3;
			}

но єто в случае, если большая часть ячеек непрозрачны.

если же надо затушить все ячейки таблицы, а одну подсветить, то лучше сделать так:

table.class-name td.show-cell {
					filter:progid:DXImageTransform.Microsoft.Alpha(opacity=1);
					-moz-opacity: 1;
					-khtml-opacity: 1;
					opacity: 1;
				}

на нужную ячейку вешаем соответствующий класс и радуемся.

rrock · October 9, 2008

Нужно чтобы при наведении мыши на соответствующую ячейку она полностью отображалась а все что у папы в div id=table было темно

к сожалению поставить на td соответствующий стиль будет очень проблематично так как это достаточно большая таблица идущая исходно без классов и частично заполнена (причём таких таблиц много) вот пример таблицы выданной на экран


...
<tr>
        <td><div id="switchs"><table width="100%" cellspacing="5">
<tbody><tr><td><div id="switch_2"><!-- Start switch view -->
<!-- #Web_DisplaySwitchView USAGE=2~ -->

<table width="740" bgcolor="#999999" border="0" cellpadding="0" cellspacing="0">
  <tbody><tr>
    <td colspan="5"><table width="100%" background="base.php_files/p_stripe_y.gif" border="0" cellpadding="0" cellspacing="0">
        <tbody><tr>
          <td valign="top"><img src="base.php_files/p_atil_y1.gif" width="55" height="16"></td>
          <td width="100%" background="base.php_files/p_stripe_y.gif"></td>
          <td align="right" bgcolor="#999999"><nobr><b>**AT-8550GB**</b></nobr></td>
        </tr>

      </tbody></table></td>
  </tr>
  <tr>
    <td colspan="4"><img src="base.php_files/spacer.htm" width="1" height="5"></td>
  </tr>
  <tr>
    <td><table align="center" bgcolor="#999999" border="0" cellpadding="0" cellspacing="0">
        <tbody><tr>
          <td><p class="h5">49</p>

            <img style="opacity: 1;" src="base.php_files/p_g_pln1.gif" alt="Port 0/49" id="Prt_2_00_49_Img" onclick="click_port(this);" onmouseover="on_port(this);" onmouseout="out_port(this);" width="37" border="0" height="22"></td>
        </tr>
        <tr>
          <td><img src="base.php_files/p_g_pln1.gif" alt="Port 0/50" id="Prt_2_00_50_Img" onclick="click_port(this);" onmouseover="on_port(this);" onmouseout="out_port(this);" width="37" border="0" height="22">
            <p class="h5">50</p></td>
        </tr>
      </tbody></table></td>
    <td><table align="center" bgcolor="#999999" border="0" cellpadding="0" cellspacing="0">

        <tbody><tr>
          <td><p class="h5">01</p>
            <img style="opacity: 1;" src="base.php_files/p_t_pln1.gif" alt="Port 0/1" id="Prt_2_00_01_Img" onclick="click_port(this);" onmouseover="on_port(this);" onmouseout="out_port(this);" width="21" border="0" height="22"></td>
          <td><p class="h5">03</p>
            <img style="opacity: 1;" src="base.php_files/p_t_pln1.gif" alt="Port 0/3" id="Prt_2_00_03_Img" onclick="click_port(this);" onmouseover="on_port(this);" onmouseout="out_port(this);" width="21" border="0" height="22"></td>
          <td><p class="h5">05</p>
            <img style="opacity: 1;" src="base.php_files/p_t_pln1.gif" alt="Port 0/5" id="Prt_2_00_05_Img" onclick="click_port(this);" onmouseover="on_port(this);" onmouseout="out_port(this);" width="21" border="0" height="22"></td>

          <td><p class="h5">07</p>
            <img style="opacity: 1;" src="base.php_files/p_t_pln1.gif" alt="Port 0/7" id="Prt_2_00_07_Img" onclick="click_port(this);" onmouseover="on_port(this);" onmouseout="out_port(this);" width="21" border="0" height="22"></td>
          <td><p class="h5">09</p>
...

нужно чтобы при наведении на порт всё остальное становилось полупрозрачным вариант с <td> мне кажется не подойдет

Спасибо

Edited October 9, 2008 by rrock

klierik · October 9, 2008

не обязательно цитировать посты.

да. только тогда Вам надо использовать правило:

td:hover {}

с ИЕ6 у Вас будут проблемы. Вам надо сюда, для решения данной проблемы

rrock · October 9, 2008

В будущем вообще данное действие должно происходить при старте функции что запускается наведением мыши на совершенно другой элемент содержащий информацию о нужном теге(использую $.post - уже работает) делая запрос в базу данных

Спасибо

homm · October 9, 2008

2homm, хотя б на код взглянул бы там проблема в другом.

И в чем же там проблема? Разве ты не сделал в точности как я сказал: опасити=1 для элемента и всех его предков?

Значит ты решить данную проблему не в состоянии

Молодец. Я тебе дал единственно решение, а ты нос воротишь.

rrock · October 9, 2008

Молодец. Я тебе дал единственно решение, а ты нос воротишь.

Если будешь внимательнее то поймешь что этим проблема не решается

О твоем варианте и сам догадался.

только так не катит (код выходящий на экран можно посмотреть выше)

нужно чтобы В БАЛЬШОЙ РАЗНО ШОРСТНОЙ ТАБЛИЦЕ все было 0.5 а конкретно одна картинка должна быть полностью видна.

....
<div id='БАЛЬШАЯ_ТАБЛИЦА_1'>
ОТКРЫВАЕТСЯ БАЛЬШАЯ ТАБЛИЦА
....
<div id='id_1_1'>картинка_1</div>
....
<div id='id_1_2'>картинка_2</div>
....
<div id='id_1_n'>картинка_n</div>
....
ЗАКРЫВАЕТСЯ БАЛЬШАЯ ТАБЛИЦА
</div>
.....

И таких таблиц многа!!!! у всех конечно

id разные

Спасибо.

Заранее извиняюсь перед остальными что приходится повторяться

klierik · October 9, 2008

2homm, Ваш ответ был бы абсолютно верен.

но дело в том что таблица содержится в родительском теле <div> с уже установленым opacity: .5;

homm · October 10, 2008

Если будешь внимательнее то поймешь что этим проблема не решается

Решает.

О твоем варианте и сам догадался.
только так не катит (код выходящий на экран можно посмотреть выше)
нужно чтобы В БАЛЬШОЙ РАЗНО ШОРСТНОЙ ТАБЛИЦЕ все было 0.5 а конкретно одна картинка должна быть полностью видна.

И в чем проблема?

table.raznoshorstnaia_tablica td {

opacity: 0.5;}

table.raznoshorstnaia_tablica td.konkretno_odna_kartinka {

opacity: 1;}

Без относительно того, как ты хочешь или не хочешь сделать, как тебе кажется правильным или нет, единственное и неоспоримое решение — все родители полностью непрозрачного элемента долны быть неарозрачны. Если тебя это не устраивает по каким-то причинам, ты можешь биться головой об стены, кричать, но положения это не изменить.

2homm, Ваш ответ был бы абсолютно верен.
но дело в том что таблица содержится в родительском теле <div> с уже установленым opacity: .5;

klierik, я тебя не могу понять. Что значит «но»? Пусть лежит, но тогда нужного эффекта не будет. А если убрать этот див, то все будет как нужно. «но содержится». Да пусть содержится, мне то что.

rrock · October 10, 2008

2homm

вот исходный код, пожалуйста ознакомьтесь внимательно


...
<tr>
        <td><div id="switchs"><table width="100%" cellspacing="5">
<tbody><tr><td><div id="switch_2"><!-- Start switch view -->
<!-- #Web_DisplaySwitchView USAGE=2~ -->

<table width="740" bgcolor="#999999" border="0" cellpadding="0" cellspacing="0">
  <tbody><tr>
    <td colspan="5"><table width="100%" background="base.php_files/p_stripe_y.gif" border="0" cellpadding="0" cellspacing="0">
        <tbody><tr>
          <td valign="top"><img src="base.php_files/p_atil_y1.gif" width="55" height="16"></td>
          <td width="100%" background="base.php_files/p_stripe_y.gif"></td>
          <td align="right" bgcolor="#999999"><nobr><b>**AT-8550GB**</b></nobr></td>
        </tr>

      </tbody></table></td>
  </tr>
  <tr>
    <td colspan="4"><img src="base.php_files/spacer.htm" width="1" height="5"></td>
  </tr>
  <tr>
    <td><table align="center" bgcolor="#999999" border="0" cellpadding="0" cellspacing="0">
        <tbody><tr>
          <td><p class="h5">49</p>

            <img style="opacity: 1;" src="base.php_files/p_g_pln1.gif" alt="Port 0/49" id="Prt_2_00_49_Img" onclick="click_port(this);" onmouseover="on_port(this);" onmouseout="out_port(this);" width="37" border="0" height="22"></td>
        </tr>
        <tr>
          <td [color="#FF0000"][size=5](это надо сделать opacity: 1;)[/size][/color]><img src="base.php_files/p_g_pln1.gif" alt="Port 0/50" id="Prt_2_00_50_Img" onclick="click_port(this);" onmouseover="on_port(this);" onmouseout="out_port(this);" width="37" border="0" height="22">
            <p class="h5">50</p></td>
        </tr>
      </tbody></table></td>
    <td><table align="center" bgcolor="#999999" border="0" cellpadding="0" cellspacing="0">

        <tbody><tr>
          <td><p class="h5">01</p>
            <img style="opacity: 1;" src="base.php_files/p_t_pln1.gif" alt="Port 0/1" id="Prt_2_00_01_Img" onclick="click_port(this);" onmouseover="on_port(this);" onmouseout="out_port(this);" width="21" border="0" height="22"></td>
          <td><p class="h5">03</p>
            <img style="opacity: 1;" src="base.php_files/p_t_pln1.gif" alt="Port 0/3" id="Prt_2_00_03_Img" onclick="click_port(this);" onmouseover="on_port(this);" onmouseout="out_port(this);" width="21" border="0" height="22"></td>
          <td><p class="h5">05</p>
            <img style="opacity: 1;" src="base.php_files/p_t_pln1.gif" alt="Port 0/5" id="Prt_2_00_05_Img" onclick="click_port(this);" onmouseover="on_port(this);" onmouseout="out_port(this);" width="21" border="0" height="22"></td>

          <td><p class="h5">07</p>
            <img style="opacity: 1;" src="base.php_files/p_t_pln1.gif" alt="Port 0/7" id="Prt_2_00_07_Img" onclick="click_port(this);" onmouseover="on_port(this);" onmouseout="out_port(this);" width="21" border="0" height="22"></td>
          <td><p class="h5">09</p>
...

не меняя исходников напиши скрипт для получения положительного результата

if script.good ? alert('БЫЛ НЕ ПРАВ!!!')' : alert('НЕ РАБОТАЕТ ВАШЕ ПРЕДЛОЖЕНИЕ ПО РЕШЕНИЮ ДАННОЙ ЗАДАЧИ. ПОУЧИТЕСЬ ЧТОБЫ ОТВЕЧАТЬ НА ДАННЫЙ ВОПРОС И НЕ ВВОДИТЬ ПУБЛИКУ В ЗАБЛУЖДЕНИЕ ')

Перед всеми другими извиняюсь за данный текст

Edited October 10, 2008 by rrock

homm · October 11, 2008

> НЕ РАБОТАЕТ ВАШЕ ПРЕДЛОЖЕНИЕ ПО РЕШЕНИЮ ДАННОЙ ЗАДАЧИ

Ты че, дебил полный чтоли? Предложение работает, все элементы, которые имеют у себя и своих родителей opacity:1 отображаются полностью непрозрачными. А ужкак ты его применишь, нужно было раньше думать, когда верстал.

Vlad · October 11, 2008

homm, нежнее, еще нежнее!

rrock · October 12, 2008

> НЕ РАБОТАЕТ ВАШЕ ПРЕДЛОЖЕНИЕ ПО РЕШЕНИЮ ДАННОЙ ЗАДАЧИ
Ты че, дебил полный чтоли? Предложение работает, все элементы, которые имеют у себя и своих родителей opacity:1 отображаются полностью непрозрачными. А ужкак ты его применишь, нужно было раньше думать, когда верстал.

На оскорбление от невежества обращать внимание не будем.

Данную проблему решил следующим образом.

Если кто може написать поизящнее, милости просим, буду признателен.

2хомм, вот что я ожидал от адекватных и грамотных форумчан

function show_port_select(port)
{
	var port_image = '';
	var switch_id;
	var curent_port = '';
	port = port.replace('\n','');
	port = port.replace('\r','');
	port = port.replace('\t','');
	port_image = "Prt_"+port+"_Img";
	switch_id = "switch_"+port.split('_')[0];
	var node = document.getElementById(switch_id).getElementsByTagName('IMG');

	for(var i=0; i<node.length; i++) {
		curent_port = node[i].getAttribute('id');
			if(curent_port && curent_port == port_image) {
				document.getElementById(curent_port).style.opacity = 1;
			}else if (curent_port){
				document.getElementById(curent_port).style.opacity = .1;
			}else{
		}
	}
}

PS тему можно закрыть.

Edited October 12, 2008 by rrock

Sign In

Применение opacity ко вложеным div

Question

Link to comment

Share on other sites

16 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

Join the conversation

Обсуждения

Important Information