esconder imagenes con filtro alpha y regresarlas

Microbito · #1 (**permalink**) 19/12/2004, 04:53

hola, buen dia.

tengo una página donde hay varias imagenes que ya estan insertadas y son bastantes, lo que quiero hacer ahora es esconderlas y que aparezcan al pasar el mouse, estas imagenes se introducen a traves de un formulario donde se captura la información que despues se despliega en la página

Hasta ahorita lo he logrado asi:

colocando entre <head> y </head> el script:

<script>

function alphaon(x)
{document[x].filters.alpha.opacity +=97;}

function alphaoff(x)
{document[x].filters.alpha.opacity -=97;}

</script>

y despues, en el tag de la imagen:

<img src="imagen.jpg" name="imagen1" style="filter: alpha(opacity=3); cursor: hand;" onmouseover="alphaon('imagen1')" onmouseout="alphaoff('imagen1')">

(utilizo opacity=3 por que quiero que ligeramente se vea la imagen.)

ahora viene el problema: para usar el código anterior tengo que nombrar a las imagenes por separado: imagen1, imagen2, imagen3 y es lo que no puedo hacer.

quisiera saber si se puede hacer esto automáticamente sobre las etiquetas IMG de toda página sin tener que modificarles o agregarles alguna instrucción, y hacerlo todo desde las etiquetas <head>

otra cuestión: solo una o dos imagenes no requieren el alpha, tambien necesito un codigo para que no desaparezcan, a estas si puedo ponerle el codigo en el tag IMG

no manejo javascript y mi CSS es limitado, agradecería cualquier ayuda y orientación, gracias.

KarlanKas · #2 (**permalink**) 19/12/2004, 05:38

Pon, en vez de alphaon('imagen1'), esto:

alphaon(this)

lo mismo con el off.

KarlanKas · #3 (**permalink**) 19/12/2004, 05:52

Espera... puedes probar esto:

<html>
<head>
<title>Untitled</title>

<script>
function cargar(){
for(a=0;a<document.images.length;a++){
document.images[a].style.filter="alpha(opacity=3)";
document.images[a].style.cursor="hand";
document.images[a].onmouseover=function pepote(){this.filters.alpha.opacity +=97;};
document.images[a].onmouseout=function pepote2(){this.filters.alpha.opacity -=97;};
}
}
</script>
</head>

<body onload="cargar()">
<img src="http://www.karlankas.net/karlankas.jpg"><br>
<img src="http://www.karlankas.net/chufa2.jpg"><br>
<img src="http://www.karlankas.net/nieve.jpg"><br>

</body>
</html>

Microbito · #4 (**permalink**) 19/12/2004, 17:49

gracias karlangas, funcionó

solo me falta el código para la imagen que no quiero que tenga el alpha,
voy a tratar de hacerlo hoy, si tengo algun problema, vendré aqui de nuevo.

gracias por tu ayuda.

KarlanKas · #5 (**permalink**) 20/12/2004, 01:57

Bueno, lo que puedes hacer es antes de la última llave del script poner:

document.images["name_de_la_imagen"].style.filter="alpha(opacity=100)";

Obviamente en vez de "name_de_la_imagen" pones el name de la imagen que quieres que se vea. Si son varias se puede hacer un array con sus names y un bucle para que se vean. Lo malo es si no quieres que se haga el efecto. Si no quieres que tenga ese efecto pon:

<script>
function cargar(){
for(a=0;a<document.images.length;a++){
if(document.images[a].name!="name_de_la_imagen"){
document.images[a].style.filter="alpha(opacity=3)";
document.images[a].style.cursor="hand";
document.images[a].onmouseover=function pepote(){this.filters.alpha.opacity +=97;};
document.images[a].onmouseout=function pepote2(){this.filters.alpha.opacity -=97;};
}
}
}
</script>

Así evitas que lo tenga esa imagen en concreto. Si son varias dímelo y lo arreglamos.

Un saludo!

Microbito · #6 (**permalink**) 20/12/2004, 19:45

gracias karlangas, creo que con lo que me ayudaste basta para esa imagen, tambien lo habia hecho poniendola de background en un layer, ya que no se usa el tag IMG y el script no la toma en cuenta...

gracias por todo.

Microbito · #7 (**permalink**) 20/12/2004, 19:55

por cierto karlankas, lei tu blog, te invito al mio: http://lazarodepie.blogspot.com

KarlanKas · #8 (**permalink**) 21/12/2004, 02:14

De nada Microbito, para eso estamos!

Leiste mi blog y sigues vivo!? vaya! Normalmente la gente no sobrevive a su lectura.

Espero que lo de leer tu blog no sea una venganza por mi blog!

Voy a echar un vistazo!

PD.- Esto no es offtopic, lo he consultado con uno de los moderadores de esta sala y me ha dicho que no, así quee...