Fondo de tabla con porcentaje de transparencia

[ztikma]

Necesito poner un fondo de tabla con un porcentaje de transparencia que me permita ver también el fondo de la página...
Lo he visto con java pero no he podido encontrar el código.

Help please !!

[Wakkos]

A ver, en vez de tablas, utiliza capas. Son más posicionables y todo eso.

Antología de semi-transparencias, Por Wakkos:

Podemos asignarle una transparencia a una imagen de la siguiente manera:

<IMG style="FILTER: alpha(opacity=50); moz-opacity: 50%" height=123 src="chicadesnuda.jpg" width=160 border=0>


Eso funciona bien para IE pero para NN6.x funciona style="-moz-opacity: 50%;"

Ahora, sería jugar con un script para detectar el explorador y un document.write para escribir el estilo segun el explorador . Claro, hasta ahora hablamos de imágenes, pero lo digo porsi te da fastidio utilizar capas y quieres utilizar una imagen dentro de la tabla

Vamos con las capas:
Tambien le podemos asignar el filtro a una capa:
//Para IE
#IE {
FILTER: alpha(opacity=50);
COLOR:#ffcc00;
BACKGROUND-COLOR: #0000ff;
}
//Para NN
#NN {
-moz-opacity: 50%;
COLOR:#ffcc00;
BACKGROUND-COLOR: #0000ff;
}




En el body:
<DIV id=IE>Esta capa es azul, pero un poco transparente</DIV>
<DIV id=NN>Esta capa es azul, pero un poco transparente</DIV>

Igual, hacer un script que detecte el explorador e imprimir el estilo de la capa......


(Si quieres podemos trabajar en eso luego)

También, y ese ya lo hice, podemos hacer un script para que al pasar el mouse la imagen pierda su transparencia (o gane más) como lo dije antes.
Veamos:

Código:

<script type="text/javascript" language="JavaScript">
<!-- ;
// Written by mr.maX, http://www.maxworld.co.yu/

isIE = (navigator.userAgent.indexOf("MSIE") >= 0) ? 1 : 0;
isMozilla = (navigator.userAgent.indexOf("Gecko") >= 0) ? 1 : 0;

function maxGetOpacity() {
	if (isIE) {	return arguments[0].filters.alpha.opacity; } else
	if (isMozilla) { return parseInt(arguments[0].style.MozOpacity) }
}

function maxSetOpacity() {
	if (isIE) {	arguments[0].filters.alpha.opacity = arguments[1]; } else
	if (isMozilla) { arguments[0].style.MozOpacity = arguments[1]+"%"; }
}

// -->

</script>

Y en la imagen para NN6.x:
<a href="#"><img src="" width="160" height="123" border="0" style="-moz-opacity: 50%;" onmouseover="maxSetOpacity(this, 100)" onmouseout="maxSetOpacity(this, 50)"></a>

Y para IE:
<A href="#"><IMG onmouseover="maxSetOpacity(this, 100)" style="FILTER: alpha(opacity=50); moz-opacity: 50%" onmouseout="maxSetOpacity(this, 50)" height=123 src="mujerdesnuda.jpg" width=160 border=0></A>

Y violá.

Tengo que decir que yo no supiera nada de esto si no fuera por las detalladas explicaciones de Mr.maX en el ozoneasylum.com, así que todos los créditos para él. Se pueden hacer muchas cosas si se sabe combinar bien con JS, pero por ahora, esto sería lo más relevante para tu caso.

[ztikma]

Te pasaste amigo mio...
Voy a intentarlo de varias formas pero para tabla...
Tambien lo voy a intentar con color de fondo y no con imagen a ver que pasa
Grax :) :)

[oSo]

wow Wakkos! eso si que es una colección... mmm, bueno, para tablas, podrías definir un estilo CSS, algo así:

Código:

<style type=css>
TD.conalpha
{
    FILTER: Alpha(Opacity=100, FinishOpacity=50, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100);
}
</style>

Y en tu html

Código:

<table>
<tr>
<td class=conalpha><!-- aqui va el contenido --></td></tr></table>

Ese estilo te crea un degradé usando opacidad alpha, que es lo que te da las transparencias... juega un poco con los parámetros, para ver resultados :)

Saludos!

<div align="center"><img src="http://www.negociosenguatemala.com/biz/z/jd/fdwsign.jpg" alt="oSo" border="0"></div>

[ztikma]

GRan OSO
Te pasate , justo estaba entrando para preguntar el código para estilos y me encuentro con tu post...
Te pasaste
Muy agradecido :) :) :)

[ztikma]

Tengo un pequeño problema...
Mi idea era que el fondo de la tabla que esta predispuesto por estilo fuera semi transparente, pero con el estilo que me dió Oso todos los elementos dentro de esta Tabla se hacen semi transparente... in cluyendo texto e imagen que lo acompaña, además del fondo que si quiero que esté con alpha...
Help !!

[ztikma]

Se puede o no se puede ???

[Wakkos]

No hasta donde yo sé.

El tema me interesó un poco, así que trabajé en las propiedades de opacidad en los diferentes exploradores y elementos (imagen y capas) aplicable también a tablas, me pasé de flojo y no probé el ejempo de oso, pero ahora mismo me voy a probarlo.

Te recomiendo (una vez mas) que utilices capas, y con dos capas puedes lograr un fondo alpha semitransparente...

Acá está lo que yo hice:
<a href='ir.asp?http://www.fascinationtransport.com/wakk/opacity.html' target='_blank'>http://www.fascinationtransport.com/wakk...</a>

[ztikma]

Lo que pasa es que no puedo usar capas ya que el estilo lo aplico a un sitio hecho en php post-nuke, por lo tanto el uso de capas es limitado, además nunca me ha gustado usarlas por varias razones, la cosa es que el tip de oSo funcionó tan bien que no sólo dejó transparente el fondo si no que tb todos los elementos de la tabla. Tb intenté aplicarlo sólo a la imágen de fondo y no resultó. Así que voy a intentarlo de otra forma... espero que resulte, pero si llegas a averiguar que puedo hacer por favor dime
Grax !!

[zpez]

Creo que se puede si metes una imágen de background en la celda o en la tabla, esta imagen puede ser un solo color, un pixel estirado y le das el nombre ID=&quot;tuimagen&quot; y le aplicas los mismos estilos y el mismo script (o sino otro que funcione con imágenes)y le aplicas los mismos estilos en lo que se refiere a opacidad.
Yo esto no lo he probado, pero de todas formas es igual utilizar capas con posicionamiento relativo.

suerte

<html><center><img src="http://www.globalmedialab.com/firma/zpez.jpg" height=79 width=352 border="0" alt= ""></a>
</center></html>

[ztikma]

Si lo pruebas y te resulta dimelo
Porque la verdad no entendí nada

[zpez]

En el Script Master tienes el código para el efecto de fundido de imágen o transparencia de imagen, el cual puedes aplicarlo a una imagen tuya , incluso puede que funcione aunque la pongas como background.
un saludo

<html><center><img src="http://www.globalmedialab.com/firma/zpez.jpg" height=79 width=352 border="0" alt= ""></a>
</center></html>

[ztikma]

Como background no funciona porque a la imagen de fondo no se le puede poner ID, que que figura como Background-image y no como &lt;img&gt;